Android Native Setup

Overview

This guide includes client-side set up information for native Android and links to server-side instructions.

The Arkose Labs Platform can be implemented into your Android app by triggering a WebView from the button used to submit the data server side in the flow you are protecting.

API Sequence

Demo

You can see the results of installing the Enforcement Challenge on Android in this screen capture recording of the example project.

Client-side Set Up for Android

  1. To support WebView in Android, ensure the request INTERNET permission is in the manifest file. You should see a line in the manifest file that looks like the following code. If it is not there, you must add it.

    1 <uses-permission android:name="android.permission.INTERNET" />
  2. To load the WebView into your application the <webview> element needs to be included into the app's activity layout, as shown in the code below:

    1 2 3 4 5 6 <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" />
  3. Define an index.html file in your Android assets folder.
    Add the code shown below, adjusted to fit your implementation. This file will be loaded into the WebView and will render the Enforcement Challenge (EC).
    On the callback event there are two functions that callback to Java to return the Arkose Labs session token and then close the WebView windows.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head>     <script src="https://client-api.arkoselabs.com/fc/api/?onload=loadChallenge" async defer></script> </head> <body>     <script type="text/javascript">         function loadChallenge() {             new ArkoseEnforcement({                 public_key: PUBLIC_KEY,                 target_html: "CAPTCHA",                 callback: function() {                     window.android.returnToken(document.getElementById("FunCaptcha-Token").value);                     window.android.setInvisible();                 }             });         }      </script>      <div id="CAPTCHA"></div> </body> </html>
  4. In the mainActivity java file add the following changes to import the files needed to:

    1. Load the html file into the WebView

    2. Connect Java to JavaScript using a JavascriptInterface.

      1 2 3 4 5 6 7 8 import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.webkit.JavascriptInterface; import android.webkit.WebChromeClient; import android.net.Uri; import android.util.Log; import android.widget.Button;
  5. Generate a button and the WebView.

    1 2 Button b1; private WebView wv1;
  6. Setup a JavascriptInterface class that can used within the WebView JavaScript. The class should contain the functions to load the html file into the WebView and to Connect Java to JavaScript.
    The examples shown below retrieve the Arkose Labs token and return it to the out log, and then hide the the WebView after events happen on the JavaScript side.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 final class arkoseJavaScriptInterface {           @JavascriptInterface         public void returnToken(String fctoken) {             Log.w("Arkose", fctoken );         }           @JavascriptInterface         public void setInvisible(){             runOnUiThread(new Runnable() {                 @Override                 public void run() {                     wv1.setVisibility(View.INVISIBLE);                 }             });         }       }
  7. Add the button and the WebView into your OnCreate method or equivalent.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     b1 = (Button) findViewById(R.id.button);     wv1 = (WebView) findViewById(R.id.webView);     wv1.setWebChromeClient(new WebChromeClient());     wv1.addJavascriptInterface(new arkoseJavaScriptInterface(), "android");     wv1.setVisibility(View.INVISIBLE);     b1.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View v) {             wv1.setVisibility(View.VISIBLE);             wv1.getSettings().setLoadsImagesAutomatically(true);             wv1.getSettings().setJavaScriptEnabled(true);             wv1.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);             String url = Uri.parse("file:///android_asset/index.html").toString();             wv1.loadUrl(url);         }     }); }

The code example above sets up the button and an onClick event. When the button is clicked, the index.html file is loaded into the hidden WebView which is then made visible. The getSettings() function is used to allow images to be loaded automatically in the WebView and to allow JavaScript to run. Once the challenge loads and is solved, the JavaScript callback event occurs which passes the Arkose Labs token back to Java and closes the WebView window. The token is then passed server side to be validated using the Arkose Labs server-side verification API.

Server-Side Instructions

When you have successfully set up your client-side set up you must go on to the server-side instructions.