HarmonyOS Next接入阿里云验证码2.0（V3架构）

步骤一：在HTML5业务客户端集成阿里云验证码2.0

1. 在HTML5业务客户端代码中，集成验证码2.0提供的客户端接入代码。关于HTML5业务客户端集成方式，请参见Web和H5客户端V3架构接入。

2. 创建验证码HTML页面（例如：captcha.html），并在success回调函数中，添加对应的JavaScript函数，将验签参数返回给HarmonyOS原生接口。

   // 验证成功回调
   function success(captchaVerifyParam) {
       console.log('验证成功:', captchaVerifyParam);
       // 将验签参数返回给HarmonyOS原生接口
       window.testInterface && window.testInterface.getCaptchaVerifyParam(captchaVerifyParam);
   }

步骤二：在HTML5页面对应的服务端集成阿里云验证码2.0

在HTML5业务页面对应的服务端中，集成验证码2.0提供的服务端SDK后，调用VerifyIntelligentCaptcha接口发起业务验签。具体操作，请参见服务端接入。

步骤三：在HarmonyOS Next应用端开启并部署业务页面

1. 配置应用权限。

   在entry/src/main/module.json5文件中，添加网络访问权限：

   {
     "module": {
       // ...其他配置
       "requestPermissions": [
         {
           "name": "ohos.permission.INTERNET"
         },
         {
           "name": "ohos.permission.GET_NETWORK_INFO"
         }
       ]
     }
   }

2. 创建JavaScript接口类。

   在验证码页面代码中，创建JavaScript接口类用于接收验证码验签参数：

   // JavaScript接口对象
   class JSInterface {
     constructor() {
     }
     
     // 接收验证码验签参数的方法
     getCaptchaVerifyParam(captchaVerifyParam: string): void {
       console.info('收到验证码验签参数:', captchaVerifyParam);
       
       // 这里可以将验证参数发送到后端进行验签
       // 例如：sendVerifyParamToServer(captchaVerifyParam);
     }
   }

3. 创建验证码页面组件。

   在entry/src/main/ets/pages/Index.ets文件中，创建包含Web组件的验证码页面：

   import { webview } from '@kit.ArkWeb';
   import { router } from '@kit.ArkUI';
   
   // JavaScript接口对象
   class JSInterface {
     getCaptchaVerifyParam(captchaVerifyParam: string): void {
       console.info('收到验证码验签参数:', captchaVerifyParam);
       // 这里可以将验证参数发送到后端进行验签
     }
   }
   
   @Entry
   @Component
   struct Index {
     private webviewController: webview.WebviewController = new webview.WebviewController();
     private jsInterface = new JSInterface();
   
     build() {
       Column() {
         // Webview组件加载验证码页面
         Web({ src: $rawfile('captcha.html'), controller: this.webviewController })
           .javaScriptAccess(true)
           .domStorageAccess(true)
           .onlineImageAccess(true)
           .mixedMode(MixedMode.All)
           .cacheMode(CacheMode.None)
           .onPageEnd((event) => {
             // 页面加载完成后，注册JavaScript接口
             try {
               this.webviewController.registerJavaScriptProxy(
                 this.jsInterface,
                 "testInterface",
                 ["getCaptchaVerifyParam"]
               );
               console.info('JavaScript接口注册成功');
             } catch (error) {
               console.error('JavaScript接口注册失败:', error);
             }
           })
           .width('100%')
           .height('100%')
       }
     }
   }

4. 注册JavaScript接口。

   通过registerJavaScriptProxy方法注册JavaScript接口，建立JavaScript调用ArkTS方法的桥梁：

   this.webviewController.registerJavaScriptProxy(
     this.jsInterface,              // JavaScript接口对象
     "testInterface",               // 接口名称，与HTML中调用的名称一致
     ["getCaptchaVerifyParam"]      // 暴露的方法列表
   );

完成以上配置后，您的HarmonyOS Next应用已接入验证码2.0。您可以在HarmonyOS Next App中使用验证码测试验证效果。如果可以正常使用，则表示验证码接入成功。