Access a secure webmap using OAuth 2.0

This sample shows how to display a secure webmap using OAuth 2.0 authentication and the IdentityManager. The IdentityManager provides built-in functionality to support the authentication process.

How it works

First, register an application with your ArcGIS organization to get an application ID. This ID is used to authenticate your application with the ArcGIS platform. See the OAuth credentials documentation or the tutorial for additional detailed information about registering an application.

Create an OAuthInfo object and specify the application ID you received when registering your application. This must be done before the map components are loaded. After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the IdentityManager takes care of the rest.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
        const oAuthInfo = new OAuthInfo({
          // Replace with your actual App ID
          appId: "APP_ID"
          // Set the portalUrl if using a portal other than ArcGIS Online.
          //portalUrl: esriConfig.portalUrl
        });
        esriId.registerOAuthInfos([oAuthInfo]);

Add an arcgis-map component and set the item-id attribute to a secure webmap. Add an arcgis-search and arcgis-legend component to the map.

1
2
3
4
<arcgis-map item-id="SECURE_WEBMAP_ID">
  <arcgis-search position="top-right"></arcgis-search>
  <arcgis-legend position="bottom-left"></arcgis-legend>
</arcgis-map>

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.

For a similar example using ESM, see this GitHub sample.