Implementing app login in custom web app?

Question

I created map, web mapping application on ArcGIS Online and wanted to access map using this app (but app hosted on my server using app login). We can create web application using many default template on ArcGIS Online. we can also download source code of these JavaScript applications and can host them on own servers.

But I am not able to find any example which can guide me to modify app code to use app login.

I already know following steps:

• Register the app and get client id (app id)/client secret (app secret)
• Using POST request get access token from https://www.arcgis.com/sharing/rest/oauth2/token/
• What next? Not sure
• How to modify code in my downloaded app to access map?
• Downloaded app folder structure

enter image description here

---

@heather-zerbe-gonzago helped but I am still not successful running my map. I am using web application created by App builder and hosted it on own server. I have changed below files and using https://github.com/Esri/resource-proxy

Proxy.config enter image description here Config.json enter image description here

Getting error {"error":{"code":400,"message":"Unable to generate token","details":["Unable to generate token for this server"]}} while hitting exchangePortalTokenForServerToken method in proxy.ashx file enter image description here

---

I am able to resolve the above issue and come across another one. I am trying to access ArcGIS Online Map using web builder generated app hosted on own servers.

I am getting below error code:498 details:[] message :"Invalid Token" while app hits url https://***/arcgisdev/proxy.ashx?https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=json

• Russ Roberts: Did you checkout the doc here? developers.arcgis.com/authentication/…
• Girish: Yes, I saw the doc. I am stuck after getting a token, how received token will be used to access map? there is no sample for that. Could you please provide some sample code to access web map by using received token (developing in JavaScript API) Thanks

Answer 1

Probably the easiest way is to let a proxy handle this for you. For example, once you register your app, you can then copy and paste the clientId and secret into your proxy file. If you specify a proxy within your application, it will route the POST request via the proxy using the specified credentials from this registered app.

We actually use this in a few of our samples that require user logins to access hosted services off of AGO. Take a look at the Directions sample here, https://developers.arcgis.com/javascript/3/jssamples/widget_directions_basic.html, specifically take note of the line

 //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
 urlUtils.addProxyRule({
 urlPrefix: "route.arcgis.com",
 proxyUrl: "/sproxy/"
 });
 urlUtils.addProxyRule({
 urlPrefix: "traffic.arcgis.com",
 proxyUrl: "/sproxy/"
 });

The proxyUrl should point to a secured proxy on your web server. You can download this at https://github.com/Esri/resource-proxy. You will need to modify the proxy.config file with the credentials from your registered app. Specifically, take note of clientId and clientSecret. (README.md#proxy-configuration-settings)

• Heather Zerbe Gonzago: I forgot to mention, you can find some additional info on this. Spoke on this at this year's Dev Summit, esri.com/videos/…. Specifically take note around 50:00
• Girish: Hello Heather, Thanks, for so much useful Information, however, I am still not able to run it successfully.
• Girish: Hello Heather, Please refer Update 1 section in question for the error I am getting. I am having a feeling that I am using some wrong config values. Thanks