WeChat ミニプログラムプラグイン統合 (V3) - Captcha - Alibaba Cloud ドキュメントセンター

コンソールで検証シナリオを作成した後、検証が必要な WeChat ミニプログラムページに CAPTCHA 初期化コードを統合します。本ガイドでは、ネイティブ WeChat ミニプログラム、Taro (React)、uni-app (Vue3) の 3 つのフレームワークについて説明します。

重要

サーバー側での検証は必須です。captchaVerifyParam をご利用のサーバーに渡し、CAPTCHA 検証 API を呼び出すことで、ボットのトラフィックを実際に防止できます。クライアントプラグイン単体では保護機能を提供しません。

前提条件

作業を開始する前に、以下の条件を満たしていることを確認してください。

Alibaba Cloud Captcha 2.0 を有効化していること
クライアントタイプとして WeChat ミニプログラムを指定して検証シナリオを作成していること
ミニプログラム管理コンソールでプラグインを追加するには、[設定] > [サードパーティサービス] > [プラグイン管理] に移動し、AppID wxbe275ff84246f1a4 を検索して追加します。

アーキテクチャの選択

このプラグインは 2 種類のアーキテクチャをサポートしています。作業を進める前に、プロジェクト要件に基づいて適切なアーキテクチャを選択してください。

	V3 アーキテクチャ	V2 アーキテクチャ
成功コールバック	`success(captchaVerifyParam)`	`captchaVerifyCallback(captchaVerifyParam)`
結果コールバック	`fail(error)`	`onBizResultCallback(bizResult)`
サーバー検証	`captchaVerifyParam` をご利用のサーバーに渡すと、CAPTCHA 側で結果を処理します	`captchaVerifyCallback` から `{ captchaResult, bizResult? }`
再検証	成功後に `reloadCaptcha` を呼び出します	不要 (`onBizResultCallback` で処理されます)

ネイティブ WeChat ミニプログラムへの統合

手順 1：プラグインの宣言とコンポーネントのインポート

app.json 内の plugins セクションでプラグインを宣言します。

V3 アーキテクチャ

{
  "plugins": {
    "AliyunCaptcha": {
      "version": "3.0.0",
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

V2 アーキテクチャ

{
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.3.0",
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

常に最新のプラグインバージョンを使用してください。現在のバージョンは、WeChat Developer Tools > 詳細 > 基本情報 > プラグイン情報 で確認できます。

ご利用のページまたはコンポーネントの .json ファイルで、plugin:// プロトコルを使用してカスタムコンポーネントをインポートします。

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

手順 2：コンポーネントテンプレートの挿入

.wxml ファイルに <aliyun-captcha> コンポーネントを追加します。以下の例はログインページを示しています。

<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}}" />
  <!-- ボタンがクリックされたら、プラグインインスタンスメソッドを呼び出して CAPTCHA を表示します。 -->
  <button class="login-btn" bindtap="login">ログイン</button>
</view>

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

必要な初期化パラメーターを指定して setData を呼び出します。以下の例はログインシナリオを示しています。

V3 アーキテクチャ

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

// 検証成功時のコールバック関数。
// captchaVerifyParam: これをそのままご利用のサーバーに渡して二次検証を行います。
var success = async function (captchaVerifyParam) {
  // 検証成功後、CAPTCHA をアンインストールします。
  this.setData({ loadCaptcha: false });
  // ビジネスリクエストコード...
  const result = await customFetch('https://xxxx/demo/bizquery', {
    method: 'POST',
    data: {
      captchaVerifyParam, // 必須: サーバー検証のために渡します。
      userName: this.data.username,
      password: this.data.password,
    },
  });
};

// 検証失敗時のコールバック関数。
var fail = function (error) {
  console.error(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,
  },
  onLoad: function (options) {
    var pluginProps = {
      SceneId: '<your-scene-id>',
      mode: 'popup',
      // 固定構文: コールバック内で this.data にアクセスできるように this をバインドします。
      success: success.bind(this),
      fail: fail.bind(this),
      slideStyle: {
        width: 540,  // デフォルト: 540 rpx (最小値が適用されます)
        height: 60,  // デフォルト: 60 rpx
      },
      language: 'cn',
      region: 'cn',
    };
    this.setData({
      loadCaptcha: true,
      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) {
      // popup モードの場合、show() を呼び出して CAPTCHA を表示します。
      AliyunCaptchaPluginInterface.show();
    } else {
      wx.showToast({ title: 'ユーザー名とパスワードを入力してください。', icon: 'none' });
    }
  },
  // 成功後に再度検証をトリガーするにはこれを呼び出します。
  reloadCaptcha: function () {
    this.setData({ loadCaptcha: true });
  },
});

成功後に再度検証をトリガーするには、reloadCaptcha を呼び出してください。

V2 アーキテクチャ

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

// CAPTCHA 検証付きビジネスリクエストのコールバック。
// 戻り値: { captchaResult: boolean (必須), bizResult?: boolean (任意) }
var captchaVerifyCallback = async function (captchaVerifyParam) {
  const result = await customFetch('https://xxxx/demo/bizquery', {
    method: 'POST',
    data: {
      captchaVerifyParam,
      userName: this.data.username,
      password: this.data.password,
    },
  });
  return {
    captchaResult: result.captchaVerifyResult, // 必須の boolean 値。
    bizResult: /* 結果からビジネス検証結果を取得します。 */ undefined, // 任意の boolean 値。
  };
};

// ビジネス検証結果のコールバック。
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,
  },
  onLoad: function (options) {
    var pluginProps = {
      SceneId: '<your-scene-id>',
      mode: 'popup',
      // 固定構文: コールバック内で this.data にアクセスできるように this をバインドします。
      captchaVerifyCallback: captchaVerifyCallback.bind(this),
      onBizResultCallback: onBizResultCallback.bind(this),
      slideStyle: {
        width: 540,
        height: 60,
      },
      language: 'cn',
      region: 'cn',
    };
    this.setData({ loadCaptcha: true, 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) {
      AliyunCaptchaPluginInterface.show();
    } else {
      wx.showToast({ title: 'ユーザー名とパスワードを入力してください。', icon: 'none' });
    }
  },
});

Taro フレームワークミニプログラムへの統合

Taro による統合は React フレームワークのみをサポートしています。

手順 1：プラグインの宣言とコンポーネントのインポート

app.config.js 内の plugins セクションでプラグインを宣言します。

V3 アーキテクチャ

{
  "plugins": {
    "AliyunCaptcha": {
      "version": "3.0.0",
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

V2 アーキテクチャ

{
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.3.0",
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

常に最新のプラグインバージョンを使用してください。現在のバージョンは、WeChat Developer Tools > 詳細 > 基本情報 > プラグイン情報 で確認できます。

ご利用のページまたはコンポーネントの index.config.js でカスタムコンポーネントをインポートします。

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

手順 2：統合コードの追加

以下の例はログインシナリオを示しています。

V3 アーキテクチャ

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

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

function Index() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loadCaptcha, setLoadCaptcha] = useState(false);
  // コールバック内でビジネスパラメーターを維持するために ref を使用します (グローバル変数より推奨)。
  const bizParams = useRef({ username: '', password: '' });

  useEffect(() => {
    setLoadCaptcha(true);
  }, []);

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
    bizParams.current.username = e.target.value;
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
    bizParams.current.password = e.target.value;
  };

  const login = () => {
    if (username && password) {
      AliyunCaptchaPluginInterface.show();
    } else {
      Taro.showToast({ title: 'ユーザー名とパスワードを入力してください。', icon: 'none' });
    }
  };

  // 検証成功時のコールバック。
  // captchaVerifyParam: これをそのままご利用のサーバーに渡して二次検証を行います。
  async function success(captchaVerifyParam) {
    setLoadCaptcha(false);
    const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      mode: 'cors',
      enableHttp2: true,
      enableQuic: true,
      data: {
        captchaVerifyParam,
        userName: bizParams.current.username,
        password: bizParams.current.password,
      },
    });
  }

  function fail(error) {
    console.error(error);
  }

  // 成功後に再度検証をトリガーするにはこれを呼び出します。
  function reloadCaptcha() {
    setLoadCaptcha(true);
  }

  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: '<your-scene-id>',
    mode: 'popup',
    success,
    fail,
    slideStyle: {
      width: 540,
      height: 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>
        <Button style={{ margin: '20px' }} id="captcha-button" onClick={login}>ログイン</Button>
      </Form>
      {loadCaptcha && <aliyun-captcha id="captcha-element" props={pluginProps} />}
    </View>
  );
}

export default Index;

成功後に再度検証をトリガーするには、reloadCaptcha を呼び出してください。

V2 アーキテクチャ

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

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

function Index() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loadCaptcha, setLoadCaptcha] = useState(false);
  const bizParams = useRef({ username: '', password: '' });

  useEffect(() => {
    setLoadCaptcha(true);
  }, []);

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
    bizParams.current.username = e.target.value;
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
    bizParams.current.password = e.target.value;
  };

  const login = () => {
    if (username && password) {
      AliyunCaptchaPluginInterface.show();
    } else {
      Taro.showToast({ title: 'ユーザー名とパスワードを入力してください。', icon: 'none' });
    }
  };

  // CAPTCHA 検証付きビジネスリクエストのコールバック。
  // 戻り値: { captchaResult: boolean (必須), bizResult?: boolean (任意) }
  async function captchaVerifyCallback(captchaVerifyParam) {
    const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      mode: 'cors',
      enableHttp2: true,
      enableQuic: true,
      data: {
        captchaVerifyParam,
        userName: bizParams.current.username,
        password: bizParams.current.password,
      },
    });
    return {
      captchaResult: result.captchaVerifyResult,
      bizResult: /* 結果からビジネス検証結果を取得します。 */ undefined,
    };
  }

  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: '<your-scene-id>',
    mode: 'popup',
    captchaVerifyCallback,
    onBizResultCallback,
    slideStyle: {
      width: 540,
      height: 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>
        <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 を使用してください。

既存のプロジェクトで Vite を使用しており、切り替えが難しい場合は、WeChat Developer Tools で表示される互換性エラーを解決するために以下の回避策を使用してください。

パッケージ化済みプロジェクトの 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 ミニプログラムへの統合

uni-app は Vue2 および Vue3 をサポートしています。以下の例では Vue3 を使用しています。

手順 1：プラグインの宣言とコンポーネントのインポート

manifest.json 内の mp-weixin セクションでプラグインを宣言します。

V3 アーキテクチャ

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

V2 アーキテクチャ

{
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.3.0",
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

常に最新のプラグインバージョンを使用してください。現在のバージョンは、WeChat Developer Tools > 詳細 > 基本情報 > プラグイン情報 で確認できます。

CAPTCHA を使用するページの page.json で、style ノードの下にコンポーネントを登録します。

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

手順 2：統合コードの追加

.vue ファイルの <template> 内に <aliyun-captcha> を追加し、<script> 内でプラグインを初期化します。以下の例はログインシナリオを示しています。

V3 アーキテクチャ

<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 プラグインインスタンスを取得します。
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // 検証成功時のコールバック。
  // captchaVerifyParam: これをそのままご利用のサーバーに渡して二次検証を行います。
  var success = async function (captchaVerifyParam) {
    this.data.loadCaptcha = false;
    const result = await customFetch("https://xxxx/demo/bizquery", {
      method: "POST",
      data: {
        captchaVerifyParam,
        userName: this.data.username,
        password: this.data.password,
      },
    });
  };

  var fail = function (error) {
    console.error(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) {
      var pluginProps = {
        SceneId: "<your-scene-id>",
        mode: "popup",
        success: success.bind(this), // 固定構文: this をバインドします。
        fail: fail.bind(this),       // 固定構文: this をバインドします。
        slideStyle: {
          width: 540,
          height: 60,
        },
        language: "cn",
        region: "cn",
      };
      this.data.loadCaptcha = true;
      this.data.pluginProps = pluginProps;
    },
    methods: {
      inputUsername(e) {
        this.data.username = e.detail.value;
      },
      inputPassword(e) {
        this.data.password = e.detail.value;
      },
      login() {
        const { username, password } = this.data;
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({ title: "ユーザー名とパスワードを入力してください。", icon: "none" });
        }
      },
      // 成功後に再度検証をトリガーするにはこれを呼び出します。
      reloadCaptcha() {
        this.data.loadCaptcha = true;
      },
    },
  };
</script>

成功後に再度検証をトリガーするには、reloadCaptcha を呼び出してください。

V2 アーキテクチャ

<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 プラグインインスタンスを取得します。
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // CAPTCHA 検証付きビジネスリクエストのコールバック。
  // 戻り値: { captchaResult: boolean (必須), bizResult?: boolean (任意) }
  var captchaVerifyCallback = async function (captchaVerifyParam) {
    const result = await customFetch("https://xxxx/demo/bizquery", {
      method: "POST",
      data: {
        captchaVerifyParam,
        userName: this.data.username,
        password: this.data.password,
      },
    });
    return {
      captchaResult: result.captchaVerifyResult,
      bizResult: /* 結果からビジネス検証結果を取得します。 */ undefined,
    };
  };

  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) {
      var pluginProps = {
        SceneId: "<your-scene-id>",
        mode: "popup",
        captchaVerifyCallback: captchaVerifyCallback.bind(this), // 固定構文: this をバインドします。
        onBizResultCallback: onBizResultCallback.bind(this),     // 固定構文: this をバインドします。
        slideStyle: {
          width: 540,
          height: 60,
        },
        language: "cn",
        region: "cn",
      };
      this.data.loadCaptcha = true;
      this.data.pluginProps = pluginProps;
    },
    methods: {
      inputUsername(e) {
        this.data.username = e.detail.value;
      },
      inputPassword(e) {
        this.data.password = e.detail.value;
      },
      login() {
        const { username, password } = this.data;
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({ title: "ユーザー名とパスワードを入力してください。", icon: "none" });
        }
      },
    },
  };
</script>

Vue2 での統合も Vue3 と同様のパターンに従いますが、追加のパッチが必要です。patch.js をインポートし、CAPTCHA を使用するページでネイティブの __patch__ メソッドを置き換えます。1. パッチファイルをインポートします。2. beforeCreate フックの先頭で __patch__ を置き換えます。3. beforeDestroy フックで __patch__ を元に戻します。

import { myPatch } from "@/xxx/patch.js"
import Vue from 'vue';

data() {
  return {
    data: {
      originalPatch: Vue.prototype.__patch__,
    },
  },
},
beforeCreate() {
  this.originalPatch = Vue.prototype.__patch__; // 元のパッチ関数を保存します。
  Vue.prototype.__patch__ = myPatch;            // パッチ関数を置き換えます。
  // CAPTCHA 初期化については上記の Vue3 コードを参照してください。
},
beforeDestroy() {
  Vue.prototype.__patch__ = this.originalPatch; // パッチ関数を元に戻します。
}

パラメーター

V3 アーキテクチャ

パラメーター	タイプ	必須	デフォルト	説明
`SceneId`	String	はい	—	検証シナリオの ID です。検証シナリオを作成すると、この値を取得できます。
`mode`	String	はい	—	CAPTCHA モードです。`popup` のみサポートされています。
`success`	Function	はい	—	検証成功時のコールバック関数です。`captchaVerifyParam` を受け取り、ご利用のサーバーに渡して二次検証を行ってください。
`fail`	Function	はい	—	検証失敗時のコールバック関数です。エラーコードを受け取ります。
`slideStyle`	Object	いいえ	`{ width: 540, height: 60 }`	スライダー CAPTCHA のスタイルです。幅と高さは rpx 単位です。
`language`	String	いいえ	`cn`	表示言語です。サポートされている言語タイプをご参照ください。
`region`	String	いいえ	`cn`	CAPTCHA インスタンスのリージョンです。有効な値：`cn` (中国本土)、`sgp` (シンガポール)。

slideStyle に関する注意事項：

適用される最小幅は 540 rpx です。540 rpx 未満の値は、スライダーが十分な行動データを収集できるように自動的に 540 rpx に設定されます。
slideStyle はスライダー CAPTCHA のみに適用されます。パズル CAPTCHA の CSS をオーバーライドしないでください。画像サイズと解答は固定されており、スタイルを変更すると検証が失敗します。

region に関する注意事項：

クライアント側の region 値は、ご利用のサーバーで設定されたエンドポイントと一致させる必要があります。不一致があると検証エラーが発生します。
クライアントが収集する行動データおよびデバイスデータは、対応する地域センター (中国本土: 中国 (上海)、シンガポール) に送信され、セキュリティ処理が行われます。

V2 アーキテクチャ

パラメーター	タイプ	必須	デフォルト	説明
`SceneId`	String	はい	—	検証シナリオの ID です。検証シナリオを作成すると、この値を取得できます。
`mode`	String	はい	—	CAPTCHA モードです。`popup` のみサポートされています。
`captchaVerifyCallback`	Function	はい	—	CAPTCHA 検証付きビジネスリクエストのコールバックです。`{ captchaResult: boolean, bizResult?: boolean }` を返す必要があります。
`onBizResultCallback`	Function	はい	—	ビジネス検証結果のコールバックです。検証後のロジックを処理するために使用します。
`slideStyle`	Object	いいえ	`{ width: 540, height: 60 }`	スライダー CAPTCHA のスタイルです。幅と高さは rpx 単位です。
`language`	String	いいえ	`cn`	表示言語です。サポートされている言語タイプをご参照ください。
`region`	String	いいえ	`cn`	CAPTCHA インスタンスのリージョンです。有効な値：`cn` (中国本土)、`sgp` (シンガポール)。

slideStyle および region に関する注意事項は V2 でも同様に適用されます。V3 の注意事項をご参照ください。

前提条件

アーキテクチャの選択

ネイティブ WeChat ミニプログラムへの統合

手順 1：プラグインの宣言とコンポーネントのインポート

V3 アーキテクチャ

V2 アーキテクチャ

手順 2：コンポーネントテンプレートの挿入

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

V3 アーキテクチャ

V2 アーキテクチャ

Taro フレームワーク ミニプログラムへの統合

手順 1：プラグインの宣言とコンポーネントのインポート

V3 アーキテクチャ

V2 アーキテクチャ

手順 2：統合コードの追加

V3 アーキテクチャ

V2 アーキテクチャ

Taro ビルドツールに関する注意事項

uni-app ミニプログラムへの統合

手順 1：プラグインの宣言とコンポーネントのインポート

V3 アーキテクチャ

V2 アーキテクチャ

手順 2：統合コードの追加

V3 アーキテクチャ

V2 アーキテクチャ

パラメーター

V3 アーキテクチャ

V2 アーキテクチャ

Taro フレームワークミニプログラムへの統合