Oauth 2.0

You can use OAuth 2.0 to access ArcGIS location services and secure content hosted in ArcGIS.

To authenticate requests using OAuth 2.0, you need to have one of the following accounts:

  • ArcGIS Online account
  • ArcGIS Developer account
  • ArcGIS Enterprise account

The easiest way to implement an OAuth 2.0 workflow is to integrate the request module from ArcGIS REST JS, which streamlines the authentication process.

How to use OAuth 2.0

The recommended way to implement OAuth 2.0 is to use the ArcGISIdentityManager module from ArcGIS REST JS.

Steps

Below are the typical steps for implementing browser-based OAuth 2.0.

  1. Go to your dashboard.
  2. Create or use an existing OAuth 2.0 application.
  3. Get the client ID and redirect URI from your application.
  4. Set the client ID (in your application).
  5. Create a callback page defined in the redirect URI that will complete the authentication process.
  6. Set the generated token where authentication is a required parameter.

To learn about other types of OAuth 2.0 authentication methods, visit Authenticate with an ArcGIS identity (server) tutorial.

Examples

OAuth 2.0 with ArcGIS REST JS

This example uses the ArcGISIdentityManager module from ArcGIS REST JS.

Use dark colors for code blocksCopy
             
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ArcGISIdentityManager } from "@esri/arcgis-rest-request";

// register your own app to create a unique clientId
const clientId = "abc123"

// send the user to the authorization page
ArcGISIdentityManager.beginOAuth2({
  clientId,
  redirectUri: 'https://yourapp.com/authenticate.html'
})
  .then(authenticationManager => {
    console.log(authenticationManager)
  });
Use dark colors for code blocksCopy
             
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ArcGISIdentityManager } from "@esri/arcgis-rest-request";

const clientId = "abc123"

/**
 * after the user authorizes the application they will be redirected to
 * the page defined in redirectUri which will need to complete the
 * authentication process.
 **/
ArcGISIdentityManager.completeOAuth2({
  clientId,
  redirectUri: 'https://yourapp.com/authenticate.html'
});

To learn more, go to Authentication in the ArcGIS REST JS guide.

OAuth 2.0 without ArcGIS REST JS

This example shows how to configure an OAuth 2.0 workflow without the helper methods from ArcGIS REST JS.

Use dark colors for code blocksCopy
                      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

  const clientID = "YOUR_CLIENT_ID";
  let accessToken;
  const callbacks = [];
  const protocol = window.location.protocol;
  const callbackPage = protocol + "./oauth-callback.html";

  function oauth(callback) {
        if (accessToken) {
          callback(accessToken);
        } else {
          callbacks.push(callback);
          window.open(
            "https://www.arcgis.com/sharing/oauth2/authorize?client_id=" +
              clientID +
              "&response_type=token&expiration=20160&redirect_uri=" +
              window.encodeURIComponent(callbackPage),
            "oauth",
            "height=400,width=600,menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes"
          );
        }
      }
Use dark colors for code blocksCopy
          
1
2
3
4
5
6
7
8
9
10
/* Once the user is authorized, the access token must be retrieved.*/
let match;
  if (window.location.hash && (match = window.location.hash.match(/#access_token=([^&]+)/))) {
    if (window.opener && window.opener.parent) {
      window.opener.parent.oauthCallback(match[1]);
    } else {
      window.parent.oauthCallback(match[1]);
    }
    window.close();
  }

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.