Captcha:Integrate Alibaba Cloud Captcha V2.0 (V3 architecture) with HarmonyOS Next

Add network permissions

In entry/src/main/module.json5, add the following permissions under requestPermissions:

{
  "module": {
    // ...other configurations
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ]
  }
}

Create the JavaScript interface class

Define a class that receives the verification token from JavaScript:

class JSInterface {
  // Method to accept the signature verification parameters
  getCaptchaVerifyParam(captchaVerifyParam: string): void {
    console.info('Received signature verification parameters:', captchaVerifyParam);
    // Here, you can send the verification parameters to the backend for signature verification.
    // Example: sendVerifyParamToServer(captchaVerifyParam);
  }
}

Build the Captcha page component

In entry/src/main/ets/pages/Index.ets, create a page that loads the HTML5 Captcha page inside a Web component and registers the JavaScript interface after the page loads:

import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';

class JSInterface {
  getCaptchaVerifyParam(captchaVerifyParam: string): void {
    console.info('Received signature verification parameters:', captchaVerifyParam);
    // Here, you can send the verification parameters to the backend for signature verification.
  }
}

@Entry
@Component
struct Index {
  private webviewController: webview.WebviewController = new webview.WebviewController();
  private jsInterface = new JSInterface();

  build() {
    Column() {
      // Load the Captcha HTML page using the Web component
      Web({ src: $rawfile('captcha.html'), controller: this.webviewController })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .mixedMode(MixedMode.All)
        .cacheMode(CacheMode.None)
        .onPageEnd((event) => {
          // Register the JavaScript interface after the page finishes loading
          try {
            this.webviewController.registerJavaScriptProxy(
              this.jsInterface,
              "testInterface",               // Must match window.testInterface in your HTML
              ["getCaptchaVerifyParam"]       // Methods exposed to JavaScript
            );
            console.info('JavaScript interface registered successfully');
          } catch (error) {
            console.error('Failed to register the JavaScript interface:', error);
          }
        })
        .width('100%')
        .height('100%')
    }
  }
}

The registerJavaScriptProxy call creates the bridge between JavaScript and ArkTS. The interface name "testInterface" must match window.testInterface in your HTML5 page.