topic Re: OAuth 2 in Web AppBuilder app in ArcGIS Web AppBuilder Questions

OAuth 2 in Web AppBuilder app

sitsit — Thu, 09 Nov 2017 07:33:49 GMT

Hi everyone,

I am trying to integrate the OAuth functionality in a simple app developed with the Web AppBuilder embedded with Portal and then deployed.

I have obtained the AppID and I have looked into the OAuth 2 basic sample, but I don't understand how to integrate it in my app.

I suppose that I have to modify the index.html, but I don't know how.

Can anyone point me in the right direction?

Thanks,

Marco

Re: OAuth 2 in Web AppBuilder app

RobertScheitlin__GISP — Thu, 09 Nov 2017 14:27:58 GMT

Marco,

I am trying to integrate the OAuth functionality in a simple app developed with the Web AppBuilder embedded with Portal and then deployed

I don't understand this statement at all What do you mean "embedded with Portal and then deployed"?

Re: OAuth 2 in Web AppBuilder app

KenBuja — Fri, 10 Dec 2021 22:13:21 GMT

I have a widget using OAuth2 functionality. In the widget's postcreate function, I call this function

  _logon() {
    var theAppId, thePopupCallbackUrl;

    var location = this._appInfo.find(x => x.location === window.location.hostname);
    if (location !== undefined) {
      theAppId = location.appID;
      thePopupCallbackUrl = location.popupCallbackUrl;
    } else {
      new Message({
        titleLabel: 'Error',
        message: 'This site will not allow ArcGIS.com login'
      });
      this._logoff();
      return;
    }

    var info = new ArcGISOAuthInfo({
      appId: theAppId,
      popupCallbackUrl: thePopupCallbackUrl,
      popup: true,
      portalUrl: this.config.agol.portalUrl
    });
    esriId.registerOAuthInfos([info]);
    esriId.getCredential(info.portalUrl, {
      oAuthPopupConfirmation: true
    }).then(lang.hitch(this, function () {
      new arcgisPortal.Portal(this.config.agol.portalUrl).signIn().then(lang.hitch(this, function (portalUser) {
        var portal = portalUser.portal;
        var queryParams = {
          num: 100,
          q: 'owner: ' + this._ownerName + ' AND type: Feature Service'
        };
        portal.queryItems(queryParams).then(lang.hitch(this, function (result) {
          if (result.total > 0) {
            if (array.some(result.results, lang.hitch(this, function (item) {
              this._SPGridUrl = item.url;
              return this._SPGridUrl.indexOf(this._baseGridLayerName) > -1;  //
            }))) {
              this._prepareEditor();
            } else {
              this._SPGridUrl = null;
              new Message({
                titleLabel: 'Logging out',
                message: 'The grid was not found in your account!'
              });
            }
          } else {
            this._SPGridUrl = null;
            new Message({
              titleLabel: 'Logging out',
              message: 'The grid is not available to edit!'
            });
          }
        }));
      }
      )).otherwise(
        function (error) {
          new Message({
            titleLabel: 'Error occurred while signing in',
            message: error
          });
        }
        );
    }))
      .otherwise(lang.hitch(this, this._promiseRejected));
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When the user starts the widget, after they successfully log in, the code searches for a feature layer (which begins with the string indicated in the variable this._baseGridLayerName) in their AGOL contents and added to their map (in the _prepareEditor function). The variable this._appInfo contains the AppID and the popup callback URL. In my case, I have several of these defined, since I have versions running on my laptop, a development server, and the production server.

    this._appInfo = [
      {
        "location": "productionURL",
        "appID": "xxxxxxxxxxxxxxxxx",
        "popupCallbackUrl": "productionURL/oauth-callback.html"
      },
      {
        "location": "developmentURL",
        "appID": "xxxxxxxxxxxxxxxxx",
        "popupCallbackUrl": "developmentURL/oauth-callback.html"
      },
      {
        "location": "laptopURL",
        "appID": "xxxxxxxxxxxxxxxxx",
        "popupCallbackUrl": "./oauth-callback.html"
      }
    ]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: OAuth 2 in Web AppBuilder app

sitsit — Fri, 10 Nov 2017 13:49:47 GMT

Hi Robert,

I wanted to say that I developed the app using the version of Web AppBuilder that is embedded in Portal, downloaded it, hosted it in IIS and then registered it in Portal.

Re: OAuth 2 in Web AppBuilder app

sitsit — Fri, 10 Nov 2017 13:55:38 GMT

Thank you very much, Ken. I will look into your code and let you know if I can manage to replicate it.

I would have preferred a solution without the use of a widget, but I suppose that it will work just fine.

Re: OAuth 2 in Web AppBuilder app

RobertScheitlin__GISP — Fri, 10 Nov 2017 14:26:23 GMT

Sit Sit,

I have to say that I have never come across someone wanting to do what you are doing. Normally if you are going to host the app on your own server that you would start building the app using WAB Developer and then download and deploy. Downloading from Portal and then deploying means that all your code is minified. Is your web map and data that the app is using shared publicly?

Re: OAuth 2 in Web AppBuilder app

sitsit — Fri, 10 Nov 2017 15:46:35 GMT

Robert, we have to host the app on our server because we want to call it from another app using a more user friendy URL. I thought that using the Web AppBuilder embedded in Portal was the normal workflow, but I understand that having to do with minified code is a pain.

I will follow your suggestion and restart from the scratches with Web AppBuilder for developer.

Is your web map and data that the app is using shared publicly?

No, all of our data is hosted in ArcGIS server using secured services.

When a user tries to view our app, he is redirected to the Portal standard login page, with all the links (home, gallery, map, scene, group) in the high part of the page and the OAuth form in the middle. I would like to show him only the OAuth form, so that he doesn't get confused.

Re: OAuth 2 in Web AppBuilder app

rgomes — Fri, 10 Nov 2017 17:50:54 GMT

Did you have tried to use the Proxy resource available at this link?

GitHub - EsriCanada/proxy-oauth: Modified proxy to support AGOL app logins.

I develop one application using this proxy and works just like you need with 'WAB'. Need some configurations but works fine in my case.

Re: OAuth 2 in Web AppBuilder app

sitsit — Mon, 13 Nov 2017 11:03:26 GMT

Hi Rafael, thanks for the suggestion. I am working on it, but it keeps redirecting me to the normal Portal authentication page. I suppose that I am missing something in the proxy configuration... Can you please give me some directions?

Re: OAuth 2 in Web AppBuilder app

rgomes — Mon, 13 Nov 2017 13:16:07 GMT

Do you register the application with portal and get the APPID and set inside config.json?
Important to set de security parameters with portal to allow access origin from the url used by the deployed application.

How was this parameters inside your config.json? (see the screenshot).

Re: OAuth 2 in Web AppBuilder app

sitsit — Mon, 13 Nov 2017 14:16:52 GMT

Yes, I have got it.

I will list all of the changes that I made to the files:

- In the app config.json:

"portalUrl": "https://myorganizationsite/arcgis",

"appId": "111111111111111",

"httpProxy": {

"useProxy": true,

"alwaysUseProxy": false,

"url": "",

"rules": [

        {
            "urlPrefix": "https://myorganizationsite/arcgis/sharing",
            "proxyUrl": "https://myorganizationsite/proxy-oauth/proxy.ashx"
         },
         {
            "urlPrefix": "https://myorganizationsite/arcgis/rest",
            "proxyUrl": "https://myorganizationsite/proxy-oauth/proxy.ashx"
         }
   ]

}

(I followed this guide: Setting up a proxy with Web AppBuilder Developer Edition | Support Services Blog

I also tried with

"alwaysUseProxy": true,

"url": "https://myorganizationsite/proxy-oauth/proxy.ashx",

"rules" : []

without luck.)

- in the proxy Web.config:

in the proxy proxy.config:

Re: OAuth 2 in Web AppBuilder app

sitsit — Mon, 13 Nov 2017 14:59:23 GMT

Anyway I think that I missed something, because these parameters should grant me direct access to the app, avoiding the login prompt... But it pops-up anyway.

Re: OAuth 2 in Web AppBuilder app

rgomes — Mon, 13 Nov 2017 15:31:16 GMT

I have one example making app login with AGOL and this proxy-oauth. I just change the proxy.ashx and the Index.html for the application to request the TOKEn before load the application (inside the <script> tag for index.html).

Add the variables to web.config for the proxy configuration with username, password, clientid and clientsecret and make this changes like descrived:

<add key="user" value="loginname"/>
<add key="pass" value="password"/>
<add key="clientid" value="1111111111"/>
<add key="clientsecret" value="2222222222222222222"/>

Change the function ProcessNormalRequest (inside proxy.ashx) to add one validation just like below (before make the URL request ~line 232):

if (uri.Contains("oauth2/token"))
{
// Get the AppSettings section.
NameValueCollection appSettings = ConfigurationManager.AppSettings;
string appSecret = "";
string user = "";
string pass = "";
string clientid = "";
string clientsecret = "";
for (int i = 0; i < appSettings.Count; i++)
{
System.Diagnostics.Debug.WriteLine(appSettings.GetKey(i) + "," + appSettings);
//if (appID == appSettings.GetKey(i))
//{
// appSecret = appSettings;
//break;
//}
if ("user" == appSettings.GetKey(i))
{
user = appSettings;
}
if ("pass" == appSettings.GetKey(i))
{
pass = appSettings;
}
if ("clientid" == appSettings.GetKey(i))
{
clientid = appSettings;
}
if ("clientsecret" == appSettings.GetKey(i))
{
clientsecret = appSettings;
}
}
uri += "&username="+ user + "&password="+ pass + "&client_id=" + clientid + "&client_secret=" + clientsecret + "&grant_type=client_credentials";
}

and in the index.html of the main application, insert one script just like below:

<script>
/*******************************
* This is the function you can modify to customize the loading page
* This function will be invoked when one resource is loaded.
********************************/
// var progress;
// function loadingCallback(url, i, count) {
// var loading = document.getElementById('main-loading-bar');
// loading.setAttribute('title', url);
// if(!progress){
// progress = document.createElement('div');
// progress.setAttribute('class', 'loading-progress');
// loading.appendChild(progress);
// }
// progress.style.width = (((i - 1)/count) * 100) + '%';
// }
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://yourserver/proxyoauth/proxy.ashx?https://www.arcgis.com/sharing/rest/oauth2/token?expiration=1440&f=json', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
// do something to response
console.log(this.responseText);
testeTopken = this.responseText;
//expiraUTCformat = Date.now() + (testeTopken.substr(testeTopken.indexOf(',"expires_in":')+14, 5)*1000);
expiraUTCformat = Date.now() + 86400000);
testeEsriJSAPI1 = testeTopken.replace('{"access_token":','{"/":{"https://yourportalserver":{"expires":'+expiraUTCformat+',"ssl":true,"token":');
testeEsriJSAPI1 = testeEsriJSAPI1.substr(0, testeEsriJSAPI1.indexOf(',"expires_in":'));
testeEsriJSAPI1 = testeEsriJSAPI1 + ',"userId":"username"}}}';
localStorage.setItem('esriJSAPIOAuth', testeEsriJSAPI1);
};
xhr.send();
</script>

Hope this help you.

Re: OAuth 2 in Web AppBuilder app

sitsit — Tue, 14 Nov 2017 10:17:53 GMT

Nothing to do: it keeps redirecting me to the same page. Probably I am missing something somewhere...

But thank you anyway, Rafael: you have been really kind!

Re: OAuth 2 in Web AppBuilder app

TheKenerson — Thu, 17 Oct 2019 15:39:37 GMT

Sit Sit,

Please let me know if you were able to figure this out. I also have a WAB App that accesses secure services and I would like to use the OAuth Named User Login Popup instead of the AGOL Username and Password.

Thanks,

Scott