：iOS接入V2架構

背景資訊

移動端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服務。

• 已建立接入方式為Webview+H5（支持APP/小程序接入）的驗證情境。

• 使用iOS 10.0及以上版本。

步驟一：在HTML5業務頁面用戶端整合阿里雲驗證碼2.0

1. 在HTML5業務頁面前端代碼中，整合驗證碼（Captcha）提供的用戶端接入代碼。關於HTML5頁面的用戶端整合方式，請參見Web和H5用戶端接入。

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)
     }
   }