Intégration CAPTCHA Angular

Créez un compte utilisateur ou connectez-vous à un compte existant. Ensuite, créez un nouveau CAPTCHA ou sélectionnez-en un existant. Si vous n’êtes pas sûr que TrustCaptcha vous convient, essayez notre service CAPTCHA sans risque pendant 14 jours, gratuitement.

Sur la page d’aperçu du CAPTCHA, vous trouverez toutes les informations importantes, comme la site key, la secret key et la licence key. Autorisez vos sites à 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 donnent une vue d’ensemble de l’intégration du widget TrustCaptcha dans un frontend Angular. Pour des instructions précises et détaillées, veuillez lire le guide d’intégration CAPTCHA pour Angular dans notre documentation.

Installez d’abord notre package Angular TrustCaptcha :

npm i @trustcomponent/trustcaptcha-angular

Insérez ensuite le widget CAPTCHA (le tag HTML trustcaptcha-component) dans un formulaire HTML :

import {Component} from '@angular/core';
import {TrustcaptchaComponent} from '@trustcomponent/trustcaptcha-angular';

@Component({
selector: 'app-root',
standalone: true,
imports: [TrustcaptchaComponent],
template: `
    <form>
      <!-- vos champs -->
      <trustcaptcha-component
        sitekey="<votre_site_key>"
        (captchaSolved)="solved($event)"
        (captchaFailed)="failed($event)"
      ></trustcaptcha-component>
      <!-- autres champs / bouton submit -->
    </form>
  `,
})
export class AppComponent {

solved(event: Event): void {
const verificationToken = (event as CustomEvent).detail;
// gérer le succès
}

failed(event: Event): void {
const errorMessage = (event as CustomEvent).detail;
// gérer l’erreur
}
}

Le widget CAPTCHA s’affichera maintenant sur votre site Angular :

Besoin d’informations détaillées sur l’intégration Angular ?
Pour des instructions complètes, consultez notre guide d’intégration CAPTCHA Angular. Un exemple complet est disponible dans notre repository d’exemples CAPTCHA sur GitHub.

Une autre technologie frontend qu’Angular ?
Si vous n’utilisez pas Angular ou si vous avez plusieurs sites/applications, vous pouvez choisir une autre plateforme/framework ici. Si nous n’avons pas d’intégration “prête à l’emploi” pour votre technologie, vos développeurs peuvent intégrer le CAPTCHA eux-mêmes via notre documentation ou contacter notre support pour une solution d’intégration.

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 depuis nos serveurs et validez-le. Selon le niveau de risque bot, vous décidez de la suite. 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éconstruites
Vous pouvez utiliser l’une de nos intégrations préconstruites pour intégrer la validation CAPTCHA dans votre service backend. S’il n’existe pas d’intégration pour votre technologie, vos développeurs peuvent l’implémenter via notre documentation ou contacter notre support pour une solution d’intégration.

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