Access ArcGIS Online items using OAuth 2.0

This sample shows how to log in to ArcGIS Online or Enterprise using OAuth 2.0 authentication and the IdentityManager. The IdentityManager provides built-in functionality to support the authentication process.

All you need to do is create an OAuthInfo object and specify the application ID you received when registering your application. See After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the IdentityManager takes care of the rest.

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

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        "esri/portal/Portal",
        "esri/identity/OAuthInfo",
        "esri/identity/IdentityManager",
        "esri/portal/PortalQueryParams"

How it works

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

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        //Create a new OAuthInfo object.
        const info = new OAuthInfo({
          // Swap this ID out with an app ID registered in your ArcGIS Organization.
          appId: "q244Lb8gDRgWQ8hM"
          // Add the portalUrl property if using your own portal.
          // portalUrl: "https://<host>:<port>/<webadaptor>",
          // Set the authNamespace property 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",
          // Set popup to true to show the OAuth sign-in page in a separate popup window.
          //popup: true
        });

        // Add the OAuthInfo to the IdentityManager.
        esriId.registerOAuthInfos([info]);

Once the OAuthInfo is registered with IdentityManager, check if the user is already signed in and able to access the resource.

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        // Call the checkSignIn function to see if the user is already signed in.
        checkSignIn();

        // Function to check the current sign in status and query the portal if signed in.
        function checkSignIn() {
          esriId
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
              // If signed in, show the username in the UI.
              navigationUser.hidden = false;
              signInButton.hidden = true;
              const portal = new Portal({
                authMode: "immediate"
              });
              // Check if using a portal other than ArcGIS Online.
              if (info.portalUrl !== "https://www.arcgis.com") {
                portal.url = info.portalUrl;
              }
              // Load the portal, display the name and username, then call the query items function.
              portal.load().then(() => {
                navigationUser.fullName = portal.user.fullName;
                navigationUser.username = portal.user.username;
                navLogo.description =
                  "Gallery of queried portal items displayed below. To sign out, click on the logged in user button.";
                queryItems(portal);
              });
            })
            .catch(() => {
              // If not signed in, then show the sign in button.
              signInButton.hidden = false;
              navigationUser.hidden = true;
              navLogo.description = "Use OAuth to log in to an ArcGIS Organization to view your items.";
            });
        }

If the user is not signed in and they click the Sign in button, redirect the user to a sign-in page. The resulting credential is then used to access any secured resources. When the user clicks the button to sign out, destroy the credentials to sign out. This will revoke any tokens generated via OAuth.

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        // Function to sign in or out of the portal used by the sign in/out button click event.
        function signInOrOut() {
          esriId
            .checkSignInStatus(info.portalUrl + "/sharing")
            .then(() => {
              // If already signed in, then destroy the credentials to sign out.
              esriId.destroyCredentials();
              window.location.reload();
            })
            .catch(() => {
              // If the user is not signed in, generate a new credential.
              esriId
                .getCredential(info.portalUrl + "/sharing", {
                  // Set the following property to false to not show a dialog
                  // before the OAuth popup window is open.
                  //oAuthPopupConfirmation: false,
                })
                .then(() => {
                  // Once a credential is returned from the promise, check the
                  // sign in status to query the portal for items.
                  checkSignIn();
                });
            });
        }

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

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        // Function to query for portal items.
        function queryItems(portal) {
          // Create query parameters for the portal search.
          const queryParams = new PortalQueryParams({
            query: "owner:" + portal.user.username,
            sortField: "num-views",
            sortOrder: "desc",
            num: 20
          });
          // Query the items based on the queryParams created from the portal.
          portal.queryItems(queryParams).then(createGallery);
        }

Finally, create the UI to display a gallery of the queried items returned from the promise. The UI is built by creating a Calcite card component for each queried item that shows the item's title, type, thumbnail, and view count along with a button to open the item in a separate browser.

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
        // Function to build the UI for the gallery to display queried portal items.
        function createGallery(items) {
          items.results.forEach((item) => {
            // Create a card for each item and add a thumbnail, title, subtitle,
            // view count value, and a button to open the item in a new window.
            const card = document.createElement("calcite-card");
            const thumbnail = document.createElement("img");
            thumbnail.slot = "thumbnail";
            thumbnail.src = item.thumbnailUrl;

            const title = document.createElement("span");
            title.slot = "title";
            title.style = "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;";
            title.innerHTML = item.title;

            const type = document.createElement("span");
            type.slot = "subtitle";
            type.innerHTML = item.type;

            const views = document.createElement("span");
            views.slot = "footer-end";
            views.innerHTML = "Views: " + item.numViews;

            const openItemAction = document.createElement("calcite-action");
            openItemAction.icon = "launch";
            openItemAction.slot = "footer-end";
            openItemAction.value = item;
            // Add event listener to open the item details page in a new window.
            openItemAction.addEventListener("click", (event) => {
              window.open(event.target.value.itemPageUrl);
            });

            card.appendChild(thumbnail);
            card.appendChild(title);
            card.appendChild(type);
            card.appendChild(views);
            card.appendChild(openItemAction);

            // Add each card to a new div with styling and add to the calcite panel.
            const div = document.createElement("item");
            div.style = "float: left; padding: 10px; display: inline-block;";
            div.appendChild(card);
            itemGallery.appendChild(div);
          });
        }

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.

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