Webview+H5 を使用してミニプログラムを V3 アーキテクチャと統合する - Captcha

Captcha コンソールで検証シナリオを作成した後、検証機能を使用するミニプログラムページに Captcha 初期化コードを統合する必要があります。このトピックでは、Webview+H5 を使用して WeChat ミニプログラムと Alipay ミニプログラムを V3 アーキテクチャと統合する方法について説明します。

前提条件

Captcha 2.0 サービスを有効化していること。
検証シナリオを作成し、Integration Method を [Webview+H5] (Supports apps and mini-programs) に設定していること。

Captcha の統合

Alibaba Cloud Captcha は、WebView コンポーネントを使用して Captcha H5 ページを読み込み、検証を行います。このプロセスにより、二次認証に必要な `captchaVerifyParam` が取得されます。

Alibaba Cloud Captcha WebView ページをミニプログラムプロジェクトにインポートし、Captcha H5 ページをサイトにデプロイする必要があります。また、ミニプログラムのバックエンド設定で、この Captcha ページのサービス ドメイン名 を設定する必要もあります。

統合手順

管理している HTTPS サーバーに Alibaba Cloud Captcha ページをアップロードします。これは、標準の Web サーバー、OSS、または CDN のいずれでもかまいませんが、ページが `text/html` の Content-Type で HTTPS 経由でアクセスできる必要があります。
H5 ページのドメイン名を、WeChat ミニプログラム管理コンソールまたは Alipay ミニプログラム管理コンソールでサービスドメイン名として設定します。詳細については、「サービスドメイン名を追加する (WeChat ミニプログラム)」および「H5 ドメイン名を設定する (Alipay ミニプログラム)」をご参照ください。
Alibaba Cloud Captcha ページを作成し、WebView コンポーネントを使用して Captcha をミニプログラムにインポートします。
サービスページから、Alibaba Cloud Captcha ページへのリダイレクトをトリガーします。検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

統合例

説明

この例では、Captcha V3 アーキテクチャとの統合方法を示します。

WeChat ミニプログラム

Alibaba Cloud Captcha H5 ページの例 (WeChat ミニプログラム):

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

WeChat ミニプログラムのネイティブ言語

説明

デモのダウンロード: weixin.zip。

Alibaba Cloud Captcha 用のミニプログラムページを作成します:

// 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/AliyunCaptcha.wxml-->
<view>
  <web-view src="{{webViewSrc}}" bindmessage="onMessage"></web-view>
</view>

`page.json` にページパスを追加します:

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

サービスページから Captcha ページへのリダイレクトをトリガーします:

// main/BizPage/BizPage.js
Page({
  openAliyunCaptcha() {
    // 必要に応じて Alibaba Cloud Captcha ページへのリダイレクトをトリガーします。
    wx.navigateTo({ 
      url: "/main/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
          console.log('Captcha return result:', captchaVerifyParam)
          // 二次認証を開始します。
        }
      }
    })
  }
})

<!--main/BizPage/BizPage.wxml-->
<button bindtap="openAliyunCaptcha">Alibaba Cloud Captcha H5 にリダイレクト</button>

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

uni-app の統合

説明

デモのダウンロード: uniapp.zip。

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();
			  // イベントチャンネルを使用して、サービスページで定義された 'getCaptchaVerifyParam' イベントをトリガーし、検証パラメーターをサービスページに送信します。
			  eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

`page.json` にページパスを追加します:

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

サービスページから Captcha ページへのリダイレクトをトリガーします:

<template>
	<button @click="handleClickAliyunCaptcha">Alibaba Cloud Captcha をトリガー</button>
</template>

<script>
	export default {
		methods: {
			handleClickAliyunCaptcha(){
				uni.navigateTo({
					url:'/pages/AliyunCaptcha/AliyunCaptcha',
					events: {
						getCaptchaVerifyParam: (captchaVerifyParam) => {
						  // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
						  console.log('Captcha return result:', captchaVerifyParam)
						  // 二次認証を開始します。
						}
					}
				});
			}
		}
	}
