Vue SDK

Komponen Vue 3 rasmi untuk CAPTCHA CaptchaLa — diterbitkan sebagai @captcha-la/vue.

Demo langsung

📦

demo-v1.captcha.la/vue — demo boleh dijalankan dengan keempat-empat mod produk. Sumber: Captcha-La/vue-example.

Pemasangan

npm install @captcha-la/vue
# atau
yarn add @captcha-la/vue
# atau
pnpm add @captcha-la/vue

Kebergantungan rakan: vue@^3.2.0.

Mula pantas

<template>
  <Captchala
    app-key="your-app-key"
    product="popup"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup>
import { Captchala } from '@captcha-la/vue'

function handleSuccess(result) {
  // Hantar result.token kepada pelayan anda untuk pengesahan.
  console.log('pass_token:', result.token)
}

function handleError(error) {
  console.error('verification failed:', error)
}
</script>

Props

Prop	Jenis	Lalai	Penerangan
appKey	string	diperlukan	Kunci aplikasi CaptchaLa
serverToken	string	-	Token cabaran sekali guna yang dikeluarkan pelayan. Diperlukan apabila aplikasi mempunyai server_token_required=true.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	Mod paparan
action	string	'default'	Pengecam tindakan (cth. login, register, checkout)
lang	string	'zh-CN'	Kod bahasa (zh-CN, en, ja, …)
bindTo	string | HTMLElement	-	Pemilih elemen atau nod untuk diikat (hanya untuk product="bind")

Acara

Acara	Muatan	Penerangan
success	{ token, type, action }	Pengesahan berjaya
error	error	Pengesahan gagal
close	—	CAPTCHA ditutup
ready	—	CAPTCHA sedia

Kaedah (melalui ref)

<template>
  <Captchala ref="captchaRef" app-key="your-app-key" />
  <button @click="captchaRef?.verify()">Verify</button>
</template>

<script setup>
import { ref } from 'vue'
const captchaRef = ref()
</script>

Kaedah	Penerangan
verify()	Cetus pengesahan
reset()	Set semula keadaan CAPTCHA
destroy()	Musnahkan instance
bindTo(selector)	Ikat ke elemen (untuk mod bind)
setLang(lang)	Tukar bahasa di tempat

Pengeluaran: mod serverToken

Untuk aliran bernilai tinggi (log masuk, pendaftaran, pembayaran) kami mengesyorkan aliran token yang dikeluarkan pelayan. Backend anda mengeluarkan server_token sekali guna (TTL 5 minit) melalui POST /v1/server/challenge/issue dan menyerahkannya kepada pelayar:

<template>
  <Captchala
    v-if="serverToken"
    :server-token="serverToken"
    app-key="pk_your_public_app_key"
    action="login"
    @success="onSuccess"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Captchala } from '@captcha-la/vue'

const serverToken = ref()

onMounted(async () => {
  const r = await fetch('/api/captcha-token')   // backend anda sendiri
  serverToken.value = (await r.json()).server_token
})

function onSuccess(result) {
  console.log('pass_token:', result.token)
}
</script>

Lihat Rujukan API untuk kontrak backend yang lengkap.

Pautan

• npm · GitHub · contoh
• Gambaran Web SDK · Rujukan API