iOS接入V3架构_验证码(Captcha)-阿里云帮助中心

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

背景信息

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

接入概述

说明

如果您的业务架构是V2版本，请参见iOS接入V2架构。

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

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

前提条件

已开通阿里云验证码2.0服务。
已新建接入方式为Webview+H5（支持APP/微信小程序接入）的验证场景。
使用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)
}
```

返回数据

在验证码2.0接入客户端V3架构的行为验证中，验证码服务端会在验证答案是否正确以及判断是否为机器请求后，将验证码Code和其他参数返回给业务客户端，您可以通过浏览器的Network功能查看返回数据，请参见客户端V3架构返回数据说明。

lQLPJxFSi2GYDIHNBHTNCpawwjNH3sY_CI4IOehh6YNsAQ_2710_1140

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

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

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

Swift

在您的iOS App工程的Controller.swift文件中，导入相关依赖。
```
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)
    }
}

Objective-C

在您的iOS App工程的ViewController.m文件中，导入相关依赖。

#import "ViewController.h"
#import <WebKit/WebKit.h>

@interface ViewController ()<WKScriptMessageHandler>

@property(nonatomic,strong)WKWebView *webView;

@end

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

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.webView];
    self.webView.scrollView.backgroundColor = [UIColor redColor];
    
    [self loadLocalHtmlForJs];
}

- (void)loadLocalHtmlForJs{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
    [self.webView loadRequest:req];
}

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

- (WKWebView *)webView{
    if (!_webView) {
        // 配置页面自适应缩放
        NSString *jscript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta)";
        WKUserScript *userScript = [[WKUserScript alloc] initWithSource:jscript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addUserScript:userScript];
        // 添加HTML页面JavaScript的调用方法，方法名称与HTML页面中success回调函数内的调用保持一致
        [userContentController addScriptMessageHandler:self name:@"getCaptchaVerifyParam"];
        // 配置WKWebView
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
        // 显示WKWebView
        WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        webView.backgroundColor = [UIColor blackColor];
        // 开启调试模式（可选）
        [webView.configuration.preferences setValue:@YES forKey:@"developerExtrasEnabled"];
        webView.inspectable = YES;

        _webView = webView;
    }
    return _webView;
}

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

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // 获取HTML页面js调用相应方法获取的验证码服务返回值，方法名应与添加在HTML页面js调用方法名保持一致
    if([message.name isEqualToString:@"getCaptchaVerifyParam"]){
        // 获取到验签参数后，可以进行业务/验签请求并处理验证结果
        NSLog(@"验证码验签参数: %@", message.body);
        // 这里可以添加您的业务逻辑，比如：
        // 1. 将验签参数发送到您的服务端进行验证
        // 2. 根据验证结果处理后续业务流程
        
        // 示例：将验签参数发送到服务端
        [self sendCaptchaVerifyParamToServer:message.body];
    }
}

iOS V3架构Demo示例下载

Swift：iOS（Swift）App接入Demo示例。
Objective-C：iOS（Objective-C）App接入Demo示例。