Introducción En este artículo, vamos a crear una aplicación WEB usando la última versión de y integrar el CAPTCHA desafío para proteger contra bots. Angular AWS WAF (Firewall de Aplicaciones Web) Angular AWS WAF (Firewall de Aplicaciones Web) Precondiciones Antes de comenzar, debe instalar y configurar las herramientas a continuación para crear la aplicación Angular e integrarla con el captcha de AWS WAF. 
 
 
 
 
 Node.js y npm: Node.js es un software de código JavaScript basado en el motor V8 de Google. npm es un gestor de paquetes para Node.js (Node.js Package Manager). Se utilizarán para construir y ejecutar la aplicación Angular e instalar las bibliotecas. Angular CLI: Angular CLI es una herramienta de línea de comandos para Angular, y se utilizará para crear la estructura base de la aplicación Angular. IDE (por ejemplo, Visual Studio Code o WebStorm): Un IDE (Integrated Development Environment) es una herramienta con una interfaz gráfica para ayudar en el desarrollo de aplicaciones, y se utilizará para desarrollar la aplicación Angular. Cuenta de AWS: Amazon Web Services es una plataforma de servicios de computación en la nube, y se utilizará para integrar el desafío AWS WAF CAPTCHA. Node.js y NPM Ángulo CLI Código de Visual Studio WebTormenta Cuenta de AWS Empezando a Crear y configurar la cuenta en AWS WAF. (Web Application Firewall) es un servicio de seguridad diseñado para proteger sus aplicaciones y APIs de los exploits de vulnerabilidades comunes de Internet y bots que pueden afectar la disponibilidad, comprometer la seguridad o consumir recursos excesivos. AWS WAF AWS WAF Acceda a la cuenta de AWS. Acceso al sitio Y hacer clic en el enlace . 1. , https://aws.amazon.com/waf/ Inscríbete en la consola https://aws.amazon.com/waf/     Notas : 
 
 Si no tiene una cuenta de Amazon, siga los pasos 1 a 9 de la publicación Autenticación usando el Amazon Cognito a una aplicación Angular en la sesión. Autenticación usando el Amazon Cognito a una aplicación Angular Autenticación usando el Amazon Cognito a una aplicación Angular Ahora, vamos a llenar el campo Rellenar en el campo Rellenar en el campo Y hacer clic en el botón . 2. ID de cuenta o alias Nombre de usuario La contraseña, señales en     A continuación, vamos a tipificar en el campo de búsqueda y haga clic en la opción . 3. WAF Página oficial de WAF & Shield     Luego, hacer clic en el menú . 4. Integración de aplicaciones     Después de hacer clic en el menú , vamos a hacer clic en el tab . 5. Integración de aplicaciones Integración CAPTCHA     Ahora, vamos a hacer clic en la opción clic en el botón para copiar la URL del archivo JavaScript, porque esta URL se configurará en la aplicación Angular, y haga clic en el botón . 6. Descargar CloudFront JavaScript Descargar la etiqueta JavaScript Creación de API Key     A continuación, hacer clic en la opción Rellenar en el campo con el dominio de su sitio web, y haga clic en el botón . 7. El CloudFront dominio Creación de API Key     Luego, hacer clic en el icono para copiar la clave de la API porque esta clave de la API se configurará en la aplicación Angular. 8.     Se ha creado la clave de API. 9. Crear una aplicación angular. es una plataforma de desarrollo para la construcción de aplicaciones web, móviles y de escritorio utilizando HTML, CSS y TypeScript (JavaScript). Actualmente, Angular está en la versión 21, y Google es el principal mantenedor del proyecto. Angular Angular Vamos a crear la aplicación con la estructura de base angular usando la herramienta con los archivos de configuración de IA deshabilitados, el rendimiento del lado del servidor (SSR) deshabilitado, el archivo de ruta deshabilitado y el formato de estilo SCSS. 1. @angular/cli ng new angular-aws-waf-captcha --ai-config=none --ssr=false --routing=false --style=scss
CREATE angular-aws-waf-captcha/README.md (1473 bytes)
CREATE angular-aws-waf-captcha/.editorconfig (314 bytes)
CREATE angular-aws-waf-captcha/.gitignore (604 bytes)
CREATE angular-aws-waf-captcha/angular.json (2084 bytes)
CREATE angular-aws-waf-captcha/package.json (970 bytes)
CREATE angular-aws-waf-captcha/tsconfig.json (957 bytes)
CREATE angular-aws-waf-captcha/tsconfig.app.json (429 bytes)
CREATE angular-aws-waf-captcha/tsconfig.spec.json (441 bytes)
CREATE angular-aws-waf-captcha/.vscode/extensions.json (130 bytes)
CREATE angular-aws-waf-captcha/.vscode/launch.json (470 bytes)
CREATE angular-aws-waf-captcha/.vscode/tasks.json (978 bytes)
CREATE angular-aws-waf-captcha/src/main.ts (222 bytes)
CREATE angular-aws-waf-captcha/src/index.html (306 bytes)
CREATE angular-aws-waf-captcha/src/styles.scss (80 bytes)
CREATE angular-aws-waf-captcha/src/app/app.scss (0 bytes)
CREATE angular-aws-waf-captcha/src/app/app.spec.ts (690 bytes)
CREATE angular-aws-waf-captcha/src/app/app.ts (246 bytes)
CREATE angular-aws-waf-captcha/src/app/app.html (20086 bytes)
CREATE angular-aws-waf-captcha/src/app/app.config.ts (203 bytes)
CREATE angular-aws-waf-captcha/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
 Ahora, vamos a instalar y configurar el marco CSS de Bootstrap. haremos los pasos 2 y 3 del post . 2. Añadir el marco CSS de Bootstrap a una aplicación Angular Añadir el marco CSS de Bootstrap a una aplicación Angular Añadir el marco CSS de Bootstrap a una aplicación Angular 
 
 A continuación, crearemos archivos de configuración para las variables de entorno con el comando de abajo. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 Entonces, vamos a configurar la variable con la URL del archivo JavaScript que contiene el código de integración AWS WAF y la variable con la clave de API que se creó en AWS WAF en la y archivos como más abajo. 4. aws.waf.url aws.waf.apiKey src/environments/environment.ts src/environments/environment.development.ts   aws: {
    waf: {
      url: 'https://a162a8302aaa.edge.captcha-sdk.awswaf.com/a162a8302aaa/jsapi.js',
      apiKey: 'QprVjPcLgWgjYBGZoci9OMw9CFJSZZtr2gHt7McsehfL1+Hi+6Rp5y99a0p3vmdsq5Wkat06xfZSTc6dfjvR5w9COBfYhcsXvdRPAGSd9Zxfx6W2QfDsDc2IdiQImVfAl35Uw3tBYd31B3rVlT9q4pEcipVFo29NcqRjYneV7peX2Q+vvd4ttjX0QuM3d+csxtCjaHYSquk6nySEun5QTnbUsq0TE2gliQRFYgHFX9vXSWrkkAXHwWtaxr86kzIeIPoesRAC3JB7kwyK6l4sYoo6w7fTSougEwpjJHGIo8LHdjlxmmNpE2umf1z1go3Ixjm/ujc919tn2FCuGbnW4OEXVWotx3qjf+FPkFbght+ccXsXsL2eHoPgj0sHKaeK0fYpGlJnpwDp+ep64+UVm46Y7Udr7RVLjCnngBcgTRnmA20uy+agfhRnBJk6Y34OgJQJnWuoYXCoVETlFus4ATJ69dny8/6GxUUObjcU6gnfpyR5vkaqmKwSluu6i/x90o9pm1/TTFeh4iuSGylrMySzOe4PsxqMOYR9ow9hnrm7fXz+yE2GoQUJjLWpOUfcmcFmOonjslxIxwDjafWBPACec3JBWGYjAF0H+98Bg6vPly9wlxJwiz6eiMjULPfb1lM7rr6crZ1VaZ964pw21FZSrOdAMknmGSZvmKGAzeU=_1_1',
    },
  },
 Después de configurar las variables, eliminaremos el contenido de la clase de la archivo, crear el y métodos, y la implementación de los El método de la La clase que va a ejecutar el El método de abajo. 5. App src/app/app.ts loadScript renderCaptcha ngAfterViewInit AfterViewInit loadScript export class App implements AfterViewInit {

  captchaRef = viewChild>('captcha');
  messageSuccess = model('');
  messageError = model('');

  constructor() {
  }

  ngAfterViewInit(): void {
    this.loadScript();
  }

  private loadScript(): void {
    if (document.getElementById('awsWafScript')) {
      return;
    }

    const script = document.createElement('script');
    script.id = 'awsWafScript';
    script.async = false;
    script.defer = true;
    script.src = environment.aws.waf.url;
    script.onload = () => {
      this.renderCaptcha();
    };
    document.head.appendChild(script);
  }

  private renderCaptcha(): void {
    const captchaElementRef = this.captchaRef();

    if (window.AwsWafCaptcha && captchaElementRef) {
      window.AwsWafCaptcha.renderCaptcha(captchaElementRef.nativeElement, {
        apiKey: environment.aws.waf.apiKey,
        onSuccess: (token: string) => {
          this.messageSuccess.set(`Captcha successfully validated! Token: ${token}`);
          this.messageError.set('');
        },
        onError: (error: any) => {
          this.messageError.set(`Error validating captcha: ${error}`);
          this.messageSuccess.set('');
        },
      });
    }
  }

}
 Ahora, vamos a eliminar el contenido del archivo y añadir el Tag con el variables como la de abajo. 6. src/app/app.html div captcha <div class="container-fluid py-3">
  <h1>Angular AWS WAF Captcha</h1>

  <div class="row mt-3">
    <div class="col-sm-12">
      <div #captcha></div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-12">
      <p class="text-center text-success">{{ messageSuccess() }}</p>
      <p class="text-center text-danger">{{ messageError() }}</p>
    </div>
  </div>
