Captcha:Android で V3 アーキテクチャと統合する

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

1. HTML5 サービス クライアントのコードに、Captcha 2.0 が提供するクライアント側の統合コードを統合します。詳細については、「Web および HTML5 クライアント向けの V3 アーキテクチャとの統合」をご参照ください。

   説明

   サービスで V2 アーキテクチャを使用している場合は、「Web および HTML5 クライアント向けの V2 アーキテクチャとの統合」をご参照ください。

2. 成功コールバック関数で、「ステップ 5」および「ステップ 6」で説明されているように、署名検証パラメーターをカスタム Java インターフェイス testJsInterface に返す JavaScript 関数を追加します。Java インターフェイスが署名検証パラメーターを取得した後、Android アプリはサービスリクエストと署名検証リクエストを送信し、検証結果を処理できます。

   // 成功コールバック関数
   function success(captchaVerifyParam) {
     // 入力パラメーターは署名検証用の captchaVerifyParam です。
     // 署名検証パラメーターをカスタム Java インターフェイスに返します。
     window.testInterface && window.testInterface.getCaptchaVerifyParam(captchaVerifyParam);
   }
   

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

HTML5 サービスページのサーバーで、Captcha 2.0 が提供するサーバーサイドソフトウェア開発キット (SDK) を統合します。次に、VerifyIntelligentCaptcha API 操作を呼び出して、サービスの署名検証を開始します。詳細については、「サーバーサイド統合」をご参照ください。

ステップ 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);
           // キャッシュを無効にして、最新バージョンの 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 を追加し、getCaptchaVerifyParam メソッドを定義して Captcha 署名検証パラメーターを取得します。

   import android.webkit.JavascriptInterface;
   
   public class testJsInterface {
       @JavascriptInterface
       public void getCaptchaVerifyParam(String captchaVerifyParam) {
           // 署名検証パラメーターを取得した後、サービスリクエストと署名検証リクエストを送信し、検証結果を処理できます。
           System.out.println(captchaVerifyParam);
       }
   }

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

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