Access ArcGIS Online items using OAuth 2.0

View live

This sample shows you how to use inline web flow, as opposed to using a pop-up window that presents a login user interface. With inline web flow there is no popup window involved. It allows users to login to ArcGIS using OAuth 2.0 functionality built directly into the IdentityManager.

This built-in functionality handles a lot of the fine-grained work that you would typically have to do when implementing this type of authentication.

The IdentityManager component simplifies the process of working with the token by appending it to requests and acquiring a new token when necessary. All you need to do is create an OAuthInfo object and specify the appId you received when registering your application. After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the IdentityManager takes care of the rest.

Additional snippets are provided below which show how to configure an application to use a popup window to sign in.

There are four modules to focus on in this sample. These are:

Use dark colors for code blocksCopy
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/portal/PortalQueryParams"

The first step is to create an OAuthInfo object and register it with the IdentityManager.

Use dark colors for code blocksCopy
const info = new OAuthInfo({
  // Swap this ID out with registered application ID
  appId: "q244Lb8gDRgWQ8hM",
  // Uncomment the next line and update if using your own portal
  // portalUrl: "https://<host>:<port>/arcgis"
  // 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",
  flowType: "auto", // default that uses two-step flow
  popup: false
});

esriId.registerOAuthInfos([info]);

Use the snippet below if needing to sign in via a popup window.

Use dark colors for code blocksCopy
const infoCode = new OAuthInfo({
  // Swap this ID out with registered application ID
  appId: "q244Lb8gDRgWQ8hM",
  // Uncomment the next line and update if using your own portal
  // portalUrl: "https://<host>:<port>/arcgis"
  // 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",
  flowType: "authorization-code", // set to this if using a popup for  signing in.
  popup: true,
  popupCallbackUrl: "oauth-callback.html" // page should be relative to application. Make sure it's updated to handle two-step flow, see https://github.com/Esri/jsapi-resources/blob/master/oauth/oauth-callback.html for a sample of this.
});

Next, check if the user is already signed in and able to access the resource.

Use dark colors for code blocksCopy
esriId.checkSignInStatus(info.portalUrl + "/sharing").then(() => {
  displayItems();
  }).catch(() => {
    // Anonymous view
    anonPanelElement.style.display = "block";
    personalPanelElement.style.display = "none";
  });

Set the click event to redirect the user to a sign-in page. The resulting credential is then used to access any secured resources.

Use dark colors for code blocksCopy
document.getElementById("sign-in").addEventListener("click", () => {
  // user will be redirected to OAuth sign-in page
  esriId.getCredential(info.portalUrl + "/sharing");
});

If using a popup window to sign in, the sign-in click event listener will need to be slightly updated to look similar to what is below.

Use dark colors for code blocksCopy
document.getElementById("sign-in").addEventListener("click", () => {
  // user will be redirected to OAuth sign-in page
  esriId.getCredential((info.portalUrl + "/sharing"), {
    oAuthPopupConfirmation: false
  }).then(function() {
    displayItems();
  });
});

Similarly, when a user signs out, destroy the credentials. This will revoke any tokens generated via OAuth.

Use dark colors for code blocksCopy
document.getElementById("sign-out").addEventListener("click", () => {
  esriId.destroyCredentials();
  window.location.reload();
});

Once the user signs in, query the Portal for items.

Use dark colors for code blocksCopy
function displayItems() {
  const portal = new Portal();
  // Setting authMode to immediate signs the user in once loaded
  portal.authMode = "immediate";
  // Once loaded, user is signed in
  portal.load().then(() => {
    // Create query parameters for the portal search
    const queryParams = new PortalQueryParams({
      query: "owner:" + portal.user.username,
      sortField: "numViews",
      sortOrder: "desc",
      num: 20
    });

    userIdElement.innerHTML = portal.user.username;
    anonPanelElement.style.display = "none";
    personalPanelElement.style.display = "block";

    // Query the items based on the queryParams created from portal above
    portal.queryItems(queryParams).then(createGallery);
  });
}

Please see the authentication documentation for additional detailed information about user authentication and OAuth 2.0. In addition, please refer to the ArcGIS Organization portals for more information on authentication.

Portal

OAuthInfo

esriId

ArcGIS Maps SDK for JavaScriptSample Code

Access ArcGIS Online items using OAuth 2.0

Was this page helpful?