Aller au contenu principal

Vue

Utilisez official Vue component pour protéger un formulaire Vue.

Installer​

Pour Vue 3 :

npm install @hcaptcha/vue3-hcaptcha

Pour Vue 2, utilisez @hcaptcha/vue-hcaptcha et enregistrez le composant dans l'option components de votre composant.

Ajouter le widget​

Copiez votre clé de site publique depuis Sites. Le composant charge le SDK et ajoute h-captcha-response au formulaire.

<script setup>
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
</script>

<template>
  <form method="POST" action="/login">
    <input type="email" name="email" required />
    <input type="password" name="password" required />
    <VueHcaptcha sitekey="YOUR_SITE_KEY" />
    <button type="submit">Log in</button>
  </form>
</template>

Pour les soumissions asynchrones, capturez le jeton avec @verify et effacez-le avec @expired et @error. Appelez la méthode reset() du composant via une référence de modèle après chaque tentative de soumission pour obtenir un nouveau jeton.

Vérifier et tester​

Conservez votre secret sur votre serveur et verify the token avant de traiter la connexion. Voir Node.js example.

Utilisez test keys pour consulter les soumissions acceptées et refusées. Suivez les instructions de local development instructions pour une exécution locale.