小程式使用Webview+H5接入V3架構 - Captcha

在控制台添加驗證情境後，您需要在使用驗證功能的小程式頁面中，整合驗證碼初始化代碼，實現小程式接入。本文介紹微信小程式、支付寶小程式如何使用Webview+H5接入V3架構。

前提條件

已開通阿里雲驗證碼2.0服務。
已建立接入方式為Webview+H5（支持APP/小程序接入）的驗證情境。

驗證碼整合

阿里雲驗證碼使用web-view組件載入驗證碼H5頁面進行驗證及擷取二次驗證captchaVerifyParam。

因此需要在小程式工程中引入包含阿里雲驗證碼WebView頁面及在網站上部署驗證碼H5頁面，需要在後台配置該驗證碼頁面業務網域名稱。

接入步驟

將阿里雲驗證碼頁面上傳到自己可控制的HTTPS伺服器上（普通Web服務、OSS、CDN等均可，只要是HTTPS能以text/html的Content-Type訪問到即可）。
將該H5頁面網域名稱，到微信小程式管理後台或支付寶小程式管理後台中配置為業務網域名稱。具體操作，請參見添加業務網域名稱（微信小程式）、配置 H5 網域名稱（支付寶小程式）。
建立一個阿里雲驗證碼頁面，將驗證碼用web-view組件引入小程式中。
從業務頁面觸發跳轉阿里雲驗證碼頁面，驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正或業務後續邏輯。

接入樣本

說明

本樣本採用驗證碼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。

建立阿里雲驗證碼的小程式頁面：

// 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"
  ],
}

在業務頁面中觸發驗證碼頁面跳轉：

// 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>

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正或業務後續邏輯。

uni-app接入

說明

Demo下載：uniapp.zip。

建立阿里雲驗證碼的小程式頁面：

<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"
			}
		}
	]
}

在業務頁面中觸發驗證碼頁面跳轉：

<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>

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正或業務後續邏輯。

Taro接入

說明

Demo下載：taro.zip。

建立阿里雲驗證碼的小程式頁面：

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'
  ],
})

在業務頁面中觸發驗證碼頁面跳轉：

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>
  );
}

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正/業務後續邏輯。

支付寶小程式

阿里雲驗證碼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://appx/web-view.min.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
                my.postMessage({ data: captchaVerifyParam });
                my.navigateBack();
            }

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

支付寶小程式原生語言

說明

Demo下載：alipay.zip。

建立阿里雲驗證碼的小程式頁面：

// pages/AliyunCaptcha/AliyuCaptcha.js
Page({
  data: {
    webViewSrc: 'https://your-captcha-page/index.html'
  },
  onMessage(e) {
    const captchaVerifyParam = e.detail.data;
    // 通過事件通道，觸發在業務頁面中定義的 'getCaptchaVerifyParam' 事件，並把驗證參數傳出去
    this.eventChannel = this.getOpenerEventChannel();
    this.eventChannel && this.eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
  },
})

<!--main/AliyunCaptcha/AliyuCaptcha.axml-->
<view>
  <web-view src="{{webViewSrc}}" onMessage="onMessage"></web-view>
</view>

page.json中添加對應頁面地址：

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

在業務頁面中觸發驗證碼頁面跳轉：

// pages/index/index.js
Page({
  openAliyunCaptcha() {
    my.navigateTo({
      url: "/pages/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // 定義一個getCaptchaVerifyParam事件，擷取二次驗證參數captchaVerifyParam
          console.log('驗證碼返回結果：', captchaVerifyParam)
          // 發起二次校正
        }
      }
    })
  }
});

<!--page/index/index.axml-->
<button bindtap="openAliyunCaptcha">跳轉阿里雲驗證碼H5</button>

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正/業務後續邏輯。

uni-app接入

說明

Demo下載：uniapp_alipay.zip。

建立阿里雲驗證碼的小程式頁面：

<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;
			  const eventChannel = this.getOpenerEventChannel();
			  // 通過事件通道，觸發在業務頁面中定義的 'getCaptchaVerifyParam' 事件，並把驗證參數發送至業務頁面
              eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

page.json中添加對應頁面地址：

{
	"pages": [
		{
			"path": "pages/AliyunCaptcha/AliyunCaptcha",
			"style": 
			{
				"navigationBarTitleText": "阿里雲驗證碼小程式H5"
			}
		}
	]
}

在業務頁面中觸發驗證碼頁面跳轉：

<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>

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正/業務後續邏輯。

Taro接入

說明

Demo下載：taro_alipay.zip。

建立阿里雲驗證碼的小程式頁面：

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;
    // 通過事件通道，觸發在業務頁面中監聽的'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'
  ],
})

在業務頁面中觸發驗證碼頁面跳轉：

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>
  );
}

H5頁面中驗證通過後，攜帶二次校正參數跳回當前業務頁面，進行二次校正/業務後續邏輯。