阿里云验证码：使用WKWebView在iOS App中接入验证码2.0（Swift）

背景信息

移动端HTML5业务类型的验证码2.0具备快速迭代、强兼容性等优势。通过这种方式在App业务中接入验证码2.0服务，您无需再为Native App组件中的各种依赖、引用导致的兼容性问题而感到困扰，而移动端HTML5验证码2.0的快速迭代也将帮助您的App业务更好地应对“强对抗”场景。

接入流程

在iOS App中接入HTML5应用类型的验证码2.0主要包含以下步骤：

1. HTML5页面客户端：在HTML5业务页面客户端集成验证码2.0。

2. HTML5页面对应的服务端：在服务端集成验证码2.0SDK后，调用VerifyIntelligentCaptcha接口发起验证码验证。

3. iOS App端：利用WKWebView组件在App应用中开启并部署需要接入验证码2.0的业务页面。

如果您在接入过程中遇到任何问题，请提交工单联系我们。

前提条件

• 已开通验证码2.0服务，并新建客户端类型为App(Webview+H5)的验证场景。具体操作，请参见步骤二：新建验证场景。

• 使用iOS 10.0及以上版本。

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

1. 在HTML5业务页面前端代码中，集成验证码（Captcha）提供的客户端接入代码。关于HTML5页面的客户端集成方式，请参见客户端接入。

2. 根据业务结果验证操作的环境，调整客户端接入代码。

   • 如果您的业务结果验证操作是在iOS App侧，您需要调整如下代码：

     1. 在业务请求回调函数中，添加对应的JavaScript函数，调用步骤3和步骤4配置的通过WkScriptMessageHandler协议实现JavaScript与WKWebView交互的方法，获取验证结果。如果获取到验证结果，即可在iOS App侧进行不同的业务操作。

        // 业务请求(带验证码校验)回调函数
        async function captchaVerifyCallback(captchaVerifyParam) {
          // 1.向后端发起业务请求，获取验证码验证结果和业务结果
          const result = await xxxx('http://您的业务请求地址', {
              captchaVerifyParam: captchaVerifyParam, // 验证码参数
              yourBizParam... // 业务参数
          });
        
          // 2.构造标准返回参数
          const verifyResult = {
            captchaResult: result.captchaVerifyResult, // 验证码验证是否通过，boolean类型，必选
            bizResult: 从result获取您的业务验证结果, // 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空
          };
          // 调用WkScriptMessageHandler协议实现的JavaScript方法获取验证结果
          window.webkit && window.webkit.messageHandlers.getVerifyResult.postMessage(verifyResult)
          return verifyResult;
        }

     2. 将HTML5页面的业务请求验证结果回调函数置为空函数，实现将HTML5侧的业务操作迁移至iOS App侧。

        // 业务请求验证结果回调函数
        function onBizResultCallback(bizResult) {
          // 置为空函数
        }

   • 如果您的业务结果验证操作是在HTML5页面，则无需调整代码。

   • 如果HTML5页面和iOS App侧都需要进行业务结果验证操作，您需要调整如下代码，实现同一套集成代码在HTML5页面和iOS App侧都可使用，且业务结果验证逻辑互不干扰。

     1. 在业务请求回调函数中，添加对应的JavaScript函数。具体操作，请参见添加JavaScript函数。

     2. 修改HTML5页面的业务请求验证结果回调函数，判断验证操作环境是否为HTML5。如果是，添加HTML5页面的业务逻辑。

        // 业务请求验证结果回调函数
        function onBizResultCallback(bizResult) {
          // 判断是否为iOS App环境，如果验证操作环境中没有自定义JavaScript函数则为HTML5页面
          // 或者使用您自定义的区分两个环境的判断条件
          if (!window.webkit || !window.webkit.messageHandlers) {
              // 您的HTML5页面侧的业务逻辑
          }
        }

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

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

步骤三：在iOS App端开启并部署业务页面

1. 在您的iOS App工程的Controller.swift文件中，导入相关依赖。

   import SwiftUI
   import WebKit

2. 在您的iOS App工程的Controller.swift文件中，加载HTML5业务页面。

   override func viewDidLoad() {
       super.viewDidLoad()
       view.addSubview(webView)
       let url = URL(string: "http://x.x.x.x/demo/")
       let request = URLRequest(url: url!);
       webView.load(request); // 加载页面
   }

3. 设置WKWebView对象，通过WKScriptMessageHandler协议来实现JavaScript与WKWebView的交互。

   lazy var webView: WKWebView = {
       // 配置页面自适应缩放
       let javascript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta)";
       let configuration = WKWebViewConfiguration();
       let userScript = WKUserScript(source: javascript, injectionTime: .atDocumentEnd, forMainFrameOnly: true);
       let usercontroller = WKUserContentController();
       usercontroller.addUserScript(userScript);
       configuration.userContentController = usercontroller;
       // 添加HTML页面JavaScript的调用方法，方法名称可自行按需更改
       configuration.userContentController.add(self, name: "getVerifyResult");
       // 配置WKWebView
       let webView = WKWebView(frame: self.view.frame, configuration: configuration);
       webView.navigationDelegate = self;
       return webView;
   }()

4. 设置WKScriptMessageHandler协议相应的方法，用于获取验证码2.0的返回值和您自身的业务逻辑代码，将验证结果返回自定义接口。

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
       if(messsage.name == "getVerifyResult"){
           // 获取到验证结果后，可以进行不同的业务操作
           print(message.body)
       }
   }