Captcha：Android接入V3架構

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

1. 在HTML5業務用戶端代碼中，整合驗證碼2.0提供的用戶端接入代碼。關於HTML5業務用戶端整合方式，請參見Web和H5用戶端V3架構接入。

   說明

   如果您的業務架構是V2版本，請參見Web和H5用戶端V2架構接入。

2. 在success回呼函數中，添加對應的JavaScript函數，將驗簽參數返回給步驟5和步驟6的自訂Java介面testJsInterface。當Java介面擷取到驗簽參數後，即可在Android App側發送業務/驗簽請求並處理驗證結果。

   // success回呼函數
   function success(captchaVerifyParam) {
     // 入參為驗簽captchaVerifyParam
     // 將驗簽參數返回自訂Java介面
     window.testInterface && window.testInterface.getCaptchaVerifyParam(captchaVerifyParam);
   }
   

步驟二：在HTML5頁面對應的服務端整合阿里雲驗證碼2.0

在HTML5業務頁面對應的服務端中，整合驗證碼2.0提供的服務端SDK後，調用VerifyIntelligentCaptcha介面發起業務驗簽。具體操作，請參見服務端接入。

步驟三：在Android App端開啟並部署業務頁面

1. 在您的Android App工程的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設定檔中，設定網頁載入的許可權。

   說明

   如果存在其他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);
           // 建議禁止緩衝載入，以確保在攻擊發生時可快速擷取最新的阿里雲驗證碼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方法擷取驗證碼驗簽參數。

   import android.webkit.JavascriptInterface;
   
   public class testJsInterface {
       @JavascriptInterface
       public void getCaptchaVerifyParam(String captchaVerifyParam) {
           // 擷取到驗簽參數後，可以進行業務/驗簽請求並處理驗證結果
           System.out.println(captchaVerifyParam);
       }
   }

6. 在MainActivity.java的initView()方法中，將所添加的自訂Java介面與JavaScript函數綁定。

   // 建立JavaScript調用Java介面的橋樑
   webview.addJavascriptInterface(new testJsInterface(), "testInterface");