Saltearse al contenido

Integración con Angular

Procaptcha proporciona un componente oficial de Angular para una fácil integración de Prosopo Procaptcha en cualquier proyecto Angular. El componente de integración admite todas las opciones de renderizado de Procaptcha.

1. Instalación

npm install @prosopo/angular-procaptcha-wrapper

2. Ejemplo de uso

2.1) Configuración básica

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) Uso avanzado

// ...

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