AI 助理
备案控制台
官方文档
输入文档关键字查找
首页 验证码 验证码2.0 操作指南 客户端接入 微信小程序接入 Webview+H5接入V3架构

Webview+H5接入V3架构

更新时间：
我的收藏

在控制台添加验证场景后，您需要在使用验证功能的微信小程序页面中，集成验证码初始化代码，实现微信小程序接入。本文介绍微信小程序如何使用Webview+H5接入V3架构。

前提条件

验证码集成

阿里云验证码使用web-view组件加载验证码H5页面进行验证及获取二次验captchaVerifyParam，因此需要在小程序工程中引入包含阿里云验证码WebView页面及在站点上部署验证码H5页面，需要在后台配置该验证码页面业务域名。

接入步骤

  1. 将阿里云验证码页面上传到自己可控制的HTTPS服务器上（普通Web服务、OSS、CDN等均可，只要是HTTPS能以text/html的Content-Type访问到即可）。

  2. 将该H5页面域名，到小程序管理后台中配置为业务域名。具体操作，请参见添加业务域名。

  3. 新建一个阿里云验证码页面，将验证码用web-view组件引入小程序中。

  4. 从业务页面触发跳转阿里云验证码页面，验证通过后，携带二次校验参数跳转回当前业务页面，进行二次校验或业务后续逻辑。

验证流程图

image

接入示例

说明

本示例采用验证码V3架构进行接入。

阿里云验证码H5页面参考示例

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="data-spm" content="5176"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <script>
            window.AliyunCaptchaConfig = {
                region: 'cn',
                prefix: 'xxxxxx',
            };
        </script>
        <script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

    </head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        
        #captcha-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }

        #captcha-element {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

    <body>
        <div id="captcha-container">
            <div id="captcha-element"></div>
            <div id="captcha-button"></div>
        </div>

        <script type="text/javascript">
            var captcha;

            function initCaptcha() {
                window.initAliyunCaptcha({
                    SceneId: 'xxxxxx',
                    mode: 'embed',
                    element: '#captcha-element',
                    button: '#captcha-button',
                    success: success,
                    fail: fail,
                    getInstance: getInstance,
                    slideStyle: {
                        width: 360,
                        height: 40,
                    },
                    language: 'cn',
                    timeout: 5000,
                });  
            }

            initCaptcha();

            function getInstance(instance) {
                console.log(instance)
                captcha = instance;
            }

            function success(captchaVerifyParam) {
                console.log(captchaVerifyParam);
                // 通知小程序二次校验参数captchaVerifyParam
                wx.miniProgram.postMessage({
                  data: captchaVerifyParam,
                });
                wx.miniProgram.navigateBack();
            }

            function fail(err) {
                console.error(err);
            }
        </script>
    </body>
</html>

微信小程序原生语言

说明

Demo下载：weixin.zip。

  1. 新建阿里云验证码的小程序页面：

    // main/AliyunCaptcha/AliyuCaptcha.js
Page({
  data: {
    eventChannel: undefined,
    webViewSrc: 'https://your-captcha-page/index.html'
  },
  onLoad(options) {
    // 获取打开业务页面的事件通道
    this.eventChannel = this.getOpenerEventChannel();})
  },
  onMessage(e) {
    const captchaVerifyParam = e.detail.data[0];
    console.log('captchaVerifyParam:', captchaVerifyParam);
    // 通过事件通道，触发在业务页面中定义的 'getCaptchaVerifyParam' 事件，并把验证参数发送至业务页面
    if (this.eventChannel) {
      this.eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
    }
  }
})
    <!--main/AliyunCaptcha/AliyuCaptcha.wxml-->
<view>
  <web-view src="{{webViewSrc}}" bindmessage="onMessage"></web-view>
</view>

    page.json中添加对应页面地址：

    {
  "pages": [
    "main/AliyunCaptcha/AliyunCaptcha"
  ],
}

  2. 在业务页面中触发验证码页面跳转：

    // main/BizPage/BizPage.js
Page({
  openAliyunCaptcha() {
    // 根据业务需求触发阿里云验证码页面跳转
    wx.navigateTo({ 
      url: "/main/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // 定义一个getCaptchaVerifyParam事件，获取二次验证参数captchaVerifyParam
          console.log('验证码返回结果：', captchaVerifyParam)
          // 发起二次校验
        }
      }
    })
  }
})
    <!--main/BizPage/BizPage.wxml-->
<button bindtap="openAliyunCaptcha">跳转阿里云验证码H5</button>

  3. H5页面中验证通过后，携带二次校验参数跳转回当前业务页面，进行二次校验或业务后续逻辑。

uni-app接入

说明

Demo下载：uniapp.zip。

  1. 新建阿里云验证码的小程序页面：

    <template>
	<web-view src="https://your-captcha-page/index.html" @message="onMessage"></web-view>
</template>

<script>
	export default {
		methods: {
			onMessage(e) {
			  const captchaVerifyParam = e.detail.data[0];
			  const eventChannel = this.getOpenerEventChannel();
			  // 通过事件通道，触发在业务页面中定义的 'getCaptchaVerifyParam' 事件，并把验证参数发送至业务页面
			  eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

    page.json中添加对应页面地址：

    {
	"pages": [
		{
			"path" : "pages/AliyunCaptcha/AliyunCaptcha",
			"style" : 
			{
				"navigationBarTitleText": "阿里云验证码小程序H5"
			}
		}
	]
}

  2. 在业务页面中触发验证码页面跳转：

    <template>
	<button @click="handleClickAliyunCaptcha">触发阿里云验证码</button>
</template>

<script>
	export default {
		methods: {
			handleClickAliyunCaptcha(){
				uni.navigateTo({
					url:'/pages/AliyunCaptcha/AliyunCaptcha',
					events: {
						getCaptchaVerifyParam: (captchaVerifyParam) => {
						  // 定义一个getCaptchaVerifyParam事件，获取二次验证参数captchaVerifyParam
						  console.log('验证码返回结果：', captchaVerifyParam)
						  // 发起二次校验
						}
					}
				});
			}
		}
	}
</script>

  3. H5页面中验证通过后，携带二次校验参数跳转回当前业务页面，进行二次校验或业务后续逻辑。

Taro接入

说明

Demo下载：taro.zip。

  1. 新建阿里云验证码的小程序页面：

    import { View, WebView } from '@tarojs/components';
import Taro from '@tarojs/taro';

export default function Index() {
  const webViewSrc = 'https://your-captcha-page/index.html';

  const handleWebViewMessage = (event) => {
    const captchaVerifyParam = event.detail.data[0];
    // 通过事件通道，触发在业务页面中监听的'getCaptchaVerifyParam'事件，并把验证参数发送至业务页面
    const eventChannel = Taro.getCurrentInstance().page.getOpenerEventChannel();
    eventChannel && eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
  };

  return <View>{webViewSrc && <WebView src={webViewSrc} onMessage={handleWebViewMessage} />}</View>;
}

    app.config.js中添加对应页面地址：

    export default defineAppConfig({
  pages: [
    'pages/AliyuCaptcha/AliyunCaptcha'
  ],
})

  2. 在业务页面中触发验证码页面跳转：

    import { View, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';

export default function Index() {
  const handleClickAliyunCaptcha = () => {
    // 跳转到阿里云验证码页面
    Taro.navigateTo({
      url: '/pages/AliyuCaptcha/AliyunCaptcha',
      events: {
        getCaptchaVerifyParam: function(captchaVerifyParam) {
          // 定义一个getCaptchaVerifyParam事件，获取二次验证参数captchaVerifyParam
          console.log('验证码返回结果：', captchaVerifyParam);
          // 发起二次校验
        },
      },
    });
  };

  return (
    <View>
      <Button onClick={handleClickAliyunCaptcha}>触发阿里云验证码</Button>
    </View>
  );
}

  3. H5页面中验证通过后，携带二次校验参数跳转回当前业务页面，进行二次校验/业务后续逻辑。

上一篇：微信小程序接入下一篇：客户端初始化报错说明