:V2 アーキテクチャでの Android 統合

背景情報

Captcha 2.0 のモバイル HTML5 バージョンは、迅速な反復と強力な互換性を提供します。この方法で Captcha 2.0 サービスを統合すると、ネイティブアプリコンポーネントの依存関係やリファレンスに起因する互換性の問題が解消されます。モバイル HTML5 Captcha 2.0 の迅速な反復は、アプリが高度な攻撃を伴うシナリオをより効果的に処理するのにも役立ちます。

統合プロセス

Captcha 2.0 の HTML5 バージョンを Android アプリに統合するには、次のステップに従います。

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

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

3. Android アプリ: WebView コンポーネントを使用して、Captcha 2.0 の統合が必要なビジネスページを読み込みます。

統合中に問題が発生した場合は、チケットを送信 してお問い合わせください。

前提条件

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

• Integration Method が [Webview+H5 (アプリおよび WeChat ミニプログラム用)] に設定されている 検証シナリオ が作成されていること。

• Android 7.0 以降が使用されていること。

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

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

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

   • ビジネス結果が Android アプリで検証される場合は、次のようにコードを調整します。

     1. ビジネスリクエストのコールバック関数で、対応する JavaScript 関数を追加して、ステップ 5 および ステップ 6 のカスタム Java インターフェイス testJsInterface に検証結果を返します。Java インターフェイスが検証結果を受け取った後、Android アプリでさまざまなビジネス操作を実行できます。

        // 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_result, // ビジネス検証が成功したかどうかを指定します。このパラメーターはブール値であり、オプションです。ビジネス結果が検証されない場合は、bizResult を空のままにすることができます。
          };
          // 検証結果をカスタム Java インターフェイスに返します。
          window.testInterface && window.testInterface.getVerifyResult(JSON.stringify(verifyResult));
          return verifyResult;
        }

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

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

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

   • ビジネス結果を HTML5 ページと Android アプリの両方で検証する必要がある場合は、次のようにコードを調整します。これにより、同じ統合コードを HTML5 ページと Android アプリの両方で使用でき、検証ロジック間で干渉が発生しなくなります。

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

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

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

ステップ 2: HTML5 ページのバックエンドに Alibaba Cloud Captcha 2.0 を統合する

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

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

1. Android アプリプロジェクトの Activity.java ファイルで、WebView コンポーネントの依存関係ライブラリをインポートします。

   import android.webkit.WebView;
   import android.webkit.WebSettings;
   import android.webkit.WebViewClient;
   import android.webkit.WebChromeClient;
   // または
   // import android.webkit.*;

2. AndroidManifest.xml 構成ファイルで、Web ページの読み込み権限を設定します。

   説明

   他の HTTP リソースが呼び出される場合は、対応する構成を追加してください。

   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
   <application
     ...
     android:usesCleartextTraffic="true"
     ...
     >

3. activity_main.xml レイアウトファイルに、WebView コンポーネントを追加します。

   <WebView android:id="@+id/webview"
               android:layout_height="match_parent"
               android:layout_width="match_parent" />

4. MainActivity.java ファイルで、HTML5 ビジネスページを読み込みます。

   public class MainActivity extends AppCompatActivity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           initView();
       }
       private void initView() {
           // ページレイアウト
           WebView webview = findViewById(R.id.webview);
           // WebView の設定
           WebSettings webSettings = webview.getSettings();
           // オプション。Chrome のデバッグを有効にします。
           WebView.setWebContentsDebuggingEnabled(true);
           // コンテンツを画面サイズに合わせます。
           webSettings.setUseWideViewPort(true);
           webSettings.setLoadWithOverviewMode(true);
           // キャッシュの読み込みを無効にします。これにより、Alibaba Cloud Captcha 2.0 の最新バージョンを迅速に取得して攻撃から防御できます。
           webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
           // WebView コンポーネントに JavaScript の読み込みを許可します。
           webSettings.setJavaScriptEnabled(true);
           webSettings.setDomStorageEnabled(true);
           
           // デフォルトのブラウザの代わりに WebView コンポーネントを使用してページを読み込みます。
           webview.setWebViewClient(new WebViewClient(){
               @Override
               public boolean shouldOverrideUrlLoading(WebView view, String url) { 
                   view.loadUrl(url);
                   return true;
               }
           });
           // ビジネスページを読み込みます。
           webview.loadUrl("http://x.x.x.x/demo/");
       }
   }

5. MainActivity.java ファイルに、カスタム Java インターフェイス testJsInterface を追加し、getVerifyResult メソッドを定義して検証結果を取得します。

   import android.webkit.JavascriptInterface;
   
   public class testJsInterface {
       @JavascriptInterface
       public void getVerifyResult(String verifyResult) {
           // 検証結果を取得した後、さまざまなビジネス操作を実行できます。
           System.out.println(verifyResult);
       }
   }

6. MainActivity.java の initView() メソッドで、カスタム Java インターフェイスを JavaScript 関数にバインドします。

   // JavaScript が Java インターフェイスを呼び出すためのブリッジを作成します。
   webview.addJavascriptInterface(new testJsInterface(), "testInterface");

これらの構成が完了すると、Android アプリは Captcha 2.0 と統合されます。その後、Android アプリで Captcha を使用して検証をテストできます。Captcha が期待どおりに機能する場合、統合は成功です。