Package detail

Using Chrome Custom Tabs on Android and SFSafariViewController on iOS to achieve SSO Auth redirection to the application.

• This project is a fork of Advanced WebView Project

Here is a video showing off Chrome CustomTabs in NativeScript.

Android

CustomTabs

iOS

SFSafariViewController

Why use this? Because Perf Matters

Android Comparison

DemowhateverYouLike

Android	iOS

Installation

To install execute

tns plugin add nativescript-ssoauth

Example

TypeScript

Initiate the service before the app starts e.g app.ts, main.ts

import { init } from 'nativescript-ssoauth';
init();

import { SSOAuthOpenUrl, SSOAuthOptions } from 'nativescript-ssoauth';

public whateverYouLike() {

    let opts: SSOAuthOptions = {
        url: 'https://login.de?redirectionUri=com.demoapp://',
        toolbarColor: '#ff4081',
        toolbarControlsColor: '#333', // iOS only
        showTitle: false, // Android only
        onManualClose: closed => {
            console.log(`Manually closed: ${closed}`);
        },
        successCompletionHandler: url => {
            console.log(`Successful URL return: ${url}`);
        }
    };

    SSOAuthOpenUrl(opts);
}

How to use:

iOS

1. Add your application CFBundleURLSchemes name.

   Info.plist

    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>com.demoapp</string>
        </array>
        <key>CFBundleURLName</key>
        <string>com.demoapp</string>
        <key>CFBundleTypeRole</key>
        <string>Viewer</string>
      </dict>
    </array>

2. Create CustomAppDelegate class. Override applicationOpenURLOptions method to catch redirectionUrl and call SSOAuthOpenUrlPostNotification(redirectionUrl);

   custom-app-delegate-ios.ts

    import { SSOAuthOpenUrlPostNotification } from 'nativescript-ssoauth';
   
    export class CustomAppDelegate extends UIResponder implements UIApplicationDelegate {
        public static ObjCProtocols: { prototype: UIApplicationDelegate }[] = [UIApplicationDelegate]; // tslint:disable-line:variable-name
   
        public applicationOpenURLOptions(
            app: UIApplication,
            url: NSURL,
            options: any
        ): boolean {
            const lastArgument = arguments[arguments.length - 1];
            const previousResult = lastArgument !== options ? lastArgument : undefined;
   
            if (!previousResult) {
                SSOAuthOpenUrlPostNotification(url);
            }
   
            return true;
        }
    }

   app.ts

    import { ios } from 'tns-core-modules/application';
    import { isIOS } from 'tns-core-modules/platform';
   
    if (isIOS) {
        const { CustomAppDelegate } = require('./custom-app-delegate-ios'); // tslint:disable-line
        ios.delegate = CustomAppDelegate;
    }

Android

1. To listen for application redirection in Android. Specify your schema name by adding intent-filter (shown in the example)

   AndroidManifest.xml

    <activity android:name="com.ActivityName">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="com.demoapp" />
    </intent-filter>
    </activity>

2. Extend Android activity (example: demo/app/activity-extend-android.ts) and onCreate pass intent by calling SSOAuthOpenUrlBroadcastRedirectionURL(this.intent);

   activity-extend-android.ts

    import {setActivityCallbacks, AndroidActivityCallbacks} from "tns-core-modules/ui/frame";
    import { SSOAuthOpenUrlBroadcastRedirectionURL } from 'nativescript-ssoauth';
   
    @JavaProxy("com.tns.NativeScriptActivity")
    class Activity extends android.support.v7.app.AppCompatActivity {
        public isNativeScriptActivity;
   
    private _callbacks: AndroidActivityCallbacks;
   
    public onCreate(savedInstanceState: android.os.Bundle): void {
        // Set the isNativeScriptActivity in onCreate (as done in the original NativeScript activity code)
        // The JS constructor might not be called because the activity is created from Android.
        this.isNativeScriptActivity = true;
        if (!this._callbacks) {
            setActivityCallbacks(this);
        }
   
        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
   
        let intent: android.content.Intent = this.getIntent();
        SSOAuthOpenUrlBroadcastRedirectionURL(intent);
        }
    }

   app.ts

    import { isAndroid } from 'tns-core-modules/platform';
   
    if (isAndroid) {
        require('./activity-extend-android')
    }

API

• SSOAuthOpenUrl(options: SSOAuthOptions) // open URL
• SSOAuthExtractAppUrl(url: string) // extract returned URL and it's parameters
• SSOAuthOpenUrlPostNotification(url: string) // iOS only - broadcast redirection URL to SSOAuth
• SSOAuthOpenUrlBroadcastRedirectionURL(intent: android.content.Intent) // Android only - broadcast intent to SSOAuth

SSOAuthOptions Properties

• url: string
• toolbarColor: string
• toolbarControlsColor: string - ** iOS only **
• showTitle: boolean - ** Android only **
• isLogout: boolean
• onManualClose: Function
• successCompletionHandler: Function

Demo App

• fork the repo
• cd into web directory (recommend: use http-server to serve files on port 8080)
• cd into the src directory
• execute npm run demo.android or npm run demo.ios (these cmds are in the package.json scripts section of the src if you're curious what is executing)