ArcGIS Online OAuth
Authenticate ArcGIS Online users with OAuth 2.0 to access user information, private resources and premium services.
<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="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></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: 10;
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 = 'FxeCTSwkrA9yqVGS';
var accessToken;
var callbacks = [];
var callbackPage = 'http://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){
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.basemapLayer('Gray').addTo(map);
</script>
</body>
</html>Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community