Allow a user with an ArcGIS account to sign in with OAuth 2.0 and display a map.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Esri Leaflet sample: Sign in with an ArcGIS account</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #f3f3f3;
z-index: 3;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<!-- ArcGIS REST JS used for user authentication. -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<!-- Load Leaflet from CDN -->
<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.10/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-vector@4.2.5/dist/esri-leaflet-vector.js"></script>
</head>
<body>
<div id="map"></div>
<script type="module">
/* Use for user authentication */
const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
redirectUri: "YOUR_REDIRECT_URL", // The redirect URL registered in your OAuth credentials
portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
})
const accessToken = session.token;
const map = L.map("map", { minZoom: 2 }).setView([34.02, -118.805], 13);
const basemapEnum = "arcgis/navigation";
L.esri.Vector.vectorBasemapLayer(basemapEnum, { token: accessToken }).addTo(map);
</script>
</body>
</html>callback.html
<!DOCTYPE html>
<head>
<title>User authentication OAuth2.0 callback (ArcGIS REST JS)</title>
</head>
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<body>
<script type="module">
/* Use for user authentication */
arcgisRest.ArcGISIdentityManager.completeOAuth2({
clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
redirectUri: "YOUR_REDIRECT_URL", // The redirect URL registered in your OAuth credentials
portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
})
</script>
</body>
</html>