Captcha:WeChat ミニプログラムへの Captcha 2.0 の統合

前提条件

• Captcha 2.0 がアクティブ化されています。

• クライアントタイプが WeChat ミニプログラムに設定されている検証シナリオが作成されています。

ネイティブ言語を使用して開発された WeChat ミニプログラムへの Captcha 2.0 の統合

WeChat ミニプログラムで Captcha 2.0 プラグインを使用するには、まずプラグインを WeChat ミニプログラムに追加する必要があります。プラグインを追加するには、次の操作を実行します。ミニプログラム管理コンソールにログインします。左側のナビゲーションウィンドウで、[設定] をクリックします。表示されるページで、[サードパーティサービス] タブをクリックします。[プラグイン管理] セクションで、Captcha 2.0 プラグインを追加します。 アプリ ID wxbe275ff84246f1a4 を使用して Captcha 2.0 プラグインを検索できます。

手順 1: プラグインの統合

1. Captcha 2.0 プラグインを宣言します。

   WeChat ミニプログラムで Captcha 2.0 プラグインを使用するには、app.json プロジェクトファイルでプラグインを宣言する必要があります。次のコードは、プラグインを宣言する方法の例を示しています。

   説明

   注:詳細基本情報プラグイン情報Captcha 2.0 プラグインの最新バージョンを使用することをお勧めします。 Captcha 2.0 プラグインの最新バージョンを照会するには、次の操作を実行します。 にログインします。右上隅にある アイコンをクリックします。表示されるパネルで、 タブをクリックします。 パラメーターで Captcha 2.0 プラグインの最新バージョンを表示できます。

   {
     "plugins": {
       "AliyunCaptcha": {
         "version": "2.2.1", // Captcha 2.0 プラグインの最新バージョンを指定します。
         "provider": "wxbe275ff84246f1a4"
       }
     }
   }

2. Captcha 2.0 プラグインのコンポーネントを宣言します。

   Captcha 2.0 プラグインのカスタムコンポーネントを使用するには、plugin:// プロトコルを使用して、コンポーネントの json ファイルまたはコンポーネントが使用されているページでプラグインの参照名とカスタムコンポーネント名を指定する必要があります。次のコードは、プラグインのコンポーネントを宣言する方法の例を示しています。

   {
     "usingComponents": {
       "aliyun-captcha": "plugin://AliyunCaptcha/captcha"
     }
   }

手順 2: テンプレートの挿入

aliyun-captcha テンプレートを WXML に挿入します。次のサンプルコードのパラメーターを渡す必要があります。

サンプルコードでは、ログインシナリオが使用されています。

<view class="captchapage-container">
  <view class="input-group">
    <view class="label">ユーザー名:</view>
    <input class="input" type="text" placeholder="ユーザー名を入力してください" bindinput="inputUsername" />
  </view>
  <view class="input-group">
    <view class="label">パスワード:</view>
    <input class="input" type="password" placeholder="パスワードを入力してください" bindinput="inputPassword" />
  </view>
  <aliyun-captcha id="captcha-element" wx:if="{{loadCaptcha}}" props="{{pluginProps}}" />
  <!-- ログインメソッドをログインボタンに関連付けます。ログインボタンをクリックすると、login メソッドが呼び出され、次にプラグインメソッドが呼び出されて CAPTCHA が表示されます。 -->
  <button class="login-btn" bindtap="login">ログイン</button>
</view>

手順 3: プラグインの初期化

setData メソッドを呼び出して、必要なパラメーターを渡してプラグインを初期化します。

サンプルコードでは、ログインシナリオが使用されています。

// Captcha 2.0 プラグインを取得します。
var AliyunCaptchaPluginInterface = requirePlugin('AliyunCaptcha');

// ビジネスリクエストの CAPTCHA 検証リクエストを開始するために使用されるコールバック関数。
/**
 * @name captchaVerifyCallback
 * @function
 * リクエストパラメーター：CAPTCHA スクリプトによってコールバックされる検証パラメーター。このパラメーターは、変更せずにビジネスサーバーに直接渡すことができます。
 * @params {string} captchaVerifyParam
 * レスポンスパラメーター：パラメーター名は固定です。 captchaResult パラメーターは必須です。ビジネス検証が含まれていない場合、bizResult パラメーターはオプションです。
 * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}} 
 */
var captchaVerifyCallback = async function (captchaVerifyParam) {
  console.log(this.data);
  // ビジネスリクエストコード。
  const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      data: {
        captchaVerifyParam, // 検証パラメーターを指定します。
        userName: this.data.username, // this.data を使用してビジネスデータを取得します。
        password: this.data.password,
      },
    });
  console.log(captchaVerifyParam);
  return {
    captchaResult: result.captchaVerifyResult, // 必須。CAPTCHA 検証に合格したかどうかを示します。値は BOOLEAN 型です。
    bizResult: returns the business verification result, // オプション。ビジネス検証に合格したかどうかを示します。値は BOOLEAN 型です。ビジネス検証が含まれていない場合、bizResult パラメーターは空のままにします。
  };
};

// ビジネスリクエストの結果を処理するために使用されるコールバック関数。
var onBizResultCallback = function (bizResult) {
  if (bizResult === true) {
    // ビジネス検証に合格した場合の処理ロジック。この例では、次のメッセージが表示されます。
    wx.showToast({
      title: 'ビジネス検証に合格しました。',
      duration: 2000,
      icon: 'success',
    });
  } else {
  // ビジネス検証に失敗した場合の処理ロジック。この例では、次のメッセージが表示されます。
    wx.showToast({
      title: 'ビジネス検証に失敗しました。',
      duration: 2000,
      icon: 'error',
    });
  }
};

async function customFetch(url, option) {
  option.url = url;
  return new Promise((resolve, reject) => {
    wx.request({
      ...option,
      success(res) {
        resolve(res.data);
      },
      fail(res) {
        reject(new Error(res.toString()));
      },
    });
  });
}

// ページロジック。
Page({
  data: {
    username: '',
    password: '',
    loadCaptcha: false, // CAPTCHA をロードするかどうかを指定します。
  },
  onLoad: function(options) {
    // プラグインパラメーターを構築します。
    var pluginProps = {
      SceneId: 'xxxxx',
      mode: 'popup',
      // パラメーター値は固定です。コールバック関数は this にバインドする必要があります。これにより、this が現在のページの同じコンテキストを示すことが保証されます。このようにして、コールバック関数は this.data を使用してビジネスパラメーターを取得できます。
      captchaVerifyCallback: captchaVerifyCallback.bind(this), 
      // パラメーター値は固定です。コールバック関数は this にバインドする必要があります。これにより、this が現在のページの同じコンテキストを示すことが保証されます。このようにして、コールバック関数は this.data を使用してビジネスパラメーターを取得できます。
      onBizResultCallback: onBizResultCallback.bind(this), 
      slideStyle: {
        width: 540, // スライダ CAPTCHA のデフォルトの幅は 540 ピクセルです。
        height: 60, // スライダ CAPTCHA のデフォルトの高さは 60 ピクセルです。
      },
      language: 'cn',
      region: 'cn',
    };
    this.setData({
      loadCaptcha: true, // CAPTCHA をロードまたはリロードするかどうかを指定します。
      pluginProps,
    });
  },
  inputUsername: function(e) {
    this.setData({
      username: e.detail.value
    });
  },
  inputPassword: function(e) {
    this.setData({
      password: e.detail.value
    });
  },
  login: function() {
    const { username, password } = this.data;
    // ビジネス要件に基づいてビジネス検証を実装します。
    if (username && password) {
      // プラグインメソッドを使用してポップアップ CAPTCHA を表示します。
      AliyunCaptchaPluginInterface.show();
    } else {
      wx.showToast({
        title: 'ユーザー名とパスワードを入力してください',
        icon: 'none'
      });
    }
  },
})

Taro フレームワークを使用して開発された WeChat ミニプログラムへの Captcha 2.0 プラグインの統合

手順 1: プラグインの統合

1. Captcha 2.0 プラグインを宣言します。

   WeChat ミニプログラムで Captcha 2.0 プラグインを使用するには、Taro プロジェクトの app.config.js ファイルでプラグインを宣言する必要があります。次のコードは、プラグインを宣言する方法の例を示しています。

   説明

   WordPress 管理画面詳細ヒント:投稿Captcha 2.0 プラグインの最新バージョンを使用することをお勧めします。 Captcha 2.0 プラグインの最新バージョンを照会するには、次の操作を実行します。 にログインします。右上隅にある アイコンをクリックします。表示されるパネルで、 タブをクリックします。 パラメーターで Captcha 2.0 プラグインの最新バージョンを表示できます。

   {
     "plugins": {
       "AliyunCaptcha": {
         "version": "2.2.1", // Captcha 2.0 プラグインの最新バージョンを指定します。
         "provider": "wxbe275ff84246f1a4"
       }
     }
   }

2. Captcha 2.0 プラグインのコンポーネントを宣言します。

   Captcha 2.0 プラグインのカスタムコンポーネントを使用するには、plugin:// プロトコルを使用して、コンポーネントの index.config.js ファイルまたはコンポーネントが使用されているページでプラグインの参照名とカスタムコンポーネント名を指定する必要があります。次のコードは、プラグインのコンポーネントを宣言する方法の例を示しています。

   export default {
     usingComponents: {
       'aliyun-captcha': 'plugin://AliyunCaptcha/captcha',
     },
   };
   

手順 2: 初期化コードの統合

サンプルコードでは、ログインシナリオが使用されています。

import Taro from '@tarojs/taro';
import { useEffect, useState, useRef } from 'react';
import { View, Text, Input, Button, Form } from '@tarojs/components';
import './index.scss';

// Captcha 2.0 プラグインを取得します。
const AliyunCaptchaPluginInterface = Taro.requirePlugin('AliyunCaptcha');

// captchaVerifyCallback 関数が呼び出されたときにビジネスパラメーターが使用可能であることを確認するために、グローバル変数を使用してビジネスパラメーターを維持する必要があります。 state 変数のみを使用してビジネスパラメーターを維持することはできません。
// let userName = '';
// let passWord = '';

