This sample shows how to log in to ArcGIS Online or Enterprise using OAuth 2.0 authentication and the IdentityManager. The IdentityManager provides built-in functionality to support the authentication process.
All you need to do is create an OAuthInfo object and specify the application ID you received when registering your application. See After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the IdentityManager takes care of the rest.
There are four modules to focus on in this sample. These are:
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/portal/PortalQueryParams"
How it works
The first step is to create an OAuthInfo object and register it with the IdentityManager.
//Create a new OAuthInfo object.
const info = new OAuthInfo({
// Swap this ID out with an app ID registered in your ArcGIS Organization.
appId: "q244Lb8gDRgWQ8hM"
// Add the portalUrl property if using your own portal.
// portalUrl: "https://<host>:<port>/<webadaptor>",
// Set the authNamespace property 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_inline",
// Set popup to true to show the OAuth sign-in page in a separate popup window.
//popup: true
});
// Add the OAuthInfo to the IdentityManager.
esriId.registerOAuthInfos([info]);
Once the OAuthInfo is registered with IdentityManager, check if the user is already signed in and able to access the resource.
// Call the checkSignIn function to see if the user is already signed in.
checkSignIn();
// Function to check the current sign in status and query the portal if signed in.
function checkSignIn() {
esriId
.checkSignInStatus(info.portalUrl + "/sharing")
.then(() => {
// If signed in, show the username in the UI.
navigationUser.hidden = false;
signInButton.hidden = true;
const portal = new Portal({
authMode: "immediate"
});
// Check if using a portal other than ArcGIS Online.
if (info.portalUrl !== "https://www.arcgis.com") {
portal.url = info.portalUrl;
}
// Load the portal, display the name and username, then call the query items function.
portal.load().then(() => {
navigationUser.fullName = portal.user.fullName;
navigationUser.username = portal.user.username;
navLogo.description =
"Gallery of queried portal items displayed below. To sign out, click on the logged in user button.";
queryItems(portal);
});
})
.catch(() => {
// If not signed in, then show the sign in button.
signInButton.hidden = false;
navigationUser.hidden = true;
navLogo.description = "Use OAuth to log in to an ArcGIS Organization to view your items.";
});
}
If the user is not signed in and they click the Sign in button, redirect the user to a sign-in page.
The resulting credential is then used to access any secured resources.
When the user clicks the button to sign out, destroy the credentials to sign out.
This will revoke any tokens generated via OAuth.
// Function to sign in or out of the portal used by the sign in/out button click event.
function signInOrOut() {
esriId
.checkSignInStatus(info.portalUrl + "/sharing")
.then(() => {
// If already signed in, then destroy the credentials to sign out.
esriId.destroyCredentials();
window.location.reload();
})
.catch(() => {
// If the user is not signed in, generate a new credential.
esriId
.getCredential(info.portalUrl + "/sharing", {
// Set the following property to false to not show a dialog
// before the OAuth popup window is open.
//oAuthPopupConfirmation: false,
})
.then(() => {
// Once a credential is returned from the promise, check the
// sign in status to query the portal for items.
checkSignIn();
});
});
}
Once the user signs in successfully, query the Portal for items.
// Function to query for portal items.
function queryItems(portal) {
// Create query parameters for the portal search.
const queryParams = new PortalQueryParams({
query: "owner:" + portal.user.username,
sortField: "num-views",
sortOrder: "desc",
num: 20
});
// Query the items based on the queryParams created from the portal.
portal.queryItems(queryParams).then(createGallery);
}
Finally, create the UI to display a gallery of the queried items returned from the promise. The UI is built by creating a Caclite card component for each queried item that shows the item's title, type, thumbnail, and view count along with a button to open the item in a separate browser.
// Function to build the UI for the gallery to display queried portal items.
function createGallery(items) {
items.results.forEach((item) => {
// Create a card for each item and add a thumbnail, title, subtitle,
// view count value, and a button to open the item in a new window.
const card = document.createElement("calcite-card");
const thumbnail = document.createElement("img");
thumbnail.slot = "thumbnail";
thumbnail.src = item.thumbnailUrl;
const title = document.createElement("span");
title.slot = "title";
title.style = "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;";
title.innerHTML = item.title;
const type = document.createElement("span");
type.slot = "subtitle";
type.innerHTML = item.type;
const views = document.createElement("span");
views.slot = "footer-end";
views.innerHTML = "Views: " + item.numViews;
const openItemAction = document.createElement("calcite-action");
openItemAction.icon = "launch";
openItemAction.slot = "footer-end";
openItemAction.value = item;
// Add event listener to open the item details page in a new window.
openItemAction.addEventListener("click", (event) => {
window.open(event.target.value.itemPageUrl);
});
card.appendChild(thumbnail);
card.appendChild(title);
card.appendChild(type);
card.appendChild(views);
card.appendChild(openItemAction);
// Add each card to a new div with styling and add to the calcite panel.
const div = document.createElement("item");
div.style = "float: left; padding: 10px; display: inline-block;";
div.appendChild(card);
itemGallery.appendChild(div);
});
}
Please see the authentication documentation for additional detailed information about user authentication and OAuth 2.0. In addition, please refer to the ArcGIS Organization portals for more information on authentication.