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
<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.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.2.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/light-gray", {
apikey: apiKey
}).addTo(map);
</script>
</body>
</html>oauth-callback.html
<!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>