Introduktion I denne artikel vil vi oprette en webapplikation ved hjælp af den nyeste version af og integrere de CAPTCHA udfordring for at beskytte mod bots. Vinkel AWS WAF (Web Application Firewall) er en firewall til webapplikationer Vinkel AWS WAF (Web Application Firewall) er en firewall til webapplikationer Forudsætninger Før vi begynder, skal du installere og konfigurere værktøjerne nedenfor for at oprette Angular-applikationen og integrere den med AWS WAF captcha. 
 
 
 
 
 Node.js og npm: Node.js er en JavaScript-kode Runtime-software baseret på Googles V8-motor. npm er en pakkeadministrator for Node.js (Node.js Package Manager). De vil blive brugt til at opbygge og køre Angular-applikationen og installere bibliotekerne. Angular CLI: Angular CLI er et kommandolinjeværktøj til Angular, og det vil blive brugt til at oprette basisstrukturen af Angular-applikationen. IDE (f.eks. Visual Studio Code eller WebStorm): En IDE (Integrated Development Environment) er et værktøj med et grafisk interface til hjælp i udviklingen af applikationer, og det vil blive brugt til at udvikle Angular applikationen. AWS-konto: Amazon Web Services er en cloud computing-tjenesteplatform, som vil blive brugt til at integrere AWS WAF CAPTCHA-udfordringen. Node.js og NPM Angulær CLI Visual Studio Kode Webstorm AWS konto At blive startet Opret og konfigurer kontoen på AWS WAF. (Web Application Firewall) er en sikkerhedstjeneste designet til at beskytte dine webapplikationer og API'er mod udnyttelse af almindelige internetsårbarheder og bots, der kan påvirke tilgængeligheden, kompromittere sikkerheden eller forbruge overdrevne ressourcer. af AWS WAF af AWS WAF Lad os få adgang til AWS-kontoen. og klik på linket . 1. , https://aws.amazon.com/waf/ Tilmeld dig konsollen https://aws.amazon.com/waf/     Notat af: 
 
 Hvis du ikke har en Amazon-konto, skal du følge trin 1 til 9 i indlægget Autentificering ved hjælp af Amazon Cognito til et Angular-program i sessionen. Autentificering ved hjælp af Amazon Cognito til et Angular-program Autentificering ved hjælp af Amazon Cognito til et Angular-program Nu vil vi fylde feltet Fyld i feltet Fyld i feltet og klik på knappen . 2. Konto ID eller alias Jeg har brugernavn af Password, Mærke i     Dernæst vil vi tippe i søgefeltet og klik på indstillingen . 3. Vafs Om WAF & Shield     Herefter klikker vi på menuen . 4. Integration af applikationer     Når du klikker på menuen Vi vil klikke på tab . 5. Integration af applikationer CAPTCHA integration     Nu vil vi klikke på alternativet Klik på knappen at kopiere URL'en af JavaScript-filen, fordi denne URL vil blive konfigureret i Angular-applikationen, og klik på knappen . 6. CloudFront JavaScript tag Kopiér JavaScript tag Generering af API nøgle     Herefter klikker vi på indstillingen Fyld i feltet med dit websteds domæne, og klik på knappen . 7. Cloudfronten Domæne Generering af API nøgle     Derefter vil vi klikke på ikonet for at kopiere API-nøglen, fordi denne API-nøgle vil blive konfigureret i Angular-applikationen. 8.     API nøglen er skabt. 9. Skab den angulære applikation. er en udviklingsplatform til opbygning af web, mobile og desktop applikationer ved hjælp af HTML, CSS og TypeScript (JavaScript). I øjeblikket, Angular er på version 21, og Google er den vigtigste vedligeholder af projektet. Vinkel Vinkel Lad os oprette applikationen med angulær base struktur ved hjælp af værktøj med AI-konfigurationsfilerne deaktiveret, server-side rendering (SSR) deaktiveret, rutefilen deaktiveret og SCSS-stilformatet. 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.
 Nu vil vi installere og konfigurere Bootstrap CSS framework. Vi vil gøre trin 2 og 3 af posten . 2. Tilføjelse af Bootstrap CSS-rammen til et Angular-program Tilføjelse af Bootstrap CSS-rammen til et Angular-program Tilføjelse af Bootstrap CSS-rammen til et Angular-program 
 
 Dernæst vil vi oprette konfigurationsfiler for miljøvariablerne med kommandoen nedenfor. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 Dernæst vil vi opstille variablen med URL-adressen for JavaScript-filen, der indeholder AWS WAF-integrationskoden og variablen med API-nøglen, der blev oprettet i AWS WAF i og Filer som nedenfor. 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',
    },
  },
 Efter konfiguration af variablerne fjerner vi indholdet af Klassen fra den arkivere, oprette den og metoder og gennemføre de Metoden for den klassen, som den vil udføre Metode som nedenfor. 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('');
        },
      });
    }
  }

}
 Nu vil vi fjerne indholdet fra Arkivér og tilføj Tag med den Variabler som nedenfor. 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>
 
 
 Derefter kører vi applikationen med kommandoen nedenfor. 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
 Herefter får du adgang til URL’en. Undersøg, om applikationen fungerer. 8. http://localhost:4200/             Angular-applikationen blev skabt og integreret med AWS WAF CAPTCHA-udfordringen. 9. Ansøgningsdatabasen er tilgængelig på . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha Konklusionen For at opsummere, hvad der blev dækket i denne artikel: 
 
 
 Vi har oprettet API-nøglen og konfigureret det domæne, hvor captchaen vil fungere i AWS WAF. Vi oprettede en Angular-applikation og tilføjede captcha-koden. Du kan bruge denne artikel til at oprette webapplikationer med botbeskyttelse ved hjælp af AWS WAF captcha-udfordringen. Tak for læsningen, og jeg håber du har nydt artiklen! Denne tutorial blev udgivet på min på portugisisk blog Bloggen For at holde dig opdateret hver gang jeg skriver nye artikler, følg mig på og . på Twitter af Linkedin på Twitter af 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

Denne lyd er produceret på historiens originalsprog!

For langt; At læse

Sådan tilføjes AWS WAF CAPTCHA til et angulært program

Sådan tilføjes AWS WAF CAPTCHA til et angulært program

About Author

KOMMENTARER

HÆNG TAGS

DENNE ARTIKEL BLEV PRÆsenterET I

Related Stories

Meet inDrive: The HackerNoon Company of the Week

Meet Surfshark: HackerNoon Company of the Week

Yale Media Relations for Entrepreneurs with Journalist Walter Thompson & HackerNoon CEO David Smooke

Meet MinIO: The HackerNoon Company of the Week

Meet inDrive: The HackerNoon Company of the Week

Meet Surfshark: HackerNoon Company of the Week

Yale Media Relations for Entrepreneurs with Journalist Walter Thompson & HackerNoon CEO David Smooke

Meet MinIO: The HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps