全部产品
Search
文档中心

阿里云验证码:使用WebView在Android App中接入验证码2.0

更新时间:Jul 18, 2024

随着混合模式移动应用(Hybrid App)开发技术的日益成熟,您可以通过在App业务中启用WebView组件的方式,直接接入移动端HTML5业务类型的阿里云验证码2.0,实现App业务中的人机对抗。本文介绍如何在Android App中接入验证码2.0

背景信息

移动端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服务,并新建客户端类型App(Webview+H5)的验证场景。具体操作,请参见步骤二:新建验证场景

  • 使用Android 7.0及以上版本。

步骤一:在HTML5业务页面客户端集成阿里云验证码2.0

  1. 在HTML5业务页面客户端代码中,集成验证码2.0提供的客户端接入代码。关于HTML5页面的客户端集成方式,请参见客户端接入

  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页面和Andriod 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接口发起验证码验证。具体操作,请参见服务端接入

重要

完成服务端集成后,请确保客户端和服务端已成功接入验证码2.0。具体操作,请参见步骤三:接入验证码

步骤三:在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.javainitView()方法中,将所添加的自定义Java接口与JavaScript函数绑定。

    // 建立JavaScript调用Java接口的桥梁
    testWebview.addJavascriptInterface(new testJsInterface(), "testInterface");

完成如上配置后,您的Android App已接入验证码2.0。您可以在您的Android App中使用验证码,测试验证效果。如果能正常使用,表示验证码接入成功。