</script>

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

Taro の統合

説明

デモのダウンロード: taro.zip。

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];
    // イベントチャンネルを使用して、サービスページでリッスンされている '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'
  ],
})

サービスページから Captcha ページへのリダイレクトをトリガーします:

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

export default function Index() {
  const handleClickAliyunCaptcha = () => {
    // Alibaba Cloud Captcha ページにリダイレクトします。
    Taro.navigateTo({
      url: '/pages/AliyuCaptcha/AliyunCaptcha',
      events: {
        getCaptchaVerifyParam: function(captchaVerifyParam) {
          // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
          console.log('Captcha return result:', captchaVerifyParam);
          // 二次認証を開始します。
        },
      },
    });
  };

  return (
    <View>
      <Button onClick={handleClickAliyunCaptcha}>Alibaba Cloud Captcha をトリガー</Button>
    </View>
  );
}

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

Alipay ミニプログラム

Alibaba Cloud Captcha H5 ページの例 (Alipay ミニプログラム):

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

Alipay ミニプログラムのネイティブ言語

説明

デモのダウンロード: alipay.zip。

Alibaba Cloud Captcha 用のミニプログラムページを作成します:

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

サービスページから Captcha ページへのリダイレクトをトリガーします:

// pages/index/index.js
Page({
  openAliyunCaptcha() {
    my.navigateTo({
      url: "/pages/AliyunCaptcha/AliyuCaptcha",
      events: {
        getCaptchaVerifyParam: (captchaVerifyParam) => {
          // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
          console.log('Captcha return result:', captchaVerifyParam)
          // 二次認証を開始します。
        }
      }
    })
  }
});

<!--page/index/index.axml-->
<button bindtap="openAliyunCaptcha">Alibaba Cloud Captcha H5 にリダイレクト</button>

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

uni-app の統合

説明

デモのダウンロード: uniapp_alipay.zip。

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();
			  // イベントチャンネルを使用して、サービスページで定義された 'getCaptchaVerifyParam' イベントをトリガーし、検証パラメーターをサービスページに送信します。
              eventChannel && eventChannel.emit('getCaptchaVerifyParam',captchaVerifyParam);
			}
		}
	}
</script>

`page.json` にページパスを追加します:

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

サービスページから Captcha ページへのリダイレクトをトリガーします:

<template>
	<button @click="handleClickAliyunCaptcha">Alibaba Cloud Captcha をトリガー</button>
</template>

<script>
	export default {
		methods: {
			handleClickAliyunCaptcha(){
				uni.navigateTo({
					url:'/pages/AliyunCaptcha/AliyunCaptcha',
					events: {
						getCaptchaVerifyParam: (captchaVerifyParam) => {
						  // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
						  console.log('Captcha return result:', captchaVerifyParam)
						  // 二次認証を開始します。
						}
					}
				});
			}
		}
	}
</script>

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。

Taro の統合

説明

デモのダウンロード: taro_alipay.zip。

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;
    // イベントチャンネルを使用して、サービスページでリッスンされている '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'
  ],
})

サービスページから Captcha ページへのリダイレクトをトリガーします:

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

export default function Index() {
  const handleClickAliyunCaptcha = () => {
    // Alibaba Cloud Captcha ページにリダイレクトします。
    Taro.navigateTo({
      url: '/pages/AliyuCaptcha/AliyunCaptcha',
      events: {
        getCaptchaVerifyParam: function(captchaVerifyParam) {
          // getCaptchaVerifyParam イベントを定義して、二次認証パラメーター captchaVerifyParam を取得します。
          console.log('Captcha return result:', captchaVerifyParam);
          // 二次認証を開始します。
        },
      },
    });
  };

  return (
    <View>
      <Button onClick={handleClickAliyunCaptcha}>Alibaba Cloud Captcha をトリガー</Button>
    </View>
  );
}

H5 ページで検証が成功すると、ページは二次認証パラメーターとともにサービスページにリダイレクトされます。その後、二次認証またはその他のビジネスロジックを実行します。