Sign in with an ArcGIS account

Allow a user with an ArcGIS account to sign in with OAuth 2.0. This will grant the application access to owner information. To learn more, visit OAuth 2.0 in the Mapping APIs and location services guide.

index.html
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
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sign in with an ArcGIS account</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@3.1.3/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <style>
      #auth {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        background: white;
        padding: 1em;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
        border-radius: 4px;
      }

      #auth input {
        display: inline-block;
        border: 1px solid #999;
        font-size: 14px;
        border-radius: 4px;
        height: 28px;
        line-height: 28px;
      }
    </style>
    <div id="map"></div>
    <div id="auth">
      <a href="#" id="sign-in">Sign In</a>
    </div>
    <script>
      const apiKey = "YOUR_API_KEY";

      const clientID = "YOUR_CLIENT_ID";
      let accessToken;
      const callbacks = [];
      const protocol = window.location.protocol;
      const callbackPage = protocol + "./oauth-callback.html";

      const authPane = document.getElementById("auth");
      const signInButton = document.getElementById("sign-in");

      // this function will open a window and start the oauth process
      function oauth(callback) {
        if (accessToken) {
          callback(accessToken);
        } else {
          callbacks.push(callback);
          window.open(
            "https://www.arcgis.com/sharing/oauth2/authorize?client_id=" +
              clientID +
              "&response_type=token&expiration=20160&redirect_uri=" +
              window.encodeURIComponent(callbackPage),
            "oauth",
            "height=400,width=600,menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes"
          );
        }
      }

      // this function will be called when the oauth process is complete
      window.oauthCallback = function (token) {
        L.esri.get(
          "https://www.arcgis.com/sharing/rest/portals/self",
          {
            token: token
          },
          function (error, response) {
            if (error) {
              return;
            }

            authPane.innerHTML = "<label>Hi " + response.user.username + ' your token is <input value="' + token + '"></label>';
          }
        );
      };

      signInButton.addEventListener("click", function (e) {
        oauth();
        e.preventDefault();
      });

      // make a new map and basemap
      const map = L.map("map").setView([39.36, -96.19], 4);

      L.esri.Vector.vectorBasemapLayer("ArcGIS:LightGray", {
        apikey: apiKey
      }).addTo(map);
    </script>
  </body>
</html>
oauth-callback.html
Use dark colors for code blocksCopy
                 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head></head>
<body>
  <script>
  let match;
  if (window.location.hash && (match = window.location.hash.match(/#access_token=([^&]+)/))) {
    if (window.opener && window.opener.parent) {
      window.opener.parent.oauthCallback(match[1]);
    } else {
      window.parent.oauthCallback(match[1]);
    }
    window.close();
  }
  </script>
</body>
</html>

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