Access ArcGIS Online items using OAuthentication - 4.3 about angular-esri-map

[tomwayson]

Have you considered using popup sign? That would take the redirect out of your routing at least.

[Nick-t-go]

@tomwayson I am using the 4.x API. I did try the popup option but the credentials still didn't register in the identityManager upon callback...It's been awhile would have to revisit to fill you in on the details of the problem with the popup.

[andygup]

@Nick-t-go do you have oauth-callback.html in your /www directory?

Reference: download source from JS API 3.20 Oauth Popup Sample app

[Nick-t-go]

@andygup I did have that in my directory. The issue is the credentials seem to only get returned to the oauth-callback.html. Since I am in angular that falls out of the scope of my app and I am assuming, as I am not sure what the mechanism is, the credentials aren't hitting the identity manager but I believe I can see what is returned(token and such) from the response.....I should create a simple app myself and share it here.

[tomwayson]

Since I am in angular that falls out of the scope of my app and I am assuming, as I am not sure what the mechanism is, the credentials aren't hitting the identity manager

The credentials are passed in this line from oauth-callback.html:

opener.require("esri/kernel").id.setOAuthResponseHash(location.hash);

I would expect that to work, as long as esri-loader has already been bootstrapped. If the credentials are still not hitting the identity manager, I'd put a debugger there and see what you get.

[andygup]

@Nick-t-go I was able to reproduce an endless loop behavior using ArcGIS JS API 4.4 and Angular 4.1.3 in the latest versions of Chrome and Safari when OAuthInfo.popup = false. In other words, main app executes > I log into Portal via the login screen > callback gets executed > main app gets reloaded > I get the login screen again.

Try setting OAuthInfo.popup = true and let us know what happens? This change worked for me - note that I didn't get a popup and the Portal login simply opened in another browser tab. This behavior may be related to another issue we are looking at in IdentityManager.

[andygup]

RE: Ionic

Since I've gotten several questions, I'm cross-reference this issue with an Ionic (mobile Angular + Cordova) issue.

Due to changes in Chrome/Android, you cannot use IdentityManager with Ionic (latest), you'll need to roll your own OAuth solution: Using Esri OAuth with Ionic 2+

[tyler-austin]

@tomwayson @andygup I am having the same issue with my AngularJS app. When I use the popup, IdentityManager doesn't seem handle the call back. The popup remains open with the message "Cannot GET /oauth-callback.html". Is this still an open issue that we need to provide our own solution to?

Snippet of my code:

(function (angular) {
    'use strict';
    angular
        .module('vmsApp')
        .controller('SigninController', SigninController);

    SigninController.$inject = ['$q', '$window', '$cookies', 'esriRegistry', 'esriLoader'];
    /* @ngInject */
    function SigninController($q, $window, $cookies, esriRegistry, esriLoader) {

        var vm = this;

        var EsriArcGISPortal;
        var EsriOAuthInfo;
        var EsriIdentityManager;

        var info;
        var cred = 'app_esri_cred';

        vm.$onInit = function () {

            esriLoader.require([
                'esri/arcgis/Portal',
                'esri/arcgis/OAuthInfo',
                'esri/IdentityManager'
            ], function (
                arcgisPortal,
                OAuthInfo,
                esriId
            ) {

                EsriArcGISPortal = arcgisPortal;
                EsriOAuthInfo = OAuthInfo;
                EsriIdentityManager = esriId;

                info = new EsriOAuthInfo({
                    appId: 'p1mSml1jfovOMxKB',
                    // Uncomment the next line and update if using your own portal
                    portalUrl: 'http://ndw2k16esri01.ndev.coic.mil/portal',
                    // Uncomment the next line to prevent the user's signed in state from being shared
                    // with other apps on the same domain with the same authNamespace value.
                    // authNamespace: 'portal_oauth_inline',
                    popup: true
                });
                EsriIdentityManager.registerOAuthInfos([info]);

                loadCredentials();

            });

            vm.oauthEsri = function () {

                EsriIdentityManager.checkSignInStatus(info.portalUrl + '/sharing')
                    .then(function (credential) {
                        getPortalItems();
                        console.log('Getting Items');
                        storeCredentials();
                        console.log('ESRI: Credential:', credential);
                    })
                    .otherwise(function () {
                        console.log('ESRI: getting credential');
                        EsriIdentityManager.getCredential(info.portalUrl + '/sharing', {
                                oAuthPopupConfirmation: false
                            })
                            .then(function (credential) {
                                getPortalItems();
                                console.log('Getting Items');
                                console.log('ESRI: Credential:', credential);
                                storeCredentials();
                            })
                            .otherwise(function () {
                                console.log('Never got any credentials');
                            });
                    });
            };

            function loadCredentials() {
                var idJson;
                var idObject;

                if (supportsLocalStorage()) {
                    idJson = window.localStorage.getItem(cred);
                    console.log('read from local storage');
                } else {
                    idJson = $cookies.get(cred);
                    console.log('read from a cookie');
                }

                if (idJson && idJson !== 'null' && idJson.length > 4) {
                    idObject = JSON.parse(idJson);
                    EsriIdentityManager.initialize(idObject);
                } else {
                    console.log('did not find anything to load :(');
                }
            }

            function storeCredentials() {
                // make sure there are some credentials to persist
                if (EsriIdentityManager.credentials.length === 0) {
                    console.log('Esri Credentials Object Empty');
                    return;
                }

                // serialize the ID manager state to a string
                var idString = JSON.stringify(EsriIdentityManager.toJson());
                // store it client side
                if (supportsLocalStorage()) {
                    // use local storage
                    window.localStorage.setItem(cred, idString);
                    console.log('wrote to local storage');
                } else {
                    // use a cookie
                    $cookies.put(cred, idString);
                    console.log('wrote a cookie :-/');
                }
            }

            function supportsLocalStorage() {
                try {
                    return 'localStorage' in $window && $window.localStorage !== null;
                } catch (e) {
                    return false;
                }
            }

            function getPortalItems() {
                new EsriArcGISPortal.Portal(info.portalUrl).signIn()
                    .then(function (portalUser) {
                            console.log('Signed in to the portal: ', portalUser);

                            queryPortal(portalUser);
                        }
                    )
                    .otherwise(function (error) {
                            console.log('Error occurred while signing in: ', error);
                        }
                    );
            }

            function queryPortal(portalUser) {
                var portal = portalUser.portal;

                // See list of valid item types here:  http://www.arcgis.com/apidocs/rest/index.html?itemtypes.html
                // See search reference here:  http://www.arcgis.com/apidocs/rest/index.html?searchreference.html
                var queryParams = {
                    q: 'owner:' + portalUser.username,
                    sortField: 'numViews',
                    sortOrder: 'desc',
                    num: 20
                };

                portal.queryItems(queryParams)
                    .then(function (items) {
                        console.log('Item From Query:', items);
                    });
            }

        };
    }

})(angular);

[andygup]

@tyler-austin Yep, you'll need to roll your own solution for AngularJS. You might take a look here to cherry pick ideas on how to log in manually.

If you do come up with something for AngularJS please post a comment in case others have similar issues.

[jwasilgeo]

Closing due to inactivity for quite some time. Feel free to reopen as needed.