Captcha:Integrate with the V3 architecture on Android

Step 1: Integrate Alibaba Cloud Captcha 2.0 into the HTML5 service client

1. In your HTML5 service client code, integrate the client-side integration code provided by Captcha 2.0. For more information, see Integrate with the V3 architecture for web and HTML5 clients.

   Note

   If your service uses the V2 architecture, see Integrate with the V2 architecture for web and HTML5 clients.

2. In the success callback function, add a JavaScript function to return the signature verification parameters to the custom Java interface testJsInterface, as described in Step 5 and Step 6. After the Java interface obtains the signature verification parameters, the Android app can send service and signature verification requests and process the verification results.

   // success callback function
   function success(captchaVerifyParam) {
     // The input parameter is captchaVerifyParam for signature verification.
     // Return the signature verification parameter to the custom Java interface.
     window.testInterface && window.testInterface.getCaptchaVerifyParam(captchaVerifyParam);
   }
   

Step 2: Integrate Alibaba Cloud Captcha 2.0 into the server for the HTML5 page

On the server for the HTML5 service page, integrate the server-side software development kit (SDK) provided by Captcha 2.0. Then, call the VerifyIntelligentCaptcha API operation to initiate signature verification for your service. For more information, see Server-side integration.

Step 3: Enable and deploy the service page on the Android app client

1. 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.*;

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

   Note

   If other HTTP resources are called, you must also 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"
     ...
     >

3. 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"
   />

4. In the MainActivity.java file, load the HTML5 service 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);
           // Make the screen responsive.
           webSettings.setUseWideViewPort(true);
           webSettings.setLoadWithOverviewMode(true);
           // Disable caching to ensure that the latest version of 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 service page.
           webview.loadUrl("http://x.x.x.x/demo/");
       }
   }

5. In the MainActivity.java file, add the custom Java interface testJsInterface and define the getCaptchaVerifyParam method to obtain the Captcha signature verification parameters.

   import android.webkit.JavascriptInterface;
   
   public class testJsInterface {
       @JavascriptInterface
       public void getCaptchaVerifyParam(String captchaVerifyParam) {
           // After you obtain the signature verification parameters, you can send service and signature verification requests and process the verification results.
           System.out.println(captchaVerifyParam);
       }
   }

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

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