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.
Below are the typical steps for implementing browser-based OAuth 2.0.
- Go to your dashboard.
- Create or use an existing OAuth 2.0 application.
- Get the client ID and redirect URI from your application.
- Set the client ID (in your application).
- Create a callback page defined in the redirect URI that will complete the authentication process.
- Set the generated token where authentication is a required parameter.
To learn about other types of OAuth 2.0 authentication methods, visit Implement user authentication (server) tutorial.
Examples
OAuth 2.0 with ArcGIS REST JS
This example uses the ArcGISIdentity module from ArcGIS REST JS.
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)
});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.
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"
);
}
}/* 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();
}