Using Esri OAuth with Ionic 2+

[andygup]

This is a placeholder for issues related to Esri OAuth with Ionic 2+ and the ArcGIS API for JavaScript 3.x and 4.x.

Issue: You cannot use IdentityManager with the latest versions of Ionic (3.5) and Chrome (Android 7.1.2). This issue hasn't been testing or verified on iOS. Note, don't be fooled that the functionality works with ionic serve because it won't work on Android WebView or InAppBrowser.

Known Workarounds:

• Install ng-cordova-oauth plugin plus the cordova-plugin-inappbrowser and build your own custom login functionality.
• Build a custom Cordova plugin that uses Chrome Intents.

Code Snippets:

• Use a well known redirect_uri that can be used for programmatic extraction: let location = "https://www.arcgis.com/sharing/rest/oauth2/authorize?&client_id=" + _APP_ID + "&response_type=code" + "&redirect_uri=urn:ietf:wg:oauth:2.0:oob";

• Or, use an Android Intent redirect_uri along with the partial example below: let location = "https://www.arcgis.com/sharing/rest/oauth2/authorize?&client_id=" + _APP_ID + "&response_type=code" + "&redirect_uri=my-ags-app://auth";

• Partial example for an Intent-based approach using TypeScript.

Install the InAppBrowser:

            cordova plugin add cordova-plugin-inappbrowser

Import the InAppBrowser into the TypeScript page where you are initiating the login process:

            import { InAppBrowser } from '@ionic-native/in-app-browser';

Then add it to your array of providers:

            @Component({
                selector: 'page-home',
                templateUrl: 'home.html',
                providers: [ EsriLoaderService, InAppBrowser ]
            })

Then add it to the app's constructor:

            constructor(private esriLoader: EsriLoaderService, private iab: InAppBrowser) {  }

Initiate the login and return a code. You'll need the code to get a valid token for making OAuth requests. See the ArcGIS article below that is included in the references for additional details:

            let location = "https://www.arcgis.com/sharing/rest/oauth2/authorize?&client_id=" + _APP_ID + "&response_type=code" + "&redirect_uri=my-ags-app://auth";
            inAppBrowserRef = this.iab.create(location, "_system", 'location=no');
            inAppBrowserRef.on('loadstop', function(msg){
              console.log("loadstop");
              console.log(msg);
            });
            inAppBrowserRef.on('loaderror', function(err){
              console.log('loaderror');
              console.log(err);
            });
            inAppBrowserRef.on('loadstart', function(msg){
              console.log("loadstart");
              console.log(smg);
            });

And, in MainActivity.java if you go with the Intent-based approach:

          protected void onNewIntent(Intent i) {
              super.onNewIntent(i);
              // Check that the received intent starts with redirect URI
              if (i.getData() != null && i.getData().toString().startsWith("my-ags-app://auth")) {
                  Log.d("CordovaActivity",  "CODE= " + i.getData().toString());
              }
          }

And, in AndroidManifest.xml add the following in the main <activity> section:

            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.PICK" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:host="auth" android:scheme="my-ags-app" />
            </intent-filter>

References:
Google: Modernizing OAuth Interactions in Native Apps
Esri ArcGIS: Security and Authentication using Mobile and Native User Logins