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

V3 アーキテクチャ

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

// 認証成功時のコールバック関数。
/**
 * @name success
 * @function
 * リクエストパラメーター: Captcha スクリプトによって返される認証パラメーター。処理せずに、2次検証のためにサーバーに直接渡します。
 * @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 をバインドする必要があります。これにより、コールバック関数内で this.data を介してビジネスパラメーターを取得できます。
      success: success.bind(this), 
      // これは固定構文です。コールバック関数内の '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: 'Enter your username and password.',
        icon: 'none'
      });
    }
  },
  // 再度認証するには、このメソッドを呼び出して Captcha を再読み込みします。
  reloadCaptcha: function () {
    this.setData({
      loadCaptcha: true,
    });
  },
})

認証に成功した後、再度認証を実行するには、`reloadCaptcha` を呼び出して Captcha を再読み込みします。

V2 アーキテクチャ

// Captcha プラグインインスタンスを取得します。
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: Get your business verification result from the result. // ビジネス検証が成功したかどうかを指定します。これはブール値で、オプションです。ビジネス検証結果がない場合、bizResult は空にできます。
  };
};

// ビジネスリクエスト検証結果コールバック関数。
var onBizResultCallback = function (bizResult) {
  if (bizResult === true) {
    // ビジネス検証が成功した場合のロジック (成功メッセージの表示など)。
    wx.showToast({
      title: 'Business verification successful!',
      duration: 2000,
      icon: 'success',
    });
  } else {
  // ビジネス検証が失敗した場合のロジック (失敗メッセージの表示など)。
    wx.showToast({
      title: 'Business verification failed!',
      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, // デフォルトの幅は 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: 'Enter your username and password.',
        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';

// Captcha プラグインインスタンスを取得します。
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: 'Enter your username and password.',
        icon: 'none'
      });
    } 
  }

  // 認証成功時のコールバック関数。
  /**
   * @name success
   * @function
   * リクエストパラメーター: Captcha スクリプトによって返される認証パラメーター。処理せずに、2次検証のためにサーバーに直接渡します。
   * @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 your account"
  value={username}
  onInput={handleUsernameChange}
    />
    </View>
    <View className="input-group">
    <Text>Password:</Text>
    <Input
  type="password"
  placeholder="Enter your password"
  value={password}
  onInput={handlePasswordChange}
    />
    </View>
  {/* ログインメソッドをログインボタンにバインドします。ボタンがクリックされると、ログインメソッドでプラグインインスタンスメソッドを呼び出して 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';

// Captcha プラグインインスタンスを取得します。
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: 'Enter your username and password.',
        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: Get your business verification result from the result. // ビジネス検証が成功したかどうかを指定します。これはブール値で、オプションです。ビジネス検証結果がない場合、bizResult は空にできます。
    };
  }

  // ビジネスリクエスト検証結果コールバック関数。
  function onBizResultCallback(bizResult) {
    if (bizResult === true) {
      // ビジネス検証が成功した場合のロジック (成功メッセージの表示など)。
      Taro.showToast({
        title: 'Business verification successful!',
        duration: 2000,
        icon: 'success',
      });
    } else {
    // ビジネス検証が失敗した場合のロジック (失敗メッセージの表示など)。
    Taro.showToast({
        title: 'Business verification failed!',
        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 your account"
            value={username}
            onInput={handleUsernameChange}
          />
        </View>
        <View className="input-group">
          <Text>Password:</Text>
          <Input
            type="password"
            placeholder="Enter your password"
            value={password}
            onInput={handlePasswordChange}
          />
        </View>
        {/* ログインメソッドをログインボタンにバインドします。ボタンがクリックされると、ログインメソッドでプラグインインスタンスメソッドを呼び出して 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 your username"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">Password:</view>
      <input
        class="input"
        type="password"
        placeholder="Enter your 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>
  // Captcha プラグインインスタンスを取得します。
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // 認証成功時のコールバック関数。
  /**
   * @name success
   * @function
   * リクエストパラメーター: Captcha スクリプトによって返される認証パラメーター。処理せずに、2次検証のためにサーバーに直接渡します。
   * @params {string} captchaVerifyParam
   * 戻り値パラメーター: フィールド名は固定です。captchaResult は必須です。error は、ビジネス検証シナリオがない場合はオプションです。
   * @returns {{captchaResult: boolean, error?: boolean|undefined}}
   */
  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), // これは固定構文です。this をバインドする必要があります。
        fail: fail.bind(this), // これは固定構文です。this をバインドする必要があります。
        slideStyle: {
          width: 540, // デフォルトの幅は 540 rpx です。
          height: 60, // デフォルトの高さは 60 rpx です。
        },
        language: "cn",
        region: "cn",
      };
      // Captcha プラグインを初期化します。
      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: "Enter your username and password.",
            icon: "none",
          });
        }
      },
      // 再度認証するには、このメソッドを呼び出して Captcha を再読み込みします。
      reloadCaptcha = function () {
        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 your username"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">Password:</view>
      <input
        class="input"
        type="password"
        placeholder="Enter your 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>
  // Captcha プラグインインスタンスを取得します。
  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: Get your business verification result from the result. // ビジネス検証が成功したかどうかを指定します。これはブール値で、オプションです。ビジネス検証結果がない場合、bizResult は空にできます。
    };
  };

  // ビジネスリクエスト検証結果コールバック関数。
  var onBizResultCallback = function (bizResult) {
    if (bizResult === true) {
      // ビジネス検証が成功した場合のロジック (成功メッセージの表示など)。
      uni.showToast({
        title: "Business verification successful!",
        duration: 2000,
        icon: "success",
      });
    } else {
      // ビジネス検証が失敗した場合のロジック (失敗メッセージの表示など)。
      uni.showToast({
        title: "Business verification failed!",
        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, // デフォルトの幅は 540 rpx です。
          height: 60, // デフォルトの高さは 60 rpx です。
        },
        language: "cn",
        region: "cn",
      };
      // Captcha プラグインを初期化します。
      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: "Enter your username and password.",
            icon: "none",
          });
        }
      },
    },
  };
</script>