This sample shows you how to use inline web flow, as opposed to using a pop-up window that presents a login user interface. With inline web flow there is no popup window involved. It allows users to login to ArcGIS using OAuth 2.0 functionality built directly into the IdentityManager.
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 IdentityManager 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. After this is set, pass this OAuthInfo object to the IdentityManager's registerOauthInfos method and the IdentityManager takes care of the rest.
Additional snippets are provided below which show how to configure an application to use a popup window to sign in.
There are four modules to focus on in this sample. These are:
1
2
3
4
5
6
7
8
9
10
11
12
const info = new OAuthInfo({
// Swap this ID out with registered application IDappId: "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_inline",flowType: "auto", // default that uses two-step flowpopup: false});
esriId.registerOAuthInfos([info]);
Use the snippet below if needing to sign in via a popup window.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
const infoCode = new OAuthInfo({
// Swap this ID out with registered application IDappId: "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_inline",flowType: "authorization-code", // set to this if using a popup for signing in.popup: true,
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.});
Next, check if the user is already signed in and able to access the resource.
Once the user signs in, query the Portal for items.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
functiondisplayItems() {
const portal = new Portal();
// Setting authMode to immediate signs the user in once loaded portal.authMode = "immediate";
// Once loaded, user is signed in portal.load().then(() => {
// Create query parameters for the portal searchconst queryParams = new PortalQueryParams({
query: "owner:" + portal.user.username,
sortField: "numViews",
sortOrder: "desc",
num: 20 });
userIdElement.innerHTML = portal.user.username;
anonPanelElement.style.display = "none";
personalPanelElement.style.display = "block";
// Query the items based on the queryParams created from portal above portal.queryItems(queryParams).then(createGallery);
});
}
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.