How to implement app authentication

This topic outlines the high-level steps of how to implement app authentication.

1. Create OAuth credentials

A set of OAuth 2.0 credentials are required for app authentication. These credentials are created as an item in your portal.

1. Sign in to your portal.

2. Click Content > My content > New item and select Developer credentials.

3. In the Credential types menu, select OAuth credentials.

4. In the Privileges menu, select privileges to determine the operations your application will be authorized to perform.

5. In the Item access menu, select items to determine what content your application will be authorized to access.

6. Review your selections and, when you are ready, click Generate credentials.

2. Implement a client credentials flow

App authentication uses an OAuth 2.0 authorization flow with a grant type of client_credentials. This involves making a request to the token endpoint with a client_id and client_secret from OAuth credentials. The high-level steps to implement this flow are as follows:

1. Paste the client_id and client_secret from a set of OAuth credentials into your application.

2. Submit a POST request to the token endpoint, either directly or through a helper class provided by an ArcGIS API.

3. Use the access token returned in the response. If you made the request on a server, you can now send the access token to your client application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ApplicationCredentialsManager } from "@esri/arcgis-rest-request";
import { geocode } from "@esri/arcgis-rest-geocoding";

const appManager = ApplicationCredentialsManager.fromCredentials({
  clientId: "YOUR_CLIENT_ID",
  clientSecret: "YOUR_CLIENT_SECRET"
});

appManager.refreshToken().then((manager) => {

3. Make a request

Implementing app authentication successfully will grant an access token to your application when it requests one. The access token will have privileges defined by the OAuth credentials used to supply the client_id and client_secret.

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
      esriConfig.apiKey= "YOUR_ACCESS_TOKEN";
      const map = new Map({
        basemap: "arcgis-topographic" // Basemap layer
      });

      const view = new MapView({
        map: map,
        center: [-118.805, 34.027],
        zoom: 13, // scale: 72223.819286
        container: "viewDiv",
        constraints: {
          snapToZoom: false
        }
      });

1
2
3
4
curl https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates \
-d "f=pjson" \
-d "address=1600 Pennsylvania Ave NW, DC" \
-d "token=<YOUR_ACCESS_TOKEN>"

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
{
    "spatialReference": {
      "wkid": 4326,
      "latestWkid": 4326
    },
    "candidates": [
      {
        "address": "1600 Pennsylvania Ave NW, Washington, District of Columbia, 20500",
        "location": {
          "x": -77.036548499999995,

Tutorials