：Android接入V2架構

背景資訊

移動端HTML5業務類型的驗證碼2.0具備快速迭代、強相容性等優勢。通過這種方式在App業務中接入驗證碼2.0服務，您無需再為Native App組件中的各種依賴、引用導致的相容性問題而感到困擾，而移動端HTML5驗證碼2.0的快速迭代也將協助您的App業務更好地應對“強對抗”情境。

接入流程

在Android App中接入HTML5應用類型的驗證碼2.0主要包含以下步驟：

1. HTML5頁面用戶端：在HTML5業務頁面用戶端整合驗證碼2.0。

2. HTML5頁面對應的服務端：在服務端整合驗證碼2.0SDK後，調用VerifyIntelligentCaptcha介面發起驗證碼驗證。

3. Android App端：利用WebView組件在App應用中開啟並部署需要接入驗證碼2.0的業務頁面。

如果您在接入過程中遇到任何問題，請提交工單聯絡我們。

前提條件

• 已開通阿里雲驗證碼2.0服務。

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

• 使用Android 7.0及以上版本。

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

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

2. 根據業務結果驗證操作的環境，調整用戶端接入代碼。

   • 如果您的業務結果驗證操作是在Android App側進行，您需要調整如下代碼：

     1. 在業務請求回呼函數中，添加對應的JavaScript函數，將驗證結果返回給步驟5和步驟6的自訂Java介面testJsInterface。當Java介面擷取到驗證結果後，即可在Android 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可以為空白
          };
          // 將驗證結果返回自訂Java介面
          window.testInterface && window.testInterface.getVerifyResult(JSON.stringify(verifyResult));
          return verifyResult;
        }

     2. 將HTML5頁面的業務請求驗證結果回呼函數置為空白函數，實現將HTML5側的業務操作遷移至Android App側。

        // 業務請求驗證結果回呼函數
        function onBizResultCallback(bizResult) {
          // 置為空白函數
        }

   • 如果您的業務結果驗證操作是在HTML5頁面進行，則無需調整代碼。

   • 如果HTML5頁面和Android App側都需要進行業務結果驗證操作，您需要調整如下代碼，實現同一套整合代碼在HTML5頁面和Android App側都可使用，且業務結果驗證邏輯互不干擾。

     1. 在業務請求回呼函數中，添加對應的JavaScript函數。具體操作，請參見添加JavaScript函數。

     2. 修改HTML5頁面的業務請求驗證結果回呼函數，判斷驗證作業環境是否為HTML5。如果是，添加HTML5頁面的商務邏輯。

        // 業務請求驗證結果回呼函數
        function onBizResultCallback(bizResult) {
          // 判斷是否為Android App環境，如果驗證作業環境沒有自訂JavaScript函數則為HTML5頁面
          // 或者使用您自訂的區分兩個環境的判斷條件
          if (!window.testInterface || !window.testInterface.getSlideData) {
              // 您的HTML5頁面側的商務邏輯
          }
        }

步驟二：在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，並定義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 App已接入驗證碼2.0。您可以在您的Android App中使用驗證碼，測實驗證效果。如果能正常使用，表示驗證碼接入成功。