View members in your organization using an API key
An Application Programming Interface key (API key) is a long-lived access token that defines the scope and permission for granting a public-facing application access to ready-to-use services. With ArcGIS REST JS, you use the ApiKeyManager
class to set your API key before accessing services.
In this tutorial, you create and configure an access token to view members in your organization.
Security and authentication guideTo learn more about different types of authentication, go to How to use authentication.
PrerequisitesAn ArcGIS Location Platform, ArcGIS Online, or ArcGIS Enterprise account.
Steps Create a new appCreate a new CodePen app with a <pre>
element that is the full width and height of the browser window.
Go to CodePen and create a new pen for your application.
In CodePen > HTML, add HTML and CSS to create a page with a <pre>
element called result
.
Use the HTML to create a page with a map. Use the map
div to display the map. Use the CSS to make the map full width and height.
The <!DOCTYPE html>
tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.
Use dark colors for code blocks
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ArcGIS REST JS</title>
<style>
body {
font-family: monospace;
color: white;
background: #000000;
}
pre {
overflow: auto;
padding: 1rem;
background: #000000;
}
</style>
</head>
<body>
<pre id="result"></pre>
</body>
</html>
Create a new API key credential with the correct privileges to access the resources used in this tutorial.
Add references to the arcgis-rest-request
library. The library contains request/response processing, authentication helpers, and error handling.
Use dark colors for code blocks
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
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ArcGIS REST JS</title>
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
Create an accessToken
variable and set its value to your API key. Create an authentication
variable that will call the fromKey
method to create an instance of ApiKeyManager
.
Expand
Use dark colors for code blocks1
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
<script>
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
Define a url
variable and assign it the portal URL where the request will be sent.
Expand
Use dark colors for code blocks1
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
<script>
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
const url = "https://www.arcgis.com/sharing/rest/community/users"
</script>
Use the request
function to retrieve a list of users in your organization whose names contain the text john
. Provide the search parameters q: "john"
in the request options to filter the results. Then, print out the JSON result.
Expand
Use dark colors for code blocks1
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
<script>
const accessToken = "YOUR_ACCESS_TOKEN";
const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);
const url = "https://www.arcgis.com/sharing/rest/community/users"
arcgisRest.request(url, {
authentication,
params: {
q: "john", // The query string to search the users against
f: "json"
}
}).then(response => {
document.getElementById("result").textContent = JSON.stringify(response, null, 2);
})
</script>
Run the app.
The result should look similar to
this.
What's next?Learn how to use additional ArcGIS Location Services in these tutorials:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4