Captcha:V3 アーキテクチャへの WeChat ミニプログラムプラグインの統合

V3 アーキテクチャ

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

// 成功時のコールバック関数
/**
 * @name success
 * @function
 * リクエストパラメーター：Captcha スクリプトから返される検証パラメーター。このパラメーターは変更せず、サーバーサイド検証のためにサーバーへ直接渡してください。
 * @params {string} captchaVerifyParam 
 */
var success = async function (captchaVerifyParam) {
  // 検証が成功した後、Captcha をアンロードします
  this.setData({
    loadCaptcha: false,
  });
  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);
};

// 失敗時のコールバック関数
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, // Captcha をロードするかどうかを指定します
  },
  onLoad: function(options) {
    // プラグインパラメーターを構築します
    var pluginProps = {
      SceneId: 'xxxxx',
      mode: 'popup',
      // コールバック関数内の 'this' が現在のページコンテキストを指すように、ここでバインドが必要です。これにより、this.data を使用してビジネスパラメーターにアクセスできます
      success: success.bind(this), 
      // コールバック関数内の 'this' が現在のページコンテキストを指すように、ここでバインドが必要です。これにより、this.data を使用してビジネスパラメーターにアクセスできます
      fail: fail.bind(this), 
      slideStyle: {
        width: 540, // デフォルトの幅は 540 rpx です
        height: 60, // デフォルトの高さは 60 rpx です
      },
      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'
      });
    }
  },
  // 再度検証が必要な場合は、このメソッドを呼び出して Captcha を再ロードします
  reloadCaptcha: function () {
    this.setData({
      loadCaptcha: true,
    });
  },
})

検証に成功した後、別の検証が必要な場合は reloadCaptcha メソッドを呼び出して Captcha を再ロードしてください。

V2 アーキテクチャ

// プラグインインスタンスを取得
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 認証が成功したかどうかを示すブール値。
    bizResult: result.yourBizResult, // オプション。ビジネス検証結果。ビジネスロジックを検証しない場合は省略可能です。
  };
};

// ビジネスロジック検証結果のコールバック関数
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.data を使用してビジネスパラメーターにアクセスできます
      captchaVerifyCallback: captchaVerifyCallback.bind(this), 
      // コールバック関数内の 'this' が現在のページコンテキストを指すように、ここでバインドが必要です。これにより、this.data を使用してビジネスパラメーターにアクセスできます
      onBizResultCallback: onBizResultCallback.bind(this), 
      slideStyle: {
        width: 540, // デフォルトの幅は 540 rpx です
        height: 60, // デフォルトの高さは 60 rpx です
      },
      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'
      });
    }
  },
})

V3 アーキテクチャ

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

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

// `success` コールバックでは 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; // ref も更新します
    // userName = e.target.value; // または、グローバル変数を更新します
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value); // state を更新します
    bizParams.current.password = e.target.value; // ref も更新します
    // passWord = e.target.value; // または、グローバル変数を更新します
  };

  const login = () => {
    // カスタムのビジネス検証を追加できます
    if (username && password) {
      // ポップアップモードの場合、インスタンスメソッドを呼び出して Captcha を表示します。フリクションレスモードの場合、同じメソッドを呼び出して検証をトリガーします
      AliyunCaptchaPluginInterface.show();
    } else {
      Taro.showToast({
        title: 'ユーザー名とパスワードを入力してください。',
        icon: 'none'
      });
    } 
  }

  // 成功時のコールバック関数
  /**
   * @name success
   * @function
   * リクエストパラメーター：Captcha スクリプトから返される検証パラメーター。このパラメーターは変更せず、サーバーサイド検証のためにサーバーへ直接渡してください。
   * @params {string} captchaVerifyParam
  */
  async function success(captchaVerifyParam) {
    // 検証が成功した後、Captcha をアンロードします
    setLoadCaptcha(false);
    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, 
      },
    });
  }

  // 失敗時のコールバック関数
  function fail(error) {
    console.error(error)
  }

  // 再度検証が必要な場合は、このメソッドを呼び出して Captcha を再ロードします
  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: 'xxxxx',
    mode: 'popup',
    success,
    fail,
    slideStyle: {
      width: 540, // デフォルトの幅は 540 rpx です
      height: 60, // デフォルトの高さは 60 rpx です
    },
    language: 'cn',
    region: 'cn',
  };

  return (
    <View className="captcha-page">
    <Form>
    <View className="input-group">
    <Text>Account:</Text>
    <Input
  type="text"
  placeholder="Enter an account"
  value={username}
  onInput={handleUsernameChange}
    />
    </View>
    <View className="input-group">
    <Text>Password:</Text>
    <Input
  type="password"
  placeholder="Enter a password"
  value={password}
  onInput={handlePasswordChange}
    />
    </View>
  {/* ログインメソッドを [Log On] ボタンにバインドします。ボタンがクリックされると、ログインメソッドがプラグインのインスタンスメソッドを呼び出して Captcha を表示します。 */}
  <Button style={{ margin: '20px' }} id="captcha-button" onClick={login}>Log On</Button>
  </Form>
{loadCaptcha && <aliyun-captcha id="captcha-element" props={pluginProps} />}
  </View>
 );
}

export default Index;

検証に成功した後、別の検証が必要な場合は reloadCaptcha メソッドを呼び出して Captcha を再ロードしてください。

V2 アーキテクチャ

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

// プラグインインスタンスを取得
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; // ref も更新します
    // userName = e.target.value; // または、グローバル変数を更新します
  };
  
  const handlePasswordChange = (e) => {
    setPassword(e.target.value); // state を更新します
    bizParams.current.password = e.target.value; // ref も更新します
    // passWord = e.target.value; // または、グローバル変数を更新します
  };

  const login = () => {
    // カスタムのビジネス検証を追加できます
    if (username && password) {
      // ポップアップモードの場合、インスタンスメソッドを呼び出して 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 認証が成功したかどうかを示すブール値。
      bizResult: result.yourBizResult, // オプション。ビジネス検証結果。ビジネスロジックを検証しない場合は省略可能です。
    };
  }

  // ビジネスロジック検証結果のコールバック関数
  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, // デフォルトの幅は 540 rpx です
      height: 60, // デフォルトの高さは 60 rpx です
    },
    language: 'cn',
    region: 'cn',
  };

  return (
    <View className="captcha-page">
      <Form>
        <View className="input-group">
          <Text>Account:</Text>
          <Input
            type="text"
            placeholder="Enter an account"
            value={username}
            onInput={handleUsernameChange}
          />
        </View>
        <View className="input-group">
          <Text>Password:</Text>
          <Input
            type="password"
            placeholder="Enter a password"
            value={password}
            onInput={handlePasswordChange}
          />
        </View>
        {/* ログインメソッドを [Log On] ボタンにバインドします。ボタンがクリックされると、ログインメソッドがプラグインのインスタンスメソッドを呼び出して Captcha を表示します。 */}
        <Button style={{ margin: '20px' }} id="captcha-button" onClick={login}>Log On</Button>
      </Form>
      {loadCaptcha && <aliyun-captcha id="captcha-element" props={pluginProps} />}
    </View>
  );
}

export default Index;

V3 アーキテクチャ

<template>
  <view class="captchapage-container">
    <view class="input-group">
      <view class="label">Username:</view>
      <input
        class="input"
        type="text"
        placeholder="Enter a username"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">Password:</view>
      <input
        class="input"
        type="password"
        placeholder="Enter a password"
        @input="inputPassword"
      />
    </view>
    <aliyun-captcha
      id="captcha-element"
      v-if="data.loadCaptcha"
      :props="data.pluginProps"
    />
    <button class="login-btn" @click="login">Log On</button>
  </view>
</template>

<script>
  // プラグインインスタンスを取得
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // 成功時のコールバック関数
  /**
   * @name success
   * @function
   * リクエストパラメーター：Captcha スクリプトから返される検証パラメーター。このパラメーターは変更せず、サーバーサイド検証のためにサーバーへ直接渡してください。
   * @params {string} captchaVerifyParam
   */
  var success = async function (captchaVerifyParam) {
    // 検証が成功した後、Captcha をアンロードします
    this.data.loadCaptcha = false;
    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,
      },
    });
  };

  // 失敗時のコールバック関数
  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) {
      console.log(AliyunCaptchaPluginInterface);
      var pluginProps = {
        SceneId: "xxxxx",
        mode: "popup",
        success: success.bind(this), // ここでバインドが必要です
        fail: fail.bind(this), // ここでバインドが必要です
        slideStyle: {
          width: 540, // デフォルトの幅は 540 rpx です
          height: 60, // デフォルトの高さは 60 rpx です
        },
        language: "cn",
        region: "cn",
      };
      // プラグインを初期化します
      this.data.loadCaptcha = true; // Captcha をロードまたは再ロードするかどうかを制御します
      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;
        // これは例です。実際のアプリケーションでは、ログイン情報を検証のためにサーバーに送信する必要があります。
        // ポップアップモードの場合、インスタンスメソッドを呼び出して Captcha を表示します。フリクションレスモードの場合、同じメソッドを呼び出して検証をトリガーします
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({
            title: "ユーザー名とパスワードを入力してください。",
            icon: "none",
          });
        }
      },
      // 再度検証が必要な場合は、このメソッドを呼び出して Captcha を再ロードします
      reloadCaptcha() {
        this.data.loadCaptcha = true;
      }
    },
  };
</script>

検証に成功した後、別の検証が必要な場合は reloadCaptcha メソッドを呼び出して Captcha を再ロードしてください。

V2 アーキテクチャ

<template>
  <view class="captchapage-container">
    <view class="input-group">
      <view class="label">Username:</view>
      <input
        class="input"
        type="text"
        placeholder="Enter a username"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">Password:</view>
      <input
        class="input"
        type="password"
        placeholder="Enter a password"
        @input="inputPassword"
      />
    </view>
    <aliyun-captcha
      id="captcha-element"
      v-if="data.loadCaptcha"
      :props="data.pluginProps"
    />
    <button class="login-btn" @click="login">Log On</button>
  </view>
</template>

<script>
  // プラグインインスタンスを取得
  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 認証が成功したかどうかを示すブール値。
      bizResult: result.yourBizResult, // オプション。ビジネス検証結果。ビジネスロジックを検証しない場合は省略可能です。
    };
  };

  // ビジネスロジック検証結果のコールバック関数
  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), // ここでバインドが必要です
        onBizResultCallback: onBizResultCallback.bind(this), // ここでバインドが必要です
        slideStyle: {
          width: 540, // デフォルトの幅は 540 rpx です
          height: 60, // デフォルトの高さは 60 rpx です
        },
        language: "cn",
        region: "cn",
      };
      // プラグインを初期化します
      this.data.loadCaptcha = true; // Captcha をロードまたは再ロードするかどうかを制御します
      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;
        // これは例です。実際のアプリケーションでは、ログイン情報を検証のためにサーバーに送信する必要があります。
        // ポップアップモードの場合、インスタンスメソッドを呼び出して Captcha を表示します。フリクションレスモードの場合、同じメソッドを呼び出して検証をトリガーします
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({
            title: "ユーザー名とパスワードを入力してください。",
            icon: "none",
          });
        }
      },
    },
  };
</script>