SDK Vue

Composant Vue 3 officiel pour le CAPTCHA CaptchaLa — publié sous @captcha-la/vue.

Démo en ligne

📦

demo-v1.captcha.la/vue — démo exécutable avec les quatre modes produit. Source : Captcha-La/vue-example.

Installation

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

Dépendance pair : vue@^3.2.0.

Démarrage rapide

<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) {
  // Send result.token to your server for validation.
  console.log('pass_token:', result.token)
}

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

Props

Prop	Type	Valeur par défaut	Description
appKey	string	requis	Clé d'application CaptchaLa
serverToken	string	-	Token de challenge émis par le serveur, à usage unique. Requis lorsque l'application a server_token_required=true.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	Mode d'affichage
action	string	'default'	Identifiant de l'action (par ex. login, register, checkout)
lang	string	'zh-CN'	Code de langue (zh-CN, en, ja, …)
bindTo	string | HTMLElement	-	Sélecteur ou nœud d'élément auquel se lier (uniquement pour product="bind")

Événements

Événement	Charge utile	Description
success	{ token, type, action }	Vérification réussie
error	error	Vérification échouée
close	—	CAPTCHA fermé
ready	—	CAPTCHA prêt

Méthodes (via 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>

Méthode	Description
verify()	Déclenche la vérification
reset()	Réinitialise l'état du CAPTCHA
destroy()	Détruit l'instance
bindTo(selector)	Lie à un élément (pour le mode bind)
setLang(lang)	Change la langue à la volée

Production : mode serverToken

Pour les flux à forte valeur (connexion, inscription, paiement), nous recommandons le flux de token émis par le serveur. Votre backend génère un server_token à usage unique (TTL de 5 minutes) via POST /v1/server/challenge/issue et le transmet au navigateur :

<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')   // your own backend
  serverToken.value = (await r.json()).server_token
})

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

Consultez la Référence de l'API pour le contrat backend complet.

Liens

• npm · GitHub · exemple
• Vue d'ensemble du SDK Web · Référence de l'API