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

随着混合模式移动应用（Hybrid App）开发技术的日益成熟，您可以通过在App业务中启用WKWebView组件的方式，直接接入移动端HTML5业务类型的阿里云验证码2.0，实现App业务中的人机对抗。本文介绍如何在iOS App中接入验证码2.0。

背景信息

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

接入概述

说明

该流程用于从H5侧发送验证请求，如果您需要从App侧发送请求，请参考App侧发送验证请求实践教程。

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

HTML5页面客户端：在HTML5业务页面客户端集成验证码2.0。
HTML5页面对应的服务端：在服务端集成验证码2.0SDK后，调用VerifyIntelligentCaptcha接口发起验证码验证。
iOS App端：利用WKWebView组件在App应用中开启并部署需要接入验证码2.0的业务页面。

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

前提条件

已开通验证码2.0服务，并新建客户端类型为App(Webview+H5)的验证场景。
使用iOS 10.0及以上版本。

操作步骤

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

在HTML5业务页面客户端代码中，集成验证码2.0提供的客户端接入代码。关于HTML5页面的客户端集成方式，请参见Web和H5客户端V3架构接入。
说明
如果您的业务架构是V2版本，请参见Web和H5客户端V2架构接入。
在success回调函数中，添加对应的JavaScript函数，调用步骤3和步骤4配置的通过WkScriptMessageHandler协议实现JavaScript与WKWebView交互的方法，获取验签参数。获取到验签参数后，即可在iOS App侧发送业务或验签请求并处理验证结果。
```
// success回调函数
function success(captchaVerifyParam) {
  // 调用WkScriptMessageHandler协议实现的JavaScript方法获取验签参数
  window.webkit && window.webkit.messageHandlers.getCaptchaVerifyParam.postMessage(captchaVerifyParam）
}
```

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

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

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

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

在您的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); // 加载页面
}

设置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: "getCaptchaVerifyParam");
    // 配置WKWebView
    let webView = WKWebView(frame: self.view.frame, configuration: configuration);
    webView.navigationDelegate = self;
    return webView;
}()

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

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if(messsage.name == "getCaptchaVerifyParam"){
        // 获取到验签参数后，可以进行业务/验签请求并处理验证结果
        print(message.body)
    }
}