Intégration CAPTCHA Vue.js

Créez un compte utilisateur ou connectez-vous avec un compte existant. Ensuite, créez un nouveau CAPTCHA ou sélectionnez-en un existant. Si vous ne savez pas encore si TrustCaptcha est la solution idéale pour vous, essayez notre service CAPTCHA sans risque pendant 14 jours, gratuitement.

Sur la page d’aperçu du CAPTCHA, vous trouverez toutes les informations importantes, telles que la site key, la secret key et la licence key. Autorisez vos sites web à accéder à votre CAPTCHA en les ajoutant simplement à la liste des domaines autorisés dans les règles de sécurité du CAPTCHA.

Les étapes suivantes vous donnent une idée générale de la manière d’intégrer le widget CAPTCHA TrustCaptcha dans un frontend Vue.js. Pour des instructions précises et détaillées, veuillez consulter le guide d’intégration CAPTCHA pour Vue.js dans notre documentation.

Installez d’abord notre package TrustCaptcha pour Vue.js :

npm i @trustcomponent/trustcaptcha-vue

Enregistrez l’élément TrustCaptcha comme élément personnalisé :

export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('trustcaptcha'),
}
}
}),
],
})

Ajoutez le composant TrustCaptcha à votre application :

import {TrustcaptchaComponent} from "@trustcomponent/trustcaptcha-vue";

createApp(App).use(TrustcaptchaComponent).mount('#app')

Insérez maintenant le widget CAPTCHA, c’est-à-dire la balise HTML trustcaptcha-component, dans n’importe quel formulaire HTML :

<form>
  <!-- vos champs de saisie -->
  <trustcaptcha-component
    sitekey="<your_site_key>"
  @captchaSolved="handleSuccess($event.detail)"
  @captchaFailed="handleError($event.detail)"
  ></trustcaptcha-component>
<!-- autres champs de saisie / bouton d’envoi -->
</form>

Le widget CAPTCHA sera désormais affiché sur votre site web Vue.js :

Besoin d’informations détaillées sur l’intégration CAPTCHA Vue.js ?
Pour des instructions détaillées sur l’intégration de TrustCaptcha, veuillez consulter notre guide d’intégration CAPTCHA Vue.js. Vous trouverez un exemple d’intégration complet du CAPTCHA Vue.js dans notre référentiel CAPTCHA Samples sur Github.

Une autre technologie frontend que Vue.js ?
Si vous ne souhaitez pas utiliser Vue.js ou si vous avez plusieurs sites web ou applications, vous pouvez sélectionner ici un autre framework ou une autre plateforme. S’il n’existe pas d’intégration prête à l’emploi pour votre technologie frontend préférée, vos développeurs peuvent intégrer le CAPTCHA eux-mêmes en utilisant notre documentation ou contacter notre équipe support pour une solution d’intégration prête à l’emploi.

Une fois le CAPTCHA terminé, récupérez le jeton de vérification et envoyez-le à votre backend. Dans votre backend, récupérez le résultat de vérification CAPTCHA depuis nos serveurs et validez-le. Selon le niveau de risque bot, vous décidez de la marche à suivre. Vous trouverez des informations détaillées sur l’intégration backend et la validation des résultats dans notre documentation.

Intégrations backend prêtes à l’emploi
Vous pouvez utiliser l’une de nos intégrations prêtes à l’emploi pour intégrer le processus de validation CAPTCHA dans votre service backend. S’il n’existe pas d’intégration prête à l’emploi pour votre technologie backend préférée, vos développeurs peuvent intégrer le CAPTCHA eux-mêmes en utilisant notre documentation ou contacter notre équipe support pour une solution d’intégration prête à l’emploi.

Vous êtes désormais protégé par TrustCaptcha — félicitations !