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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.2/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-window', '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://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 = new 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