How to render private feature layers with app auth in JS SDK

JeremyJarrell · ‎06-27-2019

Given that I am on 4.x of the JS SDK, I am struggling to find some example code of how I would authenticate requests made to the ArcGIS hosted layers that I have made private (but is shared within my organization).

I am able to find several examples of enabling users to enter username and passwords, and the default behavior of a "private" feature layer is to pop a dialog box asking for user credentials - but this is not the desired workflow for my application.

I've found mention of a few approaches, but have found next to nothing in code examples for the JS 4.x SDK in how to pull this off (I even have the IdentityManager documentation up, but haven't been able to find example code leveraging it with app auth). Here's what I've found, with the first being preferred:

- Prior to loading the private feature layers, the JS 4.x SDK is used to query the ArcGIS server, and thanks to the whitelisted referrers, it is given some sort of authorization token that allows future private feature layer requests to succeed.

- Prior to loading the private feature layers, the JS 4.x SDK queries our backend server that leverages .NET Core, which makes a request to the proxy application on the ArcGIS servers, and then returns some sort of authorization token to the client, which allows future private feature layer requests to succeed

The second approach is obviously more difficult to implement, because not only will it likely be a longer request to complete as far as the client is concerned, the code that Esri provides does not work on .NET Core, so I'd be working off of some branched code that fellow Esri customers have provided on Github (not ideal).

ReneRubalcava · ‎06-27-2019

To authenticate against hosted layers, you would use oauth so the user can log in via their org account.

This sample shows this workflow used to view org items, but it's the same process for other items and services.

https://developers.arcgis.com/javascript/latest/sample-code/identity-oauth-basic/index.html

In your case, the important part would be setting up the OAuth information and register it with the identity manager., before loading the map. Once you do that, any requests that require authentication will go through the IdentityManager.

var info = new OAuthInfo({
  // Swap this ID out with registered application ID
  appId: "YOURAPPID",
  // 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",
  popup: false
});

esriId.registerOAuthInfos([info]);‍‍‍‍‍‍‍‍‍‍‍

Here is a devlabs that also covers this topic.

https://developers.arcgis.com/labs/javascript/access-services-with-oauth-2/

You most likely want named user login - https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/signing-in-arc...

Here is some doc on authentication patterns if you want to dig in for more details.

https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/#authenticatio...

If you're interested to see how this works in an example application, you can look at the authentication code used in the Nearby Places example JavaScript application.

https://github.com/Esri/nearby-javascript/blob/master/src/data/oauth.ts