Intégration Angular

Procaptcha fournit un composant Angular officiel pour une intégration facile de Prosopo Procaptcha dans n’importe quel projet Angular. Le composant d’intégration prend en charge toutes les options de rendu Procaptcha.

1. Installation

Titre de la section 1. Installation

npm install @prosopo/angular-procaptcha-wrapper

2. Exemple d’utilisation

Titre de la section 2. Exemple d’utilisation

2.1) Configuration de base

Titre de la section 2.1) Configuration de base

import { Component } from "@angular/core";
import {
    ProcaptchaComponent,
    type ProcaptchaRenderOptions,
} from "@prosopo/angular-procaptcha-wrapper";

@Component({
    selector: "app-root",
    imports: [ProcaptchaComponent],
    template: `
    <procaptcha-component [settings]="procaptchaSettings"
                          [htmlAttributes]="{class:'my-app__procaptcha'}"/>`,
    styles: "",
})
export class AppComponent {
    procaptchaSettings: ProcaptchaRenderOptions = {
        siteKey: "your-site-key",
    };
}

2.2) Utilisation avancée

Titre de la section 2.2) Utilisation avancée

// ...

export class AppComponent {
    procaptchaSettings: ProcaptchaRenderOptions = {
        siteKey: environment.PROCAPTCHA_SITE_KEY,
        language: "en",
        callback: (token: string) => {
            console.log("verified", token);
        },
    };
}