Embed UI in a WebView

The non-mobile Registration solution normally uses popup windows to load social provider’s login screens. Popups do not work well on mobile devices. Instead, the UI is configured to redirect to the provider’s login screen, then on to the UI server, and finally back to the original page.

Prerequisites

How It Works

Your Android app embeds a WebView in a native layout and binds JavaScript code to your native Android code. The WebView will contain the Registration UI thereby leveraging the abilities your application to handle your registration. It is important to remember that your AndroidManifest.xml must specify the INTERNET permission for the WebView to function. You may find it easier to inject JavaScript directly from your native code by using the WebView’s addJavascriptInterface method.

Example HTML Files

Example Index Page
Example Page With All Screens Using One Flow
Example Edit Profile Page

Starting the Widget

The Registration solution handles user registration and related UI flows. Typically each flow is embedded in one host webpage. To start the flow, include the standard block of settings and then run:

janrain.capture.ui.start();

Flows are configured separately for each instance of the Registration solution, and can be customized. This example uses mobile optimized flows named webViewProfile and webViewSignIn. If you so choose, you can use the webViewDemo flow name with the markup in index-oneflow.html to have all screens on one page using one flow.

Settings

The following settings manage redirection:

Setting Description
janrain.settings.popup = false; // required The UI spawns new windows for identity provider sign-in by default, this flag forces the UI to operate in a single-window mode appropriate for operation inside a WebView.
janrain.settings.capture.redirectFlow = true; Required to configured the UI to operate in single-window mode.
janrain.settings.tokenAction = 'url'; Configures the Social Sign-in UI to redirect after authentication.
janrain.settings.type = 'embed'; Configures the Registration solution to render embedded in the host page’s DOM, as opposed to rendering in a modal popup dialog.
janrain.settings.redirectUri = location.href; // required. Configures UI to redirect back to the host page after signing a user in.
janrain.settings.capture.captureServer = 'https://yourappdomain.janraincapture.com'; Configures the base URL of your Registration server instance.
janrain.settings.tokenUrl = janrain.settings.capture.captureServer; Unused in the redirect flow, but must be set to an Engage whitelisted domain for proper operation.

Interacting with Janrain from the Android Host App

Use the WebView setWebViewClient method to take control when a new url is about to be loaded. Using the shouldOverrideUrlLoading method, inspect and detect for the janrain scheme. Whenever the method detects the janrain scheme, the format for the URL should be as follows:

janrain:eventName?arguments=URL%20ENCODED%20JSON%20ARRAY%20HERE

When the eventName is onCaptureLoginSuccess, the user has successfully logged in and you can dismiss the WebView. The argument will contain an encoded JSON array.

For a discussion of this technique see http://developer.android.com/guide/webapps/webview.html#UsingJavaScript.

Setting the Access Token

After the UI is started you can call:

janrain.capture.ui.createCaptureSession("accessToken");

Getting the Access Token

The access token is available as a string value inside the JSON array. Here is an example JSON array:

[ { "screen": "socialMobileRegistration", "transactionId": "5ndexqblahblahblah7fmma85t8morkgpl6uxlyv", "oneTime": false, "accessToken": "s27blahblahvzzj5", "status": "success", "keepMeLoggedIn": false, "flow": "webViewSignIn", "userData": { "displayName": "Alfred Neuman", "email": "aleneuman@janrain.com", "uuid": "37blaha7-8c76-4aad-a04e-b2eblahdc66b" } , "renders": false, "version": "8oIblahblahblahHPcUxwQ", "statusMessage": "signedIn", "action": "socialSignin", "ssoImplicitLogin": false, "authProfileData": {}, "authProvider": "google" } ]

Handling JavaScript Events in the Host App

The JavaScript code you write will bind to your native Android code, invoke a callback method and send it the event queue as a parameter. The event queue will contain a JSON array that requires further filtering. You will to parse the JSON Array looking for a URL element with the janrain scheme. Once found, you will inspect the URL for the event name of onCaptureLoginSuccess and decode the encoded JSON array passed as arguments. The format of the URL will be as follows:

janrain:onCaptureLoginSuccess?arguments=URL%20ENCODED%20JSON%20ARRAY%20HERE

An Example

This Eclipse project, CaptureStandardRegistrationFlow, is a working example of running the user registration in a WebView. It loads static pages hosted in the gh-pages branch of this Github repository. Each page embeds the UI and invokes a specific flow when loaded.