验证码 Harmony 接入

前提条件
客户端接入前，需完成新建验证，并在验证列表获取所需的 CaptchaAppId 以及 AppSecretKey。步骤如下：
1. 登录 验证码控制台，左侧导航栏选择图形验证 > 验证管理，进入验证管理页面。
2. 单击新建验证，根据业务场景需求，设置验证名称、客户端类型、验证方式等参数。
3. 单击确定，完成新建验证，即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。
接入步骤
注意：
App 客户端（Android/iOS/Harmony）当前仅支持通过 Webview 引入 H5页面进行接入。
Harmony 接入主要流程
1. 在 Harmony 端利用 WebView 引入 H5页面。H5 页面接入验证码，详情请参见  Web 客户端接入。
2. 在 H5 页面中，通过调用验证码 JS，渲染验证页面，并将 JS 返回的参数值传到 Harmony App 业务端。
3. Harmony App 业务端把相关参数（票据 ticket、随机数等）传入业务侧后端服务进行票据验证，详情请参见 接入票据校验(Web及App)。
4. 体验完整接入示例 Harmony Next Demo。
Harmony 接入详细步骤
1. 在项目的工程中，新建一个 View 视图。导入 WebView 组件所需的包并进行初始化。
// src/main/ets/view/Login.ets
import router from '@ohos.router';
import web_webview from '@ohos.web.webview';
import { CaptchaCbParams,CaptchaRetData } from '../viewmodel/ParamsItem';
import Logger from '../common/utils/Logger';
import JSBridge from '../common/utils/JsBridge';
﻿
@Component
export struct LoginComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  aboutToAppear() {
    // 配置web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }
  ports: web_webview.WebMessagePort[] = [];
  // 初始化JS事件交互
  private jsBridge: JSBridge = new JSBridge(this.controller, this);
﻿
  // 在build方法之外定义关闭WebView的方法
  closeWebView(param: string) {
    Logger.info("接收的回调数据", param)
    const jsonObj: CaptchaCbParams = JSON.parse(param)
    const retObj: CaptchaRetData = JSON.parse(jsonObj.data)
    if (retObj.ret == 0) {
      // 验证成功有票据
      router.pushUrl({ url: CommonConstants.SUCCESS_PAGE_URL, params: retObj })
    } else {
      // 验证失败或者主动关闭验证码无票据
      Logger.info("主动关闭验证码")
    }
    this.showWebView = false;
  }
﻿
  build() {
    Stack() {
      Web({
        src: $rawfile('captcha.html'), // 本地HTML文件路径
        controller: this.controller
      })
        .domStorageAccess(true)
        .javaScriptAccess(true)
        .javaScriptProxy(this.jsBridge.javaScriptProxy)
        .onPageBegin(() => {
          this.jsBridge.initJsBridge();
        })
        .width('360vp')
        .height('360vp')
        .backgroundColor(Color.Transparent)
        .alignSelf(ItemAlign.Center)
    }
﻿
  }
}
2. 添加验证码 HTML 页面文件，放置于src/main/resources/rawfile/captcha.html路径中，webview 需要从这个路径加载文件。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: transparent;
      margin: 0;
      padding: 0;
    }
  </style>
  <title>Tencent Captcha</title>
  <script src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>
</head>
<body>
  <script type="text/javascript">
    function getAppIdParam() {
        let params = {};
        let queryString = window.location.search.slice(1); // 获取URL参数字符串
        if (queryString) {
            queryString = queryString.split('&'); // 分割成参数数组
            queryString.forEach(item => {
                let arr = item.split('=');  // 分割每个参数键值对
                params[arr[0]] = decodeURIComponent(arr[1]);  // decodeURIComponent用于解码URI
            });
        }
        return params['appid'] || null; // 返回'appid'参数，如果不存在则返回null
    }
        function globalCallback(res) {
          // 与鸿蒙webview通信
          if (window.ohosCallNative && window.ohosCallNative.callNative) {
            window.ohosCallNative.callNative('postMessage', JSON.stringify(res));
          }
        }
        // captcha js error callback
        function errorCallback() {
          globalCallback({
            ret: -1,
            randstr: '@' + Math.random().toString(36).substr(2),
            ticket: '',
            errorCode: 1001,
            errorMessage: 'jsload_error',
          });
        }
        window.onload = function () {
          try {
            const sdkOptions = {
              isMobile: true,
              needFeedBack: false,
              enableDarkMode: false,
              // 是否需要loading和mask蒙层
              loading: false,
              ready: function (size) {
                console.log('ready size:', JSON.stringify(size));
              }
            };
            const captcha = new TencentCaptcha('您的CatchaAppid', globalCallback, sdkOptions);
            // 调用方法，显示验证码
            captcha.show();
          } catch (error) {
            errorCallback();
          }
        }
  </script>
</body>
</html>
3. 编写 webview 页面与 App 端进行事件通信方法。
// src/main/ets/common/utils/JsBridge.ets
import WebView from '@ohos.web.webview';
import { code } from '../constants/CodeConstant';
import { ParamsItem } from '../../viewmodel/ParamsItem';
import { JavaScriptItem } from '../../viewmodel/JavaScriptItem';
import Logger from './Logger';
import { LoginComponent } from '../../view/LoginComponent';
﻿
/**
 * JS事件层 连接 WebView 和 ArkTS通信.
 */
export default class JsBridge {
  controller: WebView.WebviewController;
  private componentInstance: LoginComponent;
  constructor(controller: WebView.WebviewController,componentInstance: LoginComponent) {
    this.controller = controller;
    this.componentInstance = componentInstance;
  }
﻿
  get javaScriptProxy(): JavaScriptItem {
    let result: JavaScriptItem = {
      object: {
        call: this.call
      },
      name: "JSBridgeHandle",
      methodList: ['call'],
      controller: this.controller
    }
    return result;
  }
﻿
  initJsBridge(): void {
    this.controller.runJavaScript(code);
  }
﻿
﻿
  postMessage = (params:string): Promise<string> => {
    // 可以在此将获取的票据传给页面，执行票据二次验证操作
    Logger.info("验证码回调数据,",params)
    this.componentInstance.closeWebView(params);
    return new Promise((resolve) => {
      resolve(params);
    })
  }
  call = (func: string, params: string): void => {
    const paramsObject: ParamsItem = JSON.parse(params);
    let result: Promise<string> = new Promise((resolve) => resolve(''));
    switch (func) {
      case 'postMessage':
        result = this.postMessage(params);
        break;
      default:
        break;
    }
    result.then((data: string) => {
      this.callback(paramsObject?.callID, data);
    })
  }
  callback = (id: number, data: string): void => {
    this.controller.runJavaScript(`JSBridgeCallback("${id}", ${JSON.stringify(data)})`);
  }
}
4. 在 H5 业务页面中接入验证码，详情请参见 Web 客户端接入 文档，并使用 JSBridge 传回验证数据给具体业务端。
注意
业务客户端完成验证码接入后，服务端需二次核查验证码票据结果（未接入票据校验，会导致黑产轻易伪造验证结果，失去验证码人机对抗效果），详情参见 接入票据校验 （Web 及 App）。
常见问题
详情参见 接入相关问题。
更多信息
您可以登录 验证码控制台，在页面右下角单击快速咨询，了解更多详细信息。
﻿
﻿
Harmony 接入

本页目录：

前提条件

接入步骤

Harmony 接入主要流程

Harmony 接入详细步骤

常见问题

更多信息
