Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
View live sample
Description
This sample uses OAuth 2.0 to allow users to log in to the ArcGIS platform via the app. More detailed information about user logins and OAuth 2.0 can be found here.
The popup web flow is similar to the "inline" flow, however, the sign in page is within a popup window. In order to work with a popup, a popupCallbackUrl must be set. By default, this reverts to one named oauth-callback.html and resides in the same directory as the application. A sample callback has been provided and can be accessed at the JSAPI-Resources Github Repo.
Beginning with version 3.10, support for OAuth2 authentication is provided directly in the ArcGIS for JavaScript API's Identity Manager. This built-in functionality handles a lot of the fine-grained work that you would typically have to do when implementing this type of authentication.
The Identity Manager component simplifies the process of working with the token by appending it to requests and acquiring a new token when necessary. All you need to do is create an OAuthInfo object and specify the appId you received when registering your application. Additionally, you can set the popup property to true if you want to display the OAuth sign-in page in a popup window. After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the Identity Manager takes care of the rest.
var info = new OAuthInfo({
appId: "<pass in your application id here>",
popup: true
});
esriId.registerOAuthInfos([info]);
The Identity Manager also honors whether or not you choose to remain signed in via a "Keep me signed in" checkbox. This provides the option to save your credentials within local storage so as to not have to repeatedly sign in when accessing the application. If uncertain as to whether a user is already logged in, use the IdentityManager checkSignInStatus method. This method takes a given portal URL and returns the credentials of the user if they are already signed in.
To run this sample on your own web server you need to register your application on ArcGIS.com. Once the application is registered you will get an appid that you use in the sample. The ArcGIS Help has step-by-step information on how to register your app.
Code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>ArcGIS Online Items</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46compact/dijit/themes/claro/claro.css">
<style>
html, body {
font-family: Lucida Sans, Lucida Grande, Arial !important;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.esri-item-gallery .esri-item-container {
float: left;
text-align: center;
padding: 10px;
width: 204px;
display: inline-block;
}
.esri-item-gallery .esri-image {
width: 200px;
height: 133px;
border: 2px solid gray;
border-radius: 5px;
}
.esri-item-gallery .esri-null-image {
line-height: 133px;
text-align: center;
color: #999999;
}
.esri-item-gallery .esri-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.esri-item-gallery .esri-null-title {
color: #999999;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<script src="https://js.arcgis.com/3.46compact/"></script>
<script>
require([
"esri/arcgis/Portal", "esri/arcgis/OAuthInfo", "esri/IdentityManager",
"dojo/dom-style", "dojo/dom-attr", "dojo/dom", "dojo/on", "dojo/_base/array",
"dojo/domReady!"
], function (arcgisPortal, OAuthInfo, esriId,
domStyle, domAttr, dom, on, arrayUtils){
var info = new OAuthInfo({
appId: "q244Lb8gDRgWQ8hM",
// Uncomment the next line and update if using your own portal
//portalUrl: "https://<host>:<port>/arcgis"
// Uncomment the next line to prevent the user's signed in state from being shared
// with other apps on the same domain with the same authNamespace value.
//authNamespace: "portal_oauth_popup",
popup: true,
flowType: "authorization-code", // set to this if using a popup for signing in.
popupCallbackUrl: "oauth-callback.html" // page should be relative to application. Make sure it's updated to handle two-step flow, see https://github.com/Esri/jsapi-resources/blob/master/oauth/oauth-callback.html for a sample of this.
});
esriId.registerOAuthInfos([info]);
esriId.checkSignInStatus(info.portalUrl + "/sharing").then(
function (){
displayItems();
}
).otherwise(
function (){
// Anonymous view
domStyle.set("anonymousPanel", "display", "block");
domStyle.set("personalizedPanel", "display", "none");
}
);
on(dom.byId("sign-in"), "click", function (){
console.log("click", arguments);
// user will be shown the OAuth Sign In page
esriId.getCredential(info.portalUrl + "/sharing", {
oAuthPopupConfirmation: false
}
).then(function (){
displayItems();
});
});
on(dom.byId("sign-out"), "click", function (){
esriId.destroyCredentials();
window.location.reload();
});
function displayItems(){
new arcgisPortal.Portal(info.portalUrl).signIn().then(
function (portalUser){
console.log("Signed in to the portal: ", portalUser);
domAttr.set("userId", "innerHTML", portalUser.fullName);
domStyle.set("anonymousPanel", "display", "none");
domStyle.set("personalizedPanel", "display", "block");
queryPortal(portalUser);
}
).otherwise(
function (error){
console.log("Error occurred while signing in: ", error);
}
);
}
function queryPortal(portalUser){
var portal = portalUser.portal;
//See list of valid item types here: https://developers.arcgis.com/rest/users-groups-and-items/items-and-item-types.htm
//See search reference here: https://developers.arcgis.com/rest/users-groups-and-items/search-reference.htm
var queryParams = {
q: "owner:" + portalUser.username,
sortField: "numViews",
sortOrder: "desc",
num: 20
};
portal.queryItems(queryParams).then(createGallery);
}
function createGallery(items){
var htmlFragment = "";
arrayUtils.forEach(items.results, function (item){
htmlFragment += (
"<div class=\"esri-item-container\">" +
(
item.thumbnailUrl ?
"<div class=\"esri-image\" style=\"background-image:url(" + item.thumbnailUrl + ");\"></div>" :
"<div class=\"esri-image esri-null-image\">Thumbnail not available</div>"
) +
(
item.title ?
"<div class=\"esri-title\">" + (item.title || "") + "</div>" :
"<div class=\"esri-title esri-null-title\">Title not available</div>"
) +
"</div>"
);
});
dom.byId("itemGallery").innerHTML = htmlFragment;
}
});
</script>
</head>
<body class="claro">
<div id="anonymousPanel" style="display: none; padding: 5px; text-align: center;">
<span id="sign-in" class="action">Sign In</span> and view your ArcGIS Online items.
</div>
<div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;">
Welcome <span id="userId" style="font-weight: bold;"></span>
-
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
</body>
</html>