</div>
 
 
 A continuación, ejecutaremos la aplicación con el comando de abajo. npm run start

> angular-aws-waf-captcha@1.0.0 start
> ng serve

Initial chunk files | Names         |  Raw size
styles.css          | styles        | 377.03 kB | 
main.js             | main          |   6.10 kB | 

                    | Initial total | 383.13 kB

Application bundle generation complete. [2.375 seconds] - 2026-01-17T18:13:56.184Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
 A continuación, accederemos a la URL Comprobar si la aplicación está funcionando. 8. http://localhost:4200/             La aplicación Angular fue creada e integrada con el desafío AWS WAF CAPTCHA. 9. El repositorio de aplicaciones está disponible en . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha Conclusión Resumiendo lo que se describe en este artículo: 
 
 
 Creamos la clave de la API y configuramos el dominio en el que funcionará el captcha en AWS WAF. Creamos una aplicación Angular y añadimos el código captcha. Puede utilizar este artículo para crear aplicaciones web con protección de bot utilizando el desafío de captcha de AWS WAF. Gracias por leer y espero que te haya gustado el artículo! Este tutorial ha sido publicado en en el portugués. blog El blog Para permanecer actualizado cada vez que publiqué nuevos artículos, sígueme en y . En Twitter Linkedin En Twitter Linkedin

I am creating content to share my knowledge and help people on their technology journey.

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2022 - HackerNoon Contributor of the Year - Amazon

2022 - HackerNoon Contributor of the Year - Angular

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Aws

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Website Development

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Cómo agregar el AWS WAF CAPTCHA a una aplicación angular

Cómo agregar el AWS WAF CAPTCHA a una aplicación angular

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Telegram: el puente de Crypto Island hacia el continente

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Telegram: el puente de Crypto Island hacia el continente

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps