Use Webview+H5 to integrate mini programs with the V3 architecture - Captcha

After you create a verification scenario in the Captcha console, you must integrate the Captcha initialization code into the mini program page where you want to use the verification feature. This topic describes how to integrate WeChat mini programs and Alipay mini programs with the V3 architecture using Webview+H5.

Prerequisites

You have activated the Captcha 2.0 service.
You have created a verification scenario and set the Integration Method to Webview+H5 (Supports apps and mini-programs).

Captcha integration

Alibaba Cloud Captcha uses the WebView component to load the Captcha H5 page for verification. This process obtains the `captchaVerifyParam` required for secondary authentication.

You must import the Alibaba Cloud Captcha WebView page into your mini program project and deploy the Captcha H5 page on your site. You also need to configure the service domain name for this Captcha page in the mini program's backend settings.

Integration steps

Upload the Alibaba Cloud Captcha page to an HTTPS server that you control. This can be a standard web server, OSS, or CDN, provided that the page is accessible over HTTPS with a `text/html` Content-Type.
Configure the domain name of the H5 page as a service domain name in the WeChat Mini Program admin console or the Alipay Mini Program admin console. For more information, see Add a service domain name (WeChat mini program) and Configure an H5 domain name (Alipay mini program).
Create an Alibaba Cloud Captcha page and import Captcha into the mini program using the WebView component.
From your service page, trigger a redirect to the Alibaba Cloud Captcha page. After verification succeeds, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

Integration examples

Note

This example shows how to integrate with the Captcha V3 architecture.

WeChat mini program

Alibaba Cloud Captcha H5 page example (WeChat mini program):

<!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);
                // Notify the mini program of the secondary authentication parameter captchaVerifyParam.
                wx.miniProgram.postMessage({
                  data: captchaVerifyParam,
                });
                wx.miniProgram.navigateBack();
            }

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

WeChat mini program native language

Note

Download demo: weixin.zip.

Create a mini program page for Alibaba Cloud Captcha:

// main/AliyunCaptcha/AliyuCaptcha.js
Page({
  data: {
    eventChannel: undefined,
    webViewSrc: 'https://your-captcha-page/index.html'
  },
  onLoad(options) {
    // Get the event channel to open the service page.
    this.eventChannel = this.getOpenerEventChannel();})
  },
  onMessage(e) {
    const captchaVerifyParam = e.detail.data[0];
    console.log('captchaVerifyParam:', captchaVerifyParam);
    // Use the event channel to trigger the 'getCaptchaVerifyParam' event defined in the service page and send the verification parameter to the service page.
    if (this.eventChannel) {
      this.eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
    }
  }
})

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

Add the page path to `page.json`:

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

Trigger a redirect to the Captcha page from your service page:

// main/BizPage/BizPage.js
Page({
  openAliyunCaptcha() {
    // Trigger a redirect to the Alibaba Cloud Captcha page as needed.
    wx.navigateTo({ 
      url: "/main/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
          console.log('Captcha return result:', captchaVerifyParam)
          // Initiate secondary authentication.
        }
      }
    })
  }
})

<!--main/BizPage/BizPage.wxml-->
<button bindtap="openAliyunCaptcha">Redirect to Alibaba Cloud Captcha H5</button>

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

uni-app integration

Note

Download demo: uniapp.zip.

Create a mini program page for Alibaba Cloud Captcha:

<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();
			  // Use the event channel to trigger the 'getCaptchaVerifyParam' event defined in the service page and send the verification parameter to the service page.
			  eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

Add the page path to `page.json`:

{
	"pages": [
		{
			"path" : "pages/AliyunCaptcha/AliyunCaptcha",
			"style" : 
			{
				"navigationBarTitleText": "Alibaba Cloud Captcha Mini Program H5"
			}
		}
	]
}

Trigger a redirect to the Captcha page from your service page:

<template>
	<button @click="handleClickAliyunCaptcha">Trigger Alibaba Cloud Captcha</button>
</template>

<script>
	export default {
		methods: {
			handleClickAliyunCaptcha(){
				uni.navigateTo({
					url:'/pages/AliyunCaptcha/AliyunCaptcha',
					events: {
						getCaptchaVerifyParam: (captchaVerifyParam) => {
						  // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
						  console.log('Captcha return result:', captchaVerifyParam)
						  // Initiate secondary authentication.
						}
					}
				});
			}
		}
	}
</script>

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

Taro integration

Note

Download demo: taro.zip.

Create a mini program page for Alibaba Cloud Captcha:

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];
    // Use the event channel to trigger the 'getCaptchaVerifyParam' event listened for in the service page and send the verification parameter to the service page.
    const eventChannel = Taro.getCurrentInstance().page.getOpenerEventChannel();
    eventChannel && eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
  };

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