function Index() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loadCaptcha, setLoadCaptcha] = useState(false);
  // ref 変数を使用してビジネスパラメーターを維持することをお勧めします。
  const bizParams = useRef({
    username: '',
    password: '',
  });

  useEffect(() => {
    setLoadCaptcha(true); // CAPTCHA をロードまたはリロードするかどうかを指定します。
  }, []);

  const handleUsernameChange = (e) => {
    setUsername(e.target.value); // state 変数を変更します。
    bizParams.current.username = e.target.value; // state 変数と一緒に ref 変数を変更します。
    // userName = e.target.value; // あるいは、グローバル変数を変更します。
  };
  
  const handlePasswordChange = (e) => {
    setPassword(e.target.value); // state 変数を変更します。
    bizParams.current.password = e.target.value; // state 変数と一緒に ref 変数を変更します。
    // passWord = e.target.value; // あるいは、グローバル変数を変更します。
  };

  const login = () => {
    // ビジネス要件に基づいてビジネス検証を実装します。
    if (username && password) {
      // プラグインメソッドを使用してポップアップ CAPTCHA を表示します。このメソッドを使用して、非表示の CAPTCHA をトリガーできます。
      AliyunCaptchaPluginInterface.show();
    } else {
      Taro.showToast({
        title: 'ユーザー名とパスワードを入力してください',
        icon: 'none'
      });
    } 
  }


  // ビジネスリクエストの CAPTCHA 検証リクエストを開始するために使用されるコールバック関数。
  /**
   * @name captchaVerifyCallback
   * @function
   * リクエストパラメーター：CAPTCHA スクリプトによってコールバックされる検証パラメーター。このパラメーターは、変更せずにビジネスサーバーに直接渡すことができます。
   * @params {string} captchaVerifyParam
   * レスポンスパラメーター：パラメーター名は固定です。 captchaResult パラメーターは必須です。ビジネス検証が含まれていない場合、bizResult パラメーターはオプションです。
   * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}} 
   */
  async function captchaVerifyCallback(captchaVerifyParam) {
    console.log(bizParams.current); // ref 変数に格納されているビジネスパラメーターを使用します。
    // console.log(userName, passWord); // あるいは、グローバル変数に格納されているビジネスパラメーターを使用します。
    // ビジネスリクエストコード。
    const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      mode: 'cors',
      enableHttp2: true,
      enableQuic: true,
      data: {
        captchaVerifyParam, // 検証パラメーターを指定します。
        userName: bizParams.current.username, // ref 変数を使用してビジネスデータを取得します。
        password: bizParams.current.password, // ref 変数を使用してビジネスデータを取得します。
        // あるいは、グローバル変数を使用してビジネスデータを取得します。
        // username: userName, // グローバル変数を使用してビジネスデータを取得します。
        // password: passWord, // グローバル変数を使用してビジネスデータを取得します。
      },
    });
    return {
      captchaResult: result.captchaVerifyResult, // 必須。CAPTCHA 検証に合格したかどうかを示します。値は BOOLEAN 型です。
      bizResult: returns the business verification result, // オプション。ビジネス検証に合格したかどうかを示します。値は BOOLEAN 型です。ビジネス検証が含まれていない場合、bizResult パラメーターは空のままにします。
    };
  }

  // ビジネスリクエストの結果を処理するために使用されるコールバック関数。
  function onBizResultCallback(bizResult) {
    if (bizResult === true) {
      // ビジネス検証に合格した場合の処理ロジック。この例では、次のメッセージが表示されます。
      Taro.showToast({
        title: 'ビジネス検証に合格しました。',
        duration: 2000,
        icon: 'success',
      });
    } else {
    // ビジネス検証に失敗した場合の処理ロジック。この例では、次のメッセージが表示されます。
      Taro.showToast({
        title: 'ビジネス検証に失敗しました。',
        duration: 2000,
        icon: 'error',
      });
    }
  }

  async function customFetch(url, option) {
    option.url = url;
    return new Promise((resolve, reject) => {
      Taro.request({
        ...option,
        success(res) {
          resolve(res.data);
        },
        fail(res) {
          reject(new Error(res.toString()));
        },
      });
    });
  }
  
  // プラグインパラメーターを構築します。
  const pluginProps = {
    SceneId: 'xxxxx',
    mode: 'popup',
    captchaVerifyCallback,
    onBizResultCallback,
    slideStyle: {
      width: 540, // スライダ CAPTCHA のデフォルトの幅は 540 ピクセルです。
      height: 60, // スライダ CAPTCHA のデフォルトの高さは 60 ピクセルです。
    },
    language: 'cn',
    region: 'cn',
  };

  return (
    <View className="captcha-page">
      <Form>
        <View className="input-group">
          <Text>ユーザー名:</Text>
          <Input
            type="text"
            placeholder="ユーザー名を入力してください"
            value={username}
            onInput={handleUsernameChange}
          />
        </View>
        <View className="input-group">
          <Text>パスワード:</Text>
          <Input
            type="password"
            placeholder="パスワードを入力してください"
            value={password}
            onInput={handlePasswordChange}
          />
        </View>
        {/* ログインメソッドをログインボタンに関連付けます。ログインボタンをクリックすると、login メソッドが呼び出され、次にプラグインメソッドが呼び出されて CAPTCHA が表示されます。 */}
        <Button style={{ margin: '20px' }} id="captcha-button" onClick={login}>ログイン</Button>
      </Form>
      {loadCaptcha && <aliyun-captcha id="captcha-element" props={pluginProps} />}
    </View>
  );
}

export default Index;

推奨される Taro ツール

Taro はファイル圧縮に Webpack のみをサポートしています。最適な互換性を確保するために、新しいプロジェクトでは Webpack を優先することをお勧めします。既存のプロジェクトで Webpack を優先する場合、互換性の問題が発生します。この場合、互換性ソリューションに基づいて Captcha 2.0 の WXML 要素を dist に追加できます。

1. Vite を使用して Captcha 2.0 を WeChat ミニプログラムに統合するときに報告される次の互換性エラーメッセージを参照してください。

2. 次のコードを dist/base.wxml ファイルに追加します。

   <template name="tmpl_0_aliyun-captcha">
     <aliyun-captcha
       props="{{i.props}}"
       id="{{i.uid||i.sid}}"
       data-sid="{{i.sid}}"
     >
       <block wx:for="{{i.cn}}" wx:key="sid">
         <template
           is="{{xs.a(c, item.nn, l)}}"
           data="{{i:item,c:c+1,l:xs.f(l,item.nn)}}"
         />
       </block>
     </aliyun-captcha>
   </template>

uni-app フレームワークを使用して開発された WeChat ミニプログラムへの Captcha 2.0 の統合

uni-app フレームワークでは、Vue 2 と Vue 3 がサポートされています。このセクションでは、Vue 3 を例として使用します。

手順 1: プラグインの統合

1. Captcha 2.0 プラグインを宣言します。

   WeChat ミニプログラムで Captcha 2.0 プラグインを使用するには、uni-app プロジェクトの manifest.json ファイルでプラグインを宣言する必要があります。次のコードは、プラグインを宣言する方法の例を示しています。

   説明

   ヒント:注:基本情報プラグイン情報Captcha 2.0 プラグインの最新バージョンを使用することをお勧めします。 Captcha 2.0 プラグインの最新バージョンを照会するには、次の操作を実行します。 にログインします。右上隅にある アイコンをクリックします。表示されるパネルで、 タブをクリックします。 パラメーターで Captcha 2.0 プラグインの最新バージョンを表示できます。

   "mp-weixin": {
     "plugins": {
       "AliyunCaptcha": {
         "version": "2.2.1",
         "provider": "wxbe275ff84246f1a4",
       }
     }
   }

2. Captcha 2.0 プラグインのコンポーネントを宣言します。

   一般的なカスタムコンポーネントを使用するのと同じ方法で、Captcha 2.0 プラグインのカスタムコンポーネントを使用できます。詳細については、「カスタムコンポーネント」をご参照ください。 Captcha 2.0 プラグインのカスタムコンポーネントを使用するには、関連ページの page.json ファイルの style ノードで、plugin:// プロトコルを使用してプラグインの参照名とカスタムコンポーネント名を指定する必要があります。次のコードは、プラグインのコンポーネントを宣言する方法の例を示しています。

   {
     "path": "pages/CaptchaPage",
     "style": {
       "mp-weixin": {
           "usingComponents": {
               "aliyun-captcha": "plugin://AliyunCaptcha/captcha"
           }
       }
     }
   }

手順 2: 初期化コードの統合

aliyun-captcha コンポーネントを <template> セクションに追加します .vue ファイルで。 Captcha 2.0 プラグインを使用するには、<script> セクションでプラグインを初期化します。

サンプルコードでは、ログインシナリオが使用されています。

<template>
  <view class="captchapage-container">
    <view class="input-group">
      <view class="label">ユーザー名:</view>
      <input
        class="input"
        type="text"
        placeholder="ユーザー名を入力してください"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">パスワード:</view>
      <input
        class="input"
        type="password"
        placeholder="パスワードを入力してください"
        @input="inputPassword"
      />
    </view>
    <aliyun-captcha
      id="captcha-element"
      v-if="data.loadCaptcha"
      :props="data.pluginProps"
    />
    <button class="login-btn" @click="login">ログイン</button>
  </view>
</template>

<script>
  // Captcha 2.0 プラグインを取得します。
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // ビジネスリクエストの CAPTCHA 検証リクエストを開始するために使用されるコールバック関数。
  /**
   * @name captchaVerifyCallback
   * @function
   * リクエストパラメーター：CAPTCHA スクリプトによってコールバックされる検証パラメーター。このパラメーターは、変更せずにビジネスサーバーに直接渡すことができます。
   * @params {string} captchaVerifyParam
   * レスポンスパラメーター：パラメーター名は固定です。 captchaResult パラメーターは必須です。ビジネス検証が含まれていない場合、bizResult パラメーターはオプションです。
   * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}}
   */
  var captchaVerifyCallback = async function (captchaVerifyParam) {
    console.log(this.data);
    // ビジネスリクエストコード。
    const result = await customFetch("https://xxxx/demo/bizquery", {
      method: "POST",
      data: {
        captchaVerifyParam, // 検証パラメーターを指定します。
        userName: this.data.username, // this.data を使用してビジネスデータを取得します。
        password: this.data.password,
      },
    });
    console.log(captchaVerifyParam);
    return {
      captchaResult: result.captchaVerifyResult, // 必須。CAPTCHA 検証に合格したかどうかを示します。値は BOOLEAN 型です。
      bizResult: returns the business verification result, // オプション。ビジネス検証に合格したかどうかを示します。値は BOOLEAN 型です。ビジネス検証が含まれていない場合、bizResult パラメーターは空のままにします。
    };
  };

  // ビジネスリクエストの結果を処理するために使用されるコールバック関数。
  var onBizResultCallback = function (bizResult) {
    if (bizResult === true) {
      // ビジネス検証に合格した場合の処理ロジック。この例では、次のメッセージが表示されます。
      uni.showToast({
        title: "ビジネス検証に合格しました。",
        duration: 2000,
        icon: "success",
      });
    } else {
      // ビジネス検証に失敗した場合の処理ロジック。この例では、次のメッセージが表示されます。
      uni.showToast({
        title: "ビジネス検証に失敗しました。",
        duration: 2000,
        icon: "error",
      });
    }
  };

  async function customFetch(url, option) {
    option.url = url;
    return new Promise((resolve, reject) => {
      uni.request({
        ...option,
        success(res) {
          resolve(res.data);
        },
        fail(res) {
          reject(new Error(res.toString()));
        },
      });
    });
  }

  export default {
    data() {
      return {
        data: {
          username: "",
          password: "",
          loadCaptcha: false,
        },
      };
    },
    onLoad(options) {
      console.log(AliyunCaptchaPluginInterface);
      var pluginProps = {
        SceneId: "xxxxx",
        mode: "popup",
        captchaVerifyCallback: captchaVerifyCallback.bind(this), // パラメーター値は固定です。コールバック関数は this にバインドする必要があります。
        onBizResultCallback: onBizResultCallback.bind(this), // パラメーター値は固定です。コールバック関数は this にバインドする必要があります。
        slideStyle: {
          width: 540, // スライダ CAPTCHA のデフォルトの幅は 540 ピクセルです。
          height: 60, // スライダ CAPTCHA のデフォルトの高さは 60 ピクセルです。
        },
        language: "cn",
        region: "cn",
      };
      // Captcha 2.0 プラグインを初期化します。
      data.loadCaptcha = true; // CAPTCHA をロードまたはリロードするかどうかを指定します。
      this.setData({
        loadCaptcha: true, // CAPTCHA をロードまたはリロードするかどうかを指定します。
        pluginProps,
      });
    },
    methods: {
      inputUsername(e) {
        this.setData({
          username: e.detail.value,
        });
      },
      inputPassword(e) {
        this.setData({
          password: e.detail.value,
        });
      },
      login() {
        const { username, password } = this.data;
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({
            title: "ユーザー名とパスワードを入力してください",
            icon: "none",
          });
        }
      },
    },
  };
</script>

関連トピック