在iOS App中使用WKWebView接入驗證碼V3架構-驗證碼-阿里雲

隨著混合模式行動裝置 App（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樣本。