ArcGIS Online OAuth

Allow ArcGIS Online users to sign in with OAuth 2.0 to access their own information, private resources and premium services. Esri's Terms of Use require that appropriate attribution be displayed.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ArcGIS Online OAuth</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </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>
  var clientID = 'uoiMRafhECiH5uNE';
  var accessToken;
  var callbacks = [];
  var protocol = window.location.protocol;
  var callbackPage = protocol + '//esri.github.io/esri-leaflet/examples/oauth/callback.html';

  var authPane = document.getElementById('auth');
  var 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
  var map = L.map('map').setView([39.36, -96.19], 4);

  L.esri.Vector.vectorBasemapLayer('ArcGIS:LightGray', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);
</script>

</body>
</html>
Edit this sample on GitHub
Terms