ReCaptcha v3 con Angular

La seguridad en las aplicaciones web es esencial y, para proteger contra bots y spam, reCAPTCHA es una solución confiable. En este tutorial detallado, aprenderás cómo implementar reCAPTCHA v3 con Angular, fortaleciendo la seguridad y mejorando la integridad de tus formularios.

Configura tu dominio para ReCaptcha en Google

Se debe tener una cuenta en google y entrar al siguiente link: https://www.google.com/recaptcha/, Aquí lo primero que se debe hacer es acreditar que el dominio en donde se va a ejecutar el reCAPTCHA sea de tu propiedad, para eso Google le pedirá completar algunos pasos de verificación. Una vez hecho lo anterior, también nos aseguramos de poner localhost, ya que así podremos hacer pruebas en nuestro ambiente local de desarrollo.

Recuerda elegir la versión 3 de reCAPTCHA

Agregamos nuestro dominio y no olvidemos agregar localhost para pruebas en nuestro ambiente local

Obtiene las key de Google

Obtén las claves de sitio y secreta necesarias para integrar reCAPTCHA en tu aplicación.

Recuerda que:

La clave de sitio la utilizarás en el front y la clave secreta en tu backend

Una vez tenemos las claves ya vamos al siguiente paso.

Creando un proyecto Angular

Para este paso, si no tienes un proyecto ya creado, te invito a visitar el siguiente link, el cual explica paso a paso para crear tu proyecto

https://tenocode.com/crear-un-nuevo-proyecto-angular/

Formularios en Angular

Lo primero que haremos será crear nuestro formulario, el cual queremos tener el sistema de seguridad ReCaptcha v3, nosotros lo implemetaremos en nuestro formulario de Registro de Usuarios

Para este paso podemos completar el siguiente post https://tenocode.com/login-y-registro-con-angular/, si ya lo viste o ya tienes tu propio formulario, podemos continuar

Implementando ReCaptcha v3

El primer paso será instalar una librería Angular que nos ayudará con el proceso de implementación. Este es el link https://www.npmjs.com/package/ng-recaptcha?activeTab=readme

Instalamos con:

npm i ng-recaptcha@11 --save

En nuestro caso se agrego la version 11 ya que nuestra version de angular de desarrollo en la 15, si necesitasa saver tu version de angular lo puedes hacer con el comando

ng v

Luego debemos importar en nuestro módulo la librería instalada, en nuestro caso el modulo donde tenemos el formulario de registro es auth.module y debería quedar así

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { environment } from 'src/environments/environment';
import { AuthRoutingModule } from './auth-routing.module';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from "ng-recaptcha";

const KeyRecaptcha = environment.recaptcha.siteKey;

@NgModule({
  declarations: [
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    FormsModule,
    ReactiveFormsModule,

    RecaptchaV3Module
  ],
  providers: [{ provide: RECAPTCHA_V3_SITE_KEY, useValue: KeyRecaptcha }]
})
export class AuthModule { }

Ahora necesitamos modificar nuestro componente en donde se encuentra el formulario.

Importamos recaptcha

import { ReCaptchaV3Service } from 'ng-recaptcha';

en el constructor agregamos el servicio recaptcha

constructor(private recaptchaV3Service: ReCaptchaV3Service){}

Ahora debemos implementar OnInit en nuestro componente, esto hará que se muestre la etiqueta de recaptcha 3 en nuestra página

  ngOnInit(): void {
    //show recaptcha
    const element = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement;
    console.log('element ', element);
    if (element) {
      element.style.visibility = 'visible';
    }
  }

Deberías visualizar algo así

El siguiente paso, será obtener el token de recaptcha y enviarlo a nuestro backend, en donde se validará si el token es correcto o no. Para ello creamos una función privada de la siguiente forma, (todo esto en el mismo componente de registro en donde se encuentra el formulario)

private executeAction(action: string): void {

    if (this.recaptchaExecute) {
      this.recaptchaExecute.unsubscribe();
    }

    this.recaptchaV3Service.execute(action).subscribe((token)=>{

        this.userModel.captcha = token;
        
        this.userModel.name = this.formRegister.value.name;
        this.userModel.last_name = this.formRegister.value.lastName;
        this.userModel.email = this.formRegister.value.email;
        this.userModel.password = this.formRegister.value.password;
        this.userModel.password_confirmation =   this.formRegister.value.password;

        this.authService.register(this.userModel).subscribe(receivedItem => {
//el usuario fue registrado con éxito y el recaptcha también es válido
//te dejo el link de mi repositorio de backend con laravel en donde esta //implementada esta funcion de registro con recaptcha v3
                      
        },(error) => {

          if(error.error.email!=undefined){
  
          }
            
        });
    },
    (error) => {
      console.log(error);
    })
  }

Si deseas obtener el código fuente te dejo mis repositorios públicos:

https://github.com/mweikat/angular_bootstrap_front

y el backend con laravel

https://github.com/mweikat/laravel_back_api