Add the page path to `app.config.js`:

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

Trigger a redirect to the Captcha page from your service page:

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

export default function Index() {
  const handleClickAliyunCaptcha = () => {
    // Redirect to the Alibaba Cloud Captcha page.
    Taro.navigateTo({
      url: '/pages/AliyuCaptcha/AliyunCaptcha',
      events: {
        getCaptchaVerifyParam: function(captchaVerifyParam) {
          // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
          console.log('Captcha return result:', captchaVerifyParam);
          // Initiate secondary authentication.
        },
      },
    });
  };

  return (
    <View>
      <Button onClick={handleClickAliyunCaptcha}>Trigger Alibaba Cloud Captcha</Button>
    </View>
  );
}

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

Alipay mini program

Alibaba Cloud Captcha H5 page example (Alipay mini program):

<!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);
                // Notify the mini program of the secondary authentication parameter captchaVerifyParam.
                my.postMessage({ data: captchaVerifyParam });
                my.navigateBack();
            }

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

Alipay mini program native language

Note

Download demo: alipay.zip.

Create a mini program page for Alibaba Cloud Captcha:

// pages/AliyunCaptcha/AliyuCaptcha.js
Page({
  data: {
    webViewSrc: 'https://your-captcha-page/index.html'
  },
  onMessage(e) {
    const captchaVerifyParam = e.detail.data;
    // Use the event channel to trigger the 'getCaptchaVerifyParam' event defined in the service page and send out the verification parameter.
    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>

Add the page path to `page.json`:

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

Trigger a redirect to the Captcha page from your service page:

// pages/index/index.js
Page({
  openAliyunCaptcha() {
    my.navigateTo({
      url: "/pages/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
          console.log('Captcha return result:', captchaVerifyParam)
          // Initiate secondary authentication.
        }
      }
    })
  }
});

<!--page/index/index.axml-->
<button bindtap="openAliyunCaptcha">Redirect to Alibaba Cloud Captcha H5</button>

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

uni-app integration

Note

Download demo: uniapp_alipay.zip.

Create a mini program page for Alibaba Cloud Captcha:

<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();
			  // Use the event channel to trigger the 'getCaptchaVerifyParam' event defined in the service page and send the verification parameter to the service page.
              eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

Add the page path to `page.json`:

{
	"pages": [
		{
			"path": "pages/AliyunCaptcha/AliyunCaptcha",
			"style": 
			{
				"navigationBarTitleText": "Alibaba Cloud Captcha Mini Program H5"
			}
		}
	]
}

Trigger a redirect to the Captcha page from your service page:

<template>
	<button @click="handleClickAliyunCaptcha">Trigger Alibaba Cloud Captcha</button>
</template>

<script>
	export default {
		methods: {
			handleClickAliyunCaptcha(){
				uni.navigateTo({
					url:'/pages/AliyunCaptcha/AliyunCaptcha',
					events: {
						getCaptchaVerifyParam: (captchaVerifyParam) => {
						  // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
						  console.log('Captcha return result:', captchaVerifyParam)
						  // Initiate secondary authentication.
						}
					}
				});
			}
		}
	}
</script>

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.

Taro integration

Note

Download demo: taro_alipay.zip.

Create a mini program page for Alibaba Cloud Captcha:

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;
    // Use the event channel to trigger the 'getCaptchaVerifyParam' event listened for in the service page and send the verification parameter to the service page.
    const eventChannel = Taro.getCurrentInstance().page.getOpenerEventChannel();
    eventChannel && eventChannel.emit('getCaptchaVerifyParam', captchaVerifyParam);
  };

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

Add the page path to `app.config.js`:

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

Trigger a redirect to the Captcha page from your service page:

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

export default function Index() {
  const handleClickAliyunCaptcha = () => {
    // Redirect to the Alibaba Cloud Captcha page.
    Taro.navigateTo({
      url: '/pages/AliyuCaptcha/AliyunCaptcha',
      events: {
        getCaptchaVerifyParam: function(captchaVerifyParam) {
          // Define a getCaptchaVerifyParam event to get the secondary authentication parameter captchaVerifyParam.
          console.log('Captcha return result:', captchaVerifyParam);
          // Initiate secondary authentication.
        },
      },
    });
  };

  return (
    <View>
      <Button onClick={handleClickAliyunCaptcha}>Trigger Alibaba Cloud Captcha</Button>
    </View>
  );
}

After verification succeeds on the H5 page, the page redirects back to your service page with the secondary authentication parameter. Then, perform secondary authentication or other business logic.