Browser-based user login (ESRI dojo Javascript 3.14)

Question

I have a web application (several custom Javascript modules plus a single HTML page) hosted on our local server. This works fine when the services that the application consumes are shared to 'Everyone' on ArcGIS.com.

To meet a business requirement I've now shared the tile and feature services that the application consumes only with a Private group on ArcGIS.com. I'm about to register the Javascript application on ArcGIS.com as a Ready to Use Web Mapping application. However, I don't understand the Redirect URL that is required as part of the registration process. In fact, I'm to sure I understand how to authenticate a user via ArcGIS.com, open our application, and consume the private group's services.

So, if our web site was ficticioussite.org.uk/sites.htm (this URL is set as the application's URL when the application is added to ArcGIS.com) what would be the redirect URL? Is it ficticioussite.org.uk/sites.htm again?

I've studied the documentation and samples but I don't understand how to authenticate the user (each user is a member of the Private group) and consume the private services. Would the user open the application via ficticioussite.org.uk/sites.htm and login to the private group using IdentityManager?

Answer 1

the short answer is yes.

if you skip writing special code to handle authentication, the identity manager will automatically pick up on the fact that secure services are present in your application and give end users an opportunity to provide their own credentials.

in this scenario, you don't need to worry about registering your application or specifying a redirect uri (as that workflow is reserved for situations in which you plan on leveraging OAuth2 so that end users can authenticate with arcgis.com directly instead of handing their sensitive credentials to you).

Answer 2

I found the documentation about registering an app difficult to follow also. The URI should be just the domain name of the URL, or in your case "ficticioussite.org.uk".

My app follows the example used in the OAuth Popup sample, with specific users in private groups. One thing the sample doesn't make clear is there is a separate html file (included in the zipped download) that you have to add your site (oauth-callback.html). For my site, once the user is authenticated after clicking the "login" button, he would have access to a feature layer ("WA_Grid") in that group that was owned by me. This was set using the queryParams variable.

    function logon() {
    featureLayerUrl = undefined;

    var theAppId = "yourAppId";
    var thePopupCallbackUrl = "http://yoursite.org/oauth-callback.html";

    var info = new ArcGISOAuthInfo({
        appId: theAppId,
        popupCallbackUrl: thePopupCallbackUrl,
        popup: true
    });
    esriId.registerOAuthInfos([info]);
    esriId.getCredential(info.portalUrl, {
        oAuthPopupConfirmation: false
    }).then(function () {
        new arcgisPortal.Portal("https://www.arcgis.com").signIn().then(function (portalUser) {
            var portal = portalUser.portal;
            domAttr.set("userId", "innerHTML", portalUser.fullName);
            var queryParams = {
                q: "owner: ken.buja_noaa AND type: Feature Service"
            };
            portal.queryItems(queryParams).then(function (result) {
                if (result.total > 0) {
                    if (array.some(result.results, function (item) {
                         featureLayerUrl = item.url;
                         return featureLayerUrl.indexOf("WA_Grid") > -1;
                    })) {
                        prepareEditor();
                    } else {
                        featureLayerUrl = null;
                        alert("The grid was not found in this ArcGIS.com account! Logging out...");
                        registry.byId("btnLogon").set("checked", true);
                    }
                } else {
                    featureLayerUrl = null;
                    alert("The grid is not available to edit! Logging out...");
                    registry.byId("btnLogon").set("checked", true);
                }
            });
        }
    ).otherwise(
      function (error) {
          console.log("Error occurred while signing in: ", error);
      }
    );
    });
}