Learn how to use ArcGIS Maps SDK for Javascript to implement user authentication.
If your application needs access to your users' secure content through ArcGIS or if you are distributing your app through ArcGIS Marketplace, you must implement user authentication. This allows individual users with an ArcGIS Online or ArcGIS Enterprise account to authorize your app to use the content and services to which they have access; it also uses their credits for any paid premium content and services.
Prerequisites
You need an ArcGIS account to register a new application and obtain its client
. See the register your application tutorial. If you do not have an ArcGIS account you can sign up for a free ArcGIS Location Platform account.
When registering your application you will need to configure a redirect URL that will point to the URL where you are hosting your application. Generally this will be a local web server such as http
.
Steps
Create a new pen
- Go to CodePen to create a new pen for your mapping application.
Add the HTML
- In CodePen > HTML, add HTML and CSS to create a page with
<button
and> <pre
elements to allow the user to sign in, sign out, and to display user credentials.> Use dark colors for code blocks <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title> <style> html, body { font-size: 150%; margin: 10vh 10vw; } </style> </head> <body> <button id="sign-in" class="btn btn-primary">Sign In</button> <button id="sign-out" class="btn btn-primary">Sign Out</button> <pre><code id="results"></code></pre> </body> </html>
Reference the API
- In the
<head
tag, add references to the CSS file and JS library.> Use dark colors for code blocks <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>ArcGIS Maps SDK for JavaScript Tutorials: Implement user authentication</title> <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.30/"></script> <style> html, body { font-size: 150%; margin: 10vh 10vw; } </style> </head>
Add modules
- In the
<head
tag, add a> <script
tag and a> require
statement to load thePortal
,O
, andAuth Info Identity
modules.Manager
The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require
function uses references to determine which modules will be loaded – for example, you can specify "esri/
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. To learn more about the API's different modules visit the Overview Guide page.
<script>
require([
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager"
], function (Portal, OAuthInfo, esriId) {
});
</script>
Register credentials with Identity Manager
-
Go to the OAuth credentials item page and copy the Client ID.
-
Create an
O
object and set theAuth Info app
with the copiedId client
before you register it with_id Identity
.Manager Use dark colors for code blocks require([ "esri/portal/Portal", "esri/identity/OAuthInfo", "esri/identity/IdentityManager" ], function (Portal, OAuthInfo, esriId) { const info = new OAuthInfo({ appId: "YOUR-CLIENT-ID", popup: false // the default }); esriId.registerOAuthInfos([info]);
Handle sign in
Once you have registered your client
with Identity
the ArcGIS Maps SDK for JavaScript will automatically prompt a user to authorize your application whenever it accesses a service that requires authentication. Create a sign in experience by accessing the users profiles with the Portal
class.
-
Create a
handle
function to be called when the user authorizes your application and then load theSigned In Portal
. After the user provides authorization, obtain and display thefull
andName username
on the page.Use dark colors for code blocks const info = new OAuthInfo({ appId: "YOUR-CLIENT-ID", popup: false // the default }); esriId.registerOAuthInfos([info]); function handleSignedIn() { const portal = new Portal(); portal.load().then(() => { const results = { name: portal.user.fullName, username: portal.user.username }; document.getElementById("results").innerText = JSON.stringify(results, null, 2); }); }
-
Call the
check
method against a service URL. If the user has provided credentials, call theSign In Status handle
function.Signed In check
can accept a URL for any service. The default ArcGIS portal URLSign In Status https
is the easiest way to fully authenticate a user.://arcgis.com/sharing/rest/ Use dark colors for code blocks const info = new OAuthInfo({ appId: "YOUR-CLIENT-ID", popup: false // the default }); esriId.registerOAuthInfos([info]); esriId .checkSignInStatus(info.portalUrl + "/sharing") .then(() => { handleSignedIn(); }) function handleSignedIn() { const portal = new Portal(); portal.load().then(() => { const results = { name: portal.user.fullName, username: portal.user.username }; document.getElementById("results").innerText = JSON.stringify(results, null, 2); }); }
Handle sign out
-
Create a
handle
function when a user's credentials are destroyed.Signed Out Use dark colors for code blocks function handleSignedIn() { const portal = new Portal(); portal.load().then(() => { const results = { name: portal.user.fullName, username: portal.user.username }; document.getElementById("results").innerText = JSON.stringify(results, null, 2); }); } function handleSignedOut() { document.getElementById("results").innerText = 'Signed Out' }
-
Append a
catch
statement to call thehandle
function when the user signs out.Signed Out Use dark colors for code blocks esriId .checkSignInStatus(info.portalUrl + "/sharing") .then(() => { handleSignedIn(); }) .catch(() => { handleSignedOut(); });
Add event listeners
-
Call the
get
method when a user clicks theCredential sign-in
button.Use dark colors for code blocks .catch(() => { handleSignedOut(); }); document.getElementById("sign-in").addEventListener("click", function () { esriId.getCredential(info.portalUrl + "/sharing"); });
-
Call the
destroy
method when a user clicks theCredentials sign-out
button before reloading the page.Use dark colors for code blocks .catch(() => { handleSignedOut(); }); document.getElementById("sign-in").addEventListener("click", function () { esriId.getCredential(info.portalUrl + "/sharing"); }); document.getElementById("sign-out").addEventListener("click", function () { esriId.destroyCredentials(); window.location.reload(); });
Run the App
You should now have an application that can check for credentials using OAuth 2.0.
What's next?
Learn how to use additional API features and ArcGIS services in these tutorials: