Instalación de reCaptcha de Google en tu proyecto Angular/Angular Universal.

¿Alguna vez has entrado en un sitio web y al rellenar algún formulario fue necesario "demostrar" que eres un ser humano a través de un prueba?

Esa validación con texto ligeramente distorsionado o selección de imágenes se conoce como reCAPTCHA, un recurso de seguridad de Google diseñado para proteger sitios web contra spam y actividades abusivas, distinguiendo a los humanos de los bots automatizados.

En este articulo vamos a enseñar a instalar el siguiente reCAPTCHA, paso a paso, en vuestro proyecto angular universal.

Os dejo el repositorio https://github.com/al118345/angular_recaptcha_gooogle para su consulta y el siguiente video explicativo:

Alta en google.

En este articulo partimos con la premisa de que posees una cuenta de gmail.

El primer paso es darse de alta en la url https://www.google.com/recaptcha/admin/create. Una vez accedamos y estemos logueados en la cuenta de gmail aparecerá el siguiente formulario a rellenar.

Importante: Realizar dos inscripciones, una para le dominio escogido y otra con localhost para realizar las pruebas previas a la puesta en producción.

Rellenado el formulario aparecerá la siguiente pantalla con la información acerca de la clave para utilizar el servicio.

Instalación

Para realizar esta instalación, hay que dividir el proyecto entre un front-end y un back-end. El front realizará la interacción con el usuario y el backend se comunicará con Google.

Desde Angular realizaremos la instalación del paquete ng-recaptcha con el siguiente comando:
npm i ng-recaptcha --force

Además crearemos el siguiente servicio para comunicarse con la api de python.

ng generate service service/recaptcha
import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';
@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {

  public isBrowser  = false;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(platformId)) {
      this.isBrowser = true;
    }
  }

  getToken(token: string): string {
    if  (this.isBrowser == true){
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'urldestino', false);
      xhr.send();
      const aux = JSON.parse(xhr.responseText);
      return  xhr.responseText ;
    } else {
      return 'false'
    }
  }

}

Importamos el modulo a nuestra app con el siguiente código:

import {RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module} from 'ng-recaptcha';


@NgModule({
  declarations: [],
  imports: [
   RecaptchaV3Module

  ],
  providers: [
    {
    provide: RECAPTCHA_V3_SITE_KEY,
    useValue: 'pon_la_key_de_google',
  }]
})
Y añadiremos la funcionalidad en el componente:
<div *ngIf="robot == true">
    <p>Eres un robot</p>
  </div>
  <div *ngIf="robot == false">
    <p>No eres un robot</p>
  </div>

   public robot: boolean;

  constructor(   private recaptchaV3Service: ReCaptchaV3Service,   public captchaSerice: RecaptchaService

  ) {
    this.robot = true;
    this.recaptchaV3Service.execute('')
      .subscribe((token) => {
        const auxiliar = this.captchaSerice.getToken(token)
        if (  auxiliar.includes('true') ) {
          this.robot = false;
        }
      });
  }

Por último, modificamos la api para recibir la petición del front-end creando la siguiente ruta en el proyecto https://github.com/al118345/envio_email_api_python
class Verificar_Captcha(Resource):
        def post(self, token):
            recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'
            recaptcha_secret_key = ''
            payload = {
                'secret': recaptcha_secret_key,
                'response': token,
                'remoteip': request.remote_addr,
            }
            response = requests.post(recaptcha_url, data=payload)
            result = response.json()
            return result.get('success', False)

local_resources = [
    (Verificar_Captcha, '/verificar/<string:token>/'),
]
Para terminar, en la web https://www.google.com/u/3/recaptcha/admin/ puedes consultar una vista como la siguiente imagen dónde puedes comprobar la cantidad de gente que ha realizado el login y la puntuación obtenida de media.

Ejemplo en ejecución

¿Eres un robot?. Según recaptcha de Google:

Eres un robot