Android integration with the V2 architecture - - Alibaba Cloud Documentation Center

You can use the WebView component in your app to integrate with the mobile HTML5 version of Alibaba Cloud Captcha 2.0. This lets you implement human-machine verification in your app using hybrid mobile application (Hybrid App) technology. This topic describes how to integrate Captcha 2.0 into an Android app.

Background information

The mobile HTML5 version of Captcha 2.0 provides fast iterations and strong compatibility. Integrating the Captcha 2.0 service this way eliminates compatibility issues caused by dependencies and references in native app components. The fast iterations of the mobile HTML5 Captcha 2.0 also help your app more effectively handle scenarios that involve sophisticated attacks.

Integration process

To integrate the HTML5 version of Captcha 2.0 into an Android app, follow these steps:

HTML5 page client: Integrate Captcha 2.0 on the client side of your HTML5 business page.
Backend for the HTML5 page: Integrate the Captcha 2.0 software development kit (SDK) into the backend. Then, call the VerifyIntelligentCaptcha operation to initiate Captcha verification.
Android app: Use the WebView component to load the business page that requires Captcha 2.0 integration.

If you encounter any issues during the integration, submit a ticket to contact us.

Prerequisites

You have activated Captcha 2.0 service and created a verification scenario with Client Type set to App(Webview+H5).
You are using Android 7.0 or later.

Step 1: Integrate Alibaba Cloud Captcha 2.0 on the HTML5 business page client

In the client-side code of your HTML5 business page, integrate the client-side integration code provided by Captcha 2.0. For more information, see Web and H5 client integration.

Adjust the client-side integration code based on the environment where the business result is verified.

If the business result is verified in the Android app, adjust the code as follows:

In the callback function for business requests, add the corresponding JavaScript function to return the verification result to the custom Java interface testJsInterface from Step 5 and Step 6. After the Java interface receives the verification result, you can perform different business operations in the Android app.

// Callback function for business requests that require Captcha verification.
async function captchaVerifyCallback(captchaVerifyParam) {
  // 1. Send a business request to the backend to obtain the Captcha verification result and the business result.
  const result = await xxxx('http://your_business_request_address', {
      captchaVerifyParam: captchaVerifyParam, // The Captcha parameter.
      yourBizParam... // Your business parameters...
  });

  // 2. Construct the standard return parameter.
  const verifyResult = {
    captchaResult: result.captchaVerifyResult, // Specifies whether the Captcha verification is passed. This parameter is a boolean and is required.
    bizResult: get_your_business_verification_result_from_result, // Specifies whether the business verification is passed. This parameter is a boolean and is optional. If no business result is verified, you can leave bizResult empty.
  };
  // Return the verification result to the custom Java interface.
  window.testInterface && window.testInterface.getVerifyResult(JSON.stringify(verifyResult));
  return verifyResult;
}

Set the callback function for the business request verification result on the HTML5 page to an empty function. This moves the business operations from the HTML5 page to the Android app.
```
// Callback function for the business request verification result.
function onBizResultCallback(bizResult) {
  // Set to an empty function.
}
```

If the business result is verified on the HTML5 page, no code adjustment is needed.
If the business result must be verified on both the HTML5 page and in the Android app, adjust the code as follows. This allows the same integration code to be used on both the HTML5 page and in the Android app without interference between the verification logic.
1. In the callback function for business requests, add the corresponding JavaScript function. For more information, see Add a JavaScript function.
2. Modify the callback function for the business request verification result on the HTML5 page to check if the verification environment is an HTML5 page. If it is, add the business logic for the HTML5 page.
```
// Callback function for the business request verification result.
function onBizResultCallback(bizResult) {
  // Check if the environment is an Android app. If the verification environment does not have a custom JavaScript function, the environment is an HTML5 page.
  // You can also use a custom condition to distinguish between the two environments.
  if (!window.testInterface || !window.testInterface.getSlideData) {
      // Your business logic for the HTML5 page.
  }
}
```

Step 2: Integrate Alibaba Cloud Captcha 2.0 on the backend for the HTML5 page

On the backend of your HTML5 business page, integrate the server-side SDK provided by Captcha 2.0. Then, call the VerifyIntelligentCaptcha operation to initiate Captcha verification. For more information, see Server-side integration.

Important

After you complete the server-side integration, make sure that the client and server are successfully integrated with Captcha 2.0. For more information, see Step 3: Integrate Captcha.

Step 3: Enable and deploy the business page in the Android app

In the Activity.java file of your Android app project, import the dependency libraries for the WebView component.

import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;
// Or
// import android.webkit.*;

In the AndroidManifest.xml configuration file, set the permissions for web page loading.

Note

If other HTTP resources are called, add the corresponding configurations.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<application
  ...
  android:usesCleartextTraffic="true"
  ...
  >

In the activity_main.xml layout file, add the WebView component.

<WebView android:id="@+id/webview"
            android:layout_height="match_parent"
            android:layout_width="match_parent" />

In the MainActivity.java file, load the HTML5 business page.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        // Page layout
        WebView webview = findViewById(R.id.webview);
        // WebView settings
        WebSettings webSettings = webview.getSettings();
        // Optional. Enable Chrome debugging.
        WebView.setWebContentsDebuggingEnabled(true);
        // Adapt the content to the screen size.
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        // Disable cache loading. This ensures that the latest version of Alibaba Cloud Captcha 2.0 can be quickly retrieved to defend against attacks.
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        // Allow the WebView component to load JavaScript.
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        
        // Use the WebView component to load the page instead of the default browser.
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) { 
                view.loadUrl(url);
                return true;
            }
        });
        // Load the business page.
        webview.loadUrl("http://x.x.x.x/demo/");
    }
}

In the MainActivity.java file, add the custom Java interface testJsInterface and define the getVerifyResult method to retrieve the verification result.

import android.webkit.JavascriptInterface;

public class testJsInterface {
    @JavascriptInterface
    public void getVerifyResult(String verifyResult) {
        // After you obtain the verification result, you can perform different business operations.
        System.out.println(verifyResult);
    }
}

In the initView() method of MainActivity.java, bind the custom Java interface to the JavaScript function.

// Create a bridge for JavaScript to call the Java interface.
webview.addJavascriptInterface(new testJsInterface(), "testInterface");

After you complete these configurations, your Android app is integrated with Captcha 2.0. You can then use Captcha in your Android app to test the verification. If the Captcha works as expected, the integration is successful.