如何使用WKWebView在iOS App中接入滑动验证_验证码(Captcha)-阿里云帮助中心

随着混合模式移动应用（Hybrid App）开发技术的日益成熟，您可以通过在App业务中启用WebView组件的方式直接接入移动端HTML5业务类型的滑动验证组件，实现App业务中的人机对抗。用户只需通过类似滑动解锁的方式实现验证码，对正常用户来说即可轻松通过人机识别（图灵测试）的挑战。

背景信息

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

接入流程

在iOS App中接入HTML5应用类型的滑块验证组件主要包含以下步骤：

iOS App端：利用WebView组件在App应用中开启并部署需要接入滑动验证组件的业务页面。
HTML5页面前端：通过JavaScript函数调用Swift方法并将记录的用户行为参数值传至阿里云验证码服务端。
HTML5页面对应的服务端：集成滑动验证服务端SDK。

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

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

在您的iOS App工程的Conteroller文件中，加载HTML5业务页面。

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

设置WKWebView对象，通过WKScriptMessageHandler协议来实现JS与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页面js的调用方法，这里默认添加的方法名称为getSlideData，可自行按需更改
    configuration.userContentController.add(self, name: "getSlideData");
    // 配置WKWebView
    let webView = WKWebView(frame: self.view.frame, configuration: configuration);
    webView.navigationDelegate = self;
    return webView;
}()

设置WKScriptMessageHandler协议相应的方法获取滑动验证服务的返回值和您自身的业务逻辑代码。

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if(messsage.name == "getSlideData"){
        print(message.body)
    }
}

步骤二：在HTML5页面前端代码中添加JavaScript函数调用WKScriptMessageHandler协议实现的JavaScript方法

注意

在执行本步骤前，您需要完成在HTML5业务页面前端代码中集成滑动验证提供的前端接入代码。关于HTML5页面的前端接入代码集成的详细步骤，请参见滑动验证集成方式。

在已集成滑动验证前端接入代码的HTML5业务页面中，添加对应的JavaScript函数，实现在用户将滑块滑动至末端时的回调参数中调用相关JavaScript方法进行参数获取。

function (data) {
  // 调用WkScriptMessageHandler协议实现的JavaScript方法获取参数sessionID及sig
  window.console && console.log(data.sessionId)
  window.console && console.log(data.sig)
  window.webkit.messageHandlers.getSlideData.postMessage(data)
}

步骤三：在HTML5页面对应的服务端集成滑动验证服务端SDK

在HTML5业务页面对应的服务端中，集成滑动验证提供的服务端功能SDK。关于HTML5页面的前端接入代码集成的详细步骤，请参见服务端代码集成的概述。

接入效果示例

完成上述步骤后，您的iOS App业务将接入HTML5应用类型的滑块验证组件，并实现验证码。

当App业务使用者在App中将滑块滑动至末端时，HTML5业务页面将调用window.webkit.messageHandlers.getSlideData.postMessage方法获取相关参数。