Introducció En aquest article, crearem una aplicació WEB utilitzant l'última versió de I integrar el Captcha protegeix contra els robots. Angular AWS WAF (Firewall d’aplicacions web) Angular AWS WAF (Firewall d’aplicacions web) Prerequisits Abans de començar, haureu d'instal·lar i configurar les eines següents per crear l'aplicació Angular i integrar-la amb el captcha AWS WAF. 
 
 
 
 
 Node.js i npm: Node.js és un programari d'execució de codi JavaScript basat en el motor V8 de Google. npm és un gestor de paquets per a Node.js (Node.js Package Manager). Angular CLI: Angular CLI és una utilitat de línia de comandes per a Angular, i s'utilitzarà per crear l'estructura base de l'aplicació Angular. IDE (per exemple, Visual Studio Code o WebStorm): Un IDE (Integrated Development Environment) és una eina amb una interfície gràfica per ajudar en el desenvolupament d'aplicacions, i s'utilitzarà per desenvolupar l'aplicació Angular. Compte AWS: Amazon Web Services és una plataforma de serveis de computació en núvol que s'utilitzarà per integrar el repte AWS WAF CAPTCHA. Node.js i NPM Angular CLI Codi d'estudi visual WebStorm El compte AWS Començar Creació i configuració del compte a AWS WAF. (Web Application Firewall) és un servei de seguretat dissenyat per protegir les aplicacions i les APIs de les vulnerabilitats comunes d'Internet i els robots que poden afectar la disponibilitat, comprometre la seguretat o consumir recursos excessius. AWS WAF AWS WAF Anem a accedir al compte AWS. Accés al lloc i clic a l'enllaç . 1. , https://aws.amazon.com/waf/ Inscripció a la consola https://aws.amazon.com/waf/     Notació : 
 
 Si no teniu un compte d'Amazon, seguiu els passos 1 a 9 del post Autenticació utilitzant l'Amazon Cognito a una aplicació Angular en la sessió. Autenticació utilitzant Amazon Cognito a una aplicació Angular Autenticació utilitzant Amazon Cognito a una aplicació Angular A continuació, omplim el camp Omple el camp Omple el camp i cliqueu sobre el botó . 2. ID de compte o àlies Nom d'usuari La contrasenya, Signatura en     A continuació, farem el tipus en el camp de cerca i feu clic a l'opció . 3. Vaf Màster en WAF & Shield     A continuació, farem clic al menú . 4. Integració d’aplicacions     Després de fer clic al menú , clicarem a la pestanya . 5. Integració d’aplicacions Integració captcha     A continuació, farem clic a l’opció Cliqueu sobre el botó per copiar l'URL del fitxer JavaScript, perquè aquesta URL es configurarà a l'aplicació Angular, i feu clic al botó . 6. Targeta JavaScript de CloudFront Descarregar el codi JavaScript Creació de claus API     A continuació, farem clic a l'opció Omple el camp amb el domini del vostre lloc web, i feu clic al botó . 7. El CloudFront Domini Creació de claus API     A continuació, farem clic a la icona per copiar la clau de l'API perquè aquesta clau d'API es configurarà a l'aplicació Angular. 8.     La clau API ha estat creada. 9. Creació de l’aplicació Angular. és una plataforma de desenvolupament per a la construcció d'aplicacions web, mòbils i d'escriptori utilitzant HTML, CSS i TypeScript (JavaScript). Actualment, Angular està en la versió 21, i Google és el principal mantenidor del projecte. Angular Angular Creem l'aplicació amb l'estructura de base angular utilitzant la eina amb els arxius de configuració d'IA desactivats, el rendiment del costat del servidor (SSR) desactivat, el fitxer de ruta desactivat i el format d'estil 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.
 Ara, instal·larem i configurarem el marc CSS de Bootstrap. Farem els passos 2 i 3 del post . 2. Afegir el marc CSS de Bootstrap a una aplicació Angular Afegir el marc CSS de Bootstrap a una aplicació Angular Afegir el marc CSS de Bootstrap a una aplicació Angular 
 
 A continuació, crearem fitxers de configuració per a les variables ambientals amb el comandament de sota. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 A continuació, configurarem la variable amb l'URL del fitxer JavaScript que conté el codi d'integració AWS WAF i la variable amb la clau API que es va crear a AWS WAF en el i Arxius com a baix. 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',
    },
  },
 Després de configurar les variables, eliminarem el contingut del classe de la Arxiu: Crea el i Els mètodes i la implementació de Mètode de la La classe que l’executarà Mètode com a baix. 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('');
        },
      });
    }
  }

}
 A partir d’aquí s’eliminarà el contingut de la Arxiu i afegir Tag amb el Variables de referència a continuació. 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ó, executarem l'aplicació amb el comandament de sota. 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ó, accedirem a l’URL Comproveu si l’aplicació funciona. 8. http://localhost:4200/             L'aplicació Angular va ser creada i integrada amb el repte AWS WAF CAPTCHA. 9. El repositori d'aplicacions està disponible a . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha Conclusió Resumint el que es va tractar en aquest article: 
 
 
 Hem creat la clau de l'API i hem configurat el domini on el captcha funcionarà a AWS WAF. Hem creat una aplicació Angular i hem afegit el codi captcha. Podeu utilitzar aquest article per crear aplicacions web amb protecció de bot utilitzant el repte de captcha de AWS WAF. Gràcies per llegir i espero que us hagi agradat l'article! Aquest article ha estat publicat a la meva en el portuguès. blog El blog Per mantenir-me actualitzat cada vegada que publiqui nous articles, seguiu-me en i . El Twitter Linkedin El 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

Aquest àudio és produït a l'idioma original de la història!

Massa Llarg; Per llegir

Com afegir l'AWS WAF CAPTCHA a una aplicació angular

Com afegir l'AWS WAF CAPTCHA a una aplicació angular

About Author

COMENTARIS

Etiquetes penjant

AQUEST ARTICLE VA SER PRESENTAT A

Related Stories

Meet Catchpoint: HackerNoon Company of the Week

Meet Filestack: HackerNoon Company of the Week

Why Over-Explaining Your Tech Is Killing Your Content Strategy

Startups of The Year: Meet the Cybersecurity Industry

Meet Catchpoint: HackerNoon Company of the Week

Meet Filestack: HackerNoon Company of the Week

Why Over-Explaining Your Tech Is Killing Your Content Strategy

Startups of The Year: Meet the Cybersecurity Industry

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps