Integrasi plug-in program mini WeChat (V3) - Captcha - Alibaba Cloud Documentation Center

Setelah membuat skenario verifikasi di konsol, integrasikan kode inisialisasi Captcha ke halaman program mini WeChat tempat verifikasi diperlukan. Panduan ini mencakup tiga framework: program mini WeChat native, Taro (React), dan uni-app (Vue3).

Penting

Verifikasi sisi server bersifat wajib. Kirimkan captchaVerifyParam ke server Anda dan panggil API verifikasi Captcha untuk mencegah lalu lintas bot secara efektif—plugin klien saja tidak memberikan perlindungan.

Prasyarat

Sebelum memulai, pastikan Anda telah:

Mengaktifkan Alibaba Cloud Captcha 2.0
Membuat skenario verifikasi dengan jenis klien program mini WeChat
Menambahkan plugin di konsol admin program mini: buka Settings > Third-party Services > Plugin Management, cari AppID wxbe275ff84246f1a4, lalu tambahkan

Pilih arsitektur Anda

Plugin ini mendukung dua arsitektur. Pilih berdasarkan kebutuhan proyek Anda sebelum melanjutkan.

	Arsitektur V3	Arsitektur V2
Callback sukses	`success(captchaVerifyParam)`	`captchaVerifyCallback(captchaVerifyParam)`
Callback hasil	`fail(error)`	`onBizResultCallback(bizResult)`
Verifikasi server	Kirimkan `captchaVerifyParam` ke server Anda; Captcha menangani hasilnya	Kembalikan `{ captchaResult, bizResult? }` dari `captchaVerifyCallback`
Verifikasi ulang	Panggil `reloadCaptcha` setelah sukses	Tidak diperlukan (ditangani oleh `onBizResultCallback`)

Integrasikan dengan program mini WeChat native

Langkah 1: Deklarasikan plugin dan impor komponen

Dalam app.json, deklarasikan plugin di bawah plugins:

Arsitektur V3

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

Arsitektur V2

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

Selalu gunakan versi plugin terbaru. Temukan versi saat ini di WeChat Developer Tools > Details > Basic Information > Plugin Information.

Dalam file .json halaman atau komponen Anda, impor komponen kustom menggunakan protokol plugin://:

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

Langkah 2: Sisipkan templat komponen

Dalam file .wxml Anda, tambahkan komponen <aliyun-captcha>. Contoh berikut menunjukkan halaman logon:

<view class="captchapage-container">
  <view class="input-group">
    <view class="label">Username:</view>
    <input class="input" type="text" placeholder="Enter your username" bindinput="inputUsername" />
  </view>
  <view class="input-group">
    <view class="label">Password:</view>
    <input class="input" type="password" placeholder="Enter your password" bindinput="inputPassword" />
  </view>
  <aliyun-captcha id="captcha-element" wx:if="{{loadCaptcha}}" props="{{pluginProps}}" />
  <!-- When the button is clicked, call the plugin instance method to display the Captcha. -->
  <button class="login-btn" bindtap="login">Log On</button>
</view>

Langkah 3: Inisialisasi plugin

Panggil setData dengan parameter inisialisasi yang diperlukan. Contoh berikut menunjukkan skenario logon.

Arsitektur V3

// Dapatkan instance plugin Captcha.
var AliyunCaptchaPluginInterface = requirePlugin('AliyunCaptcha');

// Fungsi callback untuk verifikasi yang berhasil.
// captchaVerifyParam: Kirim langsung ke server Anda untuk verifikasi sekunder.
var success = async function (captchaVerifyParam) {
  // Setelah verifikasi berhasil, uninstall Captcha.
  this.setData({ loadCaptcha: false });
  // Kode permintaan bisnis...
  const result = await customFetch('https://xxxx/demo/bizquery', {
    method: 'POST',
    data: {
      captchaVerifyParam, // Wajib: kirim ke server untuk verifikasi.
      userName: this.data.username,
      password: this.data.password,
    },
  });
};

// Fungsi callback untuk verifikasi yang gagal.
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',
      // Sintaks tetap: bind this agar callback dapat mengakses this.data.
      success: success.bind(this),
      fail: fail.bind(this),
      slideStyle: {
        width: 540,  // Default: 540 rpx (minimum dipaksakan)
        height: 60,  // Default: 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) {
      // Untuk mode popup, panggil show() untuk menampilkan Captcha.
      AliyunCaptchaPluginInterface.show();
    } else {
      wx.showToast({ title: 'Enter your username and password.', icon: 'none' });
    }
  },
  // Panggil ini untuk memicu verifikasi lain setelah yang sebelumnya berhasil.
  reloadCaptcha: function () {
    this.setData({ loadCaptcha: true });
  },
});

Untuk memicu verifikasi lain setelah yang sebelumnya berhasil, panggil reloadCaptcha.

Arsitektur V2

// Dapatkan instance plugin Captcha.
var AliyunCaptchaPluginInterface = requirePlugin('AliyunCaptcha');

// Callback untuk permintaan bisnis dengan verifikasi Captcha.
// Mengembalikan: { captchaResult: boolean (wajib), bizResult?: boolean (opsional) }
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 wajib.
    bizResult: /* Ambil hasil verifikasi bisnis Anda dari result. */ undefined, // Boolean opsional.
  };
};

// Callback untuk hasil verifikasi bisnis.
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,
  },
  onLoad: function (options) {
    var pluginProps = {
      SceneId: '<your-scene-id>',
      mode: 'popup',
      // Sintaks tetap: bind this agar callback dapat mengakses this.data.
      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: 'Enter your username and password.', icon: 'none' });
    }
  },
});

Integrasikan dengan program mini framework Taro

Integrasi Taro hanya didukung untuk framework React.

Langkah 1: Deklarasikan plugin dan impor komponen

Dalam app.config.js, deklarasikan plugin di bawah plugins:

Arsitektur V3

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

Arsitektur V2

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

Selalu gunakan versi plugin terbaru. Temukan versi saat ini di WeChat Developer Tools > Details > Basic Information > Plugin Information.

Dalam index.config.js halaman atau komponen Anda, impor komponen kustom:

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

Langkah 2: Tambahkan kode integrasi

Contoh berikut menunjukkan skenario logon.

Arsitektur V3

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

// Dapatkan instance plugin Captcha.
const AliyunCaptchaPluginInterface = Taro.requirePlugin('AliyunCaptcha');

function Index() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loadCaptcha, setLoadCaptcha] = useState(false);
  // Gunakan ref untuk menyimpan parameter bisnis di dalam callback (disarankan daripada variabel global).
  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: 'Enter your username and password.', icon: 'none' });
    }
  };

  // Callback untuk verifikasi yang berhasil.
  // captchaVerifyParam: Kirim langsung ke server Anda untuk verifikasi sekunder.
  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);
  }

  // Panggil ini untuk memicu verifikasi lain setelah yang sebelumnya berhasil.
  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>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>
        <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;

Untuk memicu verifikasi lain setelah yang sebelumnya berhasil, panggil reloadCaptcha.

Arsitektur V2

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

// Mendapatkan instans plugin 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: 'Masukkan nama pengguna dan kata sandi Anda.', icon: 'none' });
    }
  };

  // Callback untuk permintaan bisnis dengan verifikasi Captcha.
  // Mengembalikan: { captchaResult: boolean (wajib), bizResult?: boolean (opsional) }
  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: /* Dapatkan hasil verifikasi bisnis Anda dari hasil ini. */ undefined,
    };
  }

  function onBizResultCallback(bizResult) {
    if (bizResult === true) {
      Taro.showToast({ title: 'Verifikasi bisnis berhasil!', duration: 2000, icon: 'success' });
    } else {
      Taro.showToast({ title: 'Verifikasi bisnis gagal!', 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>Akun:</Text>
          <Input type="text" placeholder="Masukkan akun Anda" value={username} onInput={handleUsernameChange} />
        </View>
        <View className="input-group">
          <Text>Kata Sandi:</Text>
          <Input type="password" placeholder="Masukkan kata sandi Anda" value={password} onInput={handlePasswordChange} />
        </View>
        <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;

Catatan alat build Taro

Taro hanya mendukung pengemasan dengan Webpack. Jika Anda membuat proyek baru, gunakan Webpack untuk kompatibilitas optimal.

Jika proyek yang sudah ada menggunakan Vite dan perpindahan tidak memungkinkan, gunakan solusi berikut untuk mengatasi error kompatibilitas yang muncul di WeChat Developer Tools:

Tambahkan kode berikut ke dist/base.wxml dalam proyek yang telah dikemas:

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

Integrasikan dengan program mini uni-app

uni-app mendukung Vue2 dan Vue3. Contoh berikut menggunakan Vue3.

Langkah 1: Deklarasikan plugin dan impor komponen

Dalam manifest.json, deklarasikan plugin di bawah mp-weixin:

Arsitektur V3

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

Arsitektur V2

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

Selalu gunakan versi plugin terbaru. Temukan versi saat ini di WeChat Developer Tools > Details > Basic Information > Plugin Information.

Dalam page.json untuk halaman yang menggunakan Captcha, daftarkan komponen di bawah node style:

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

Langkah 2: Tambahkan kode integrasi

Dalam file .vue Anda, tambahkan <aliyun-captcha> di dalam <template> dan inisialisasi plugin di dalam <script>. Contoh berikut menunjukkan skenario logon.

Arsitektur 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>
  // Dapatkan instance plugin Captcha.
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // Callback untuk verifikasi yang berhasil.
  // captchaVerifyParam: Kirim langsung ke server Anda untuk verifikasi sekunder.
  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), // Sintaks tetap: bind this.
        fail: fail.bind(this),       // Sintaks tetap: bind 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: "Enter your username and password.", icon: "none" });
        }
      },
      // Panggil ini untuk memicu verifikasi lain setelah yang sebelumnya berhasil.
      reloadCaptcha() {
        this.data.loadCaptcha = true;
      },
    },
  };
</script>

Untuk memicu verifikasi lain setelah yang sebelumnya berhasil, panggil reloadCaptcha.

Arsitektur 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>
  // Dapatkan instance plugin Captcha.
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // Callback untuk permintaan bisnis dengan verifikasi Captcha.
  // Mengembalikan: { captchaResult: boolean (wajib), bizResult?: boolean (opsional) }
  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: /* Ambil hasil verifikasi bisnis Anda dari result. */ undefined,
    };
  };

  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) {
      var pluginProps = {
        SceneId: "<your-scene-id>",
        mode: "popup",
        captchaVerifyCallback: captchaVerifyCallback.bind(this), // Sintaks tetap: bind this.
        onBizResultCallback: onBizResultCallback.bind(this),     // Sintaks tetap: bind 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: "Enter your username and password.", icon: "none" });
        }
      },
    },
  };
</script>

Integrasi Vue2 mengikuti pola yang sama seperti Vue3, tetapi memerlukan patch tambahan. Impor patch.js dan ganti metode native __patch__ pada halaman tempat Captcha digunakan: 1. Impor file patch. 2. Ganti __patch__ di awal hook beforeCreate. 3. Kembalikan __patch__ di hook beforeDestroy.

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

data() {
  return {
    data: {
      originalPatch: Vue.prototype.__patch__,
    },
  },
},
beforeCreate() {
  this.originalPatch = Vue.prototype.__patch__; // Simpan fungsi patch asli.
  Vue.prototype.__patch__ = myPatch;            // Ganti fungsi patch.
  // Lihat kode Vue3 di atas untuk inisialisasi Captcha.
},
beforeDestroy() {
  Vue.prototype.__patch__ = this.originalPatch; // Kembalikan fungsi patch.
}

Parameter

Arsitektur V3

Parameter	Tipe	Wajib	Default	Deskripsi
`SceneId`	String	Ya	—	ID skenario verifikasi. Dapatkan nilai ini setelah Anda membuat skenario verifikasi.
`mode`	String	Ya	—	Mode Captcha. Hanya `popup` yang didukung.
`success`	Function	Ya	—	Fungsi callback untuk verifikasi yang berhasil. Menerima `captchaVerifyParam`; kirimkan ke server Anda untuk verifikasi sekunder.
`fail`	Function	Ya	—	Fungsi callback untuk verifikasi yang gagal. Menerima kode kesalahan.
`slideStyle`	Object	Tidak	`{ width: 540, height: 60 }`	Gaya slider Captcha. Lebar dan tinggi dalam satuan rpx.
`language`	String	Tidak	`cn`	Bahasa tampilan. Lihat jenis bahasa yang didukung.
`region`	String	Tidak	`cn`	Wilayah instans Captcha. Nilai yang valid: `cn` (daratan Tiongkok), `sgp` (Singapura).

Catatan tentang `slideStyle`:

Lebar minimum yang dipaksakan adalah 540 rpx. Nilai di bawah 540 rpx secara otomatis diatur menjadi 540 rpx untuk memastikan slider mengumpulkan cukup data perilaku.
slideStyle hanya berlaku untuk Captcha slider. Jangan mengganti CSS untuk Captcha puzzle — ukuran gambar dan jawaban bersifat tetap, dan perubahan gaya akan menyebabkan verifikasi gagal.

Catatan tentang `region`:

Nilai region pada klien harus sesuai dengan titik akhir yang dikonfigurasi di server Anda. Ketidaksesuaian menyebabkan error verifikasi.
Data perilaku dan perangkat yang dikumpulkan oleh klien dikirim ke pusat regional yang sesuai (daratan Tiongkok: Tiongkok (Shanghai); Singapura) untuk pemrosesan keamanan.

Arsitektur V2

Parameter	Tipe	Wajib	Default	Deskripsi
`SceneId`	String	Ya	—	ID skenario verifikasi. Dapatkan nilai ini setelah Anda membuat skenario verifikasi.
`mode`	String	Ya	—	Mode Captcha. Hanya `popup` yang didukung.
`captchaVerifyCallback`	Function	Ya	—	Callback untuk permintaan bisnis dengan verifikasi Captcha. Harus mengembalikan `{ captchaResult: boolean, bizResult?: boolean }`.
`onBizResultCallback`	Function	Ya	—	Callback untuk hasil verifikasi bisnis. Gunakan ini untuk menangani logika pasca-verifikasi.
`slideStyle`	Object	Tidak	`{ width: 540, height: 60 }`	Gaya slider Captcha. Lebar dan tinggi dalam satuan rpx.
`language`	String	Tidak	`cn`	Bahasa tampilan. Lihat jenis bahasa yang didukung.
`region`	String	Tidak	`cn`	Wilayah instans Captcha. Nilai yang valid: `cn` (daratan Tiongkok), `sgp` (Singapura).

Catatan tentang `slideStyle` dan `region` berlaku identik untuk V2. Lihat catatan V3 di atas.