使用WebView在Android App中接入验证码2.0

步骤一：在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接口的桥梁
   testWebview.addJavascriptInterface(new testJsInterface(), "testInterface");