:iOS の V2 アーキテクチャとの統合

背景情報

Captcha V2.0 のモバイル HTML5 バージョンは、迅速な反復と強力な互換性を提供します。この方法で Captcha V2.0 サービスをアプリに統合すると、ネイティブアプリコンポーネントの依存関係やリファレンスによって引き起こされる互換性の問題を回避できます。モバイル HTML5 Captcha V2.0 の迅速な反復は、アプリが高度な脅威により適切に対処するのにも役立ちます。

統合フロー

Captcha V2.0 の HTML5 バージョンを iOS アプリに統合するには、次のステップが含まれます:

1. HTML5 ページクライアント: HTML5 ビジネスページのクライアントに Captcha V2.0 を統合します。

2. HTML5 ページのサーバー: サーバーに Captcha V2.0 ソフトウェア開発キット (SDK) を統合します。次に、VerifyIntelligentCaptcha API 操作を呼び出して検証を開始します。

3. iOS アプリ: WKWebView コンポーネントを使用して、アプリ内で Captcha V2.0 の統合が必要なビジネスページを有効にしてデプロイします。

前提条件

• Alibaba Cloud Captcha 2.0 サービスが有効化されていること。

• 検証シナリオが作成されていること。Integration Method は [Webview+H5 (アプリと WeChat ミニプログラムをサポート)] に設定されています。

• iOS 10.0 以降を使用していること。

ステップ 1: Alibaba Cloud Captcha V2.0 を HTML5 ビジネスページのクライアントに統合する

1. Captcha が提供するクライアント側の統合コードを HTML5 ページのフロントエンドコードに統合します。HTML5 ページのクライアント側統合の詳細については、「Web および H5 クライアント側の統合」をご参照ください。

2. ビジネス結果の検証を実行する環境に基づいて、クライアント側のコードを調整します。

   • iOS アプリ側でビジネス結果の検証を実行する場合は、次のようにコードを調整します:

     1. ビジネスリクエストのコールバック関数に、対応する JavaScript 関数を追加します。ステップ 3 および ステップ 4 で構成されたメソッドを呼び出して、検証結果を取得します。このメソッドは、JavaScript と WKWebView 間の対話に WkScriptMessageHandler プロトコルを使用します。検証結果を取得した後、iOS アプリでさまざまなビジネス操作を実行できます。

        // ビジネスリクエスト (Captcha 検証付き) コールバック関数
        async function captchaVerifyCallback(captchaVerifyParam) {
          // 1. バックエンドにビジネスリクエストを送信して、Captcha 検証結果とビジネス結果を取得します。
          const result = await xxxx('http://your_business_request_address', {
              captchaVerifyParam: captchaVerifyParam, // Captcha パラメーター。
              yourBizParam... // ビジネスパラメーター。
          });
        
          // 2. 標準の戻りパラメーターを構築します。
          const verifyResult = {
            captchaResult: result.captchaVerifyResult, // Captcha 検証が成功したかどうかを指定します。このパラメーターはブール型で、必須です。
            bizResult: Get your business verification result from the result, // ビジネス検証が成功したかどうかを指定します。このパラメーターはブール型で、オプションです。ビジネス検証結果がない場合は、bizResult を空のままにすることができます。
          };
          // WkScriptMessageHandler プロトコルによって実装された JavaScript メソッドを呼び出して、検証結果を取得します。
          window.webkit && window.webkit.messageHandlers.getVerifyResult.postMessage(verifyResult)
          return verifyResult;
        }

     2. HTML5 ページのビジネスリクエスト検証結果コールバック関数を空の関数に設定します。これにより、ビジネス操作が HTML5 側から iOS アプリ側に移行されます。

        // ビジネスリクエスト検証結果コールバック関数
        function onBizResultCallback(bizResult) {
          // 空の関数に設定します。
        }

   • HTML5 ページでビジネス結果の検証を実行する場合、コードを調整する必要はありません。

   • HTML5 ページと iOS アプリ側の両方でビジネス結果の検証を実行するには、次のようにコードを調整します。これにより、同じ統合コードを両方の環境で使用でき、それぞれのビジネス結果検証ロジックが互いに干渉しないようになります。

     1. ビジネスリクエストのコールバック関数に、対応する JavaScript 関数を追加します。詳細については、「JavaScript 関数の追加」をご参照ください。

     2. HTML5 ページのビジネスリクエスト検証結果コールバック関数を変更して、検証環境が HTML5 であるかどうかを判断します。そうである場合は、HTML5 ページのビジネスロジックを追加します。

        // ビジネスリクエスト検証結果コールバック関数
        function onBizResultCallback(bizResult) {
          // 環境が iOS アプリであるかどうかを判断します。検証環境にカスタム JavaScript 関数が存在しない場合、環境は HTML5 ページです。
          // カスタム条件を使用して 2 つの環境を区別することもできます。
          if (!window.webkit || !window.webkit.messageHandlers) {
              // HTML5 ページのビジネスロジック。
          }
        }

ステップ 2: Alibaba Cloud Captcha V2.0 を HTML5 ページのサーバーに統合する

HTML5 ビジネスページのサーバー側で、Captcha 2.0 が提供するサーバーサイド SDK を統合した後、VerifyIntelligentCaptcha 操作を呼び出して captcha 検証を開始します。詳細については、「サーバーサイド統合」をご参照ください。

ステップ 3: iOS アプリでビジネスページを有効にしてデプロイする

1. iOS アプリプロジェクトの Controller.swift ファイルに、必要な依存関係をインポートします。

   import SwiftUI
   import WebKit

2. iOS アプリプロジェクトの 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 プロトコルに対応するメソッドを設定します。このメソッドは、Captcha V2.0 とビジネスロジックコードから戻り値を取得し、検証結果をカスタム API に渡すために使用されます。

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if(message.name == "getVerifyResult"){
       // 検証結果を受け取った後、さまざまなビジネス操作を実行できます。
       print(message.body)
     }
   }