Maelezo ya Katika makala hii, tutaunda programu ya WEB kutumia toleo la hivi karibuni la na kuunganisha kwa CAPTCHA changamoto ya kulinda dhidi ya bots. ya angular AWS WAF (Web Application Firewall) ya angular AWS WAF (Ufunguo wa Maombi ya Mtandao) Mahitaji ya Kabla ya kuanza, unahitaji kufunga na kuunda zana zifuatazo ili kuunda programu ya Angular na kuunganisha na captcha ya AWS WAF. 
 
 
 
 
 Node.js na npm: Node.js ni programu ya uendeshaji wa msimbo wa JavaScript kulingana na injini ya V8 ya Google. npm ni msimamizi wa pakiti kwa Node.js (Node.js Package Manager). Watatumiwa kujenga na kuendesha programu ya Angular na kufunga maktaba. Angular CLI: Angular CLI ni chombo cha mstari wa amri kwa Angular, na itatumika kuunda muundo wa msingi wa programu ya Angular. IDE (kwa mfano, Visual Studio Code au WebStorm): IDE (Integrated Development Environment) ni chombo na interface ya graphics kusaidia katika maendeleo ya maombi, na itatumika kuendeleza maombi ya Angular. Akaunti ya AWS: Huduma za wavuti za Amazon ni jukwaa la huduma za kompyuta ya wingu, na itatumika kuunganisha changamoto ya AWS WAF CAPTCHA. Node.js na NPM Mzunguko wa CLI Kodi ya Visual Studio Mtandao wa Storm Akaunti ya AWS Kuanza kwa Kuunda na kuunda akaunti kwenye AWS WAF. Firewall ya Maombi ya Mtandao (Web Application Firewall) ni huduma ya usalama iliyoundwa kulinda maombi yako na API kutoka kwa matumizi ya udhaifu wa kawaida wa mtandao na bots ambayo inaweza kuathiri upatikanaji, kuathiri usalama, au kutumia rasilimali nyingi. AWS wafu AWS wafu Hebu tufikia akaunti ya AWS. Kuingia kwenye tovuti Bonyeza kwenye kiungo . 1. , https://aws.amazon.com/waf/ Kuingia kwenye Console https://aws.amazon.com/waf/     Maelezo ya: 
 
 Ikiwa huna akaunti ya Amazon, kufuata hatua 1 hadi 9 ya Post Utambulisho kwa kutumia Amazon Cognito kwa programu ya Angular katika mzunguko. Utambulisho kwa kutumia Amazon Cognito kwa programu ya Angular Utambulisho kwa kutumia Amazon Cognito kwa programu ya Angular Sasa, tutajaza katika uwanja wa Kujaza katika uwanja Kujaza katika uwanja na bonyeza kwenye kifungo . 2. Akaunti ya ID au Alias Jina la mtumiaji kwa ajili ya password, Ujumbe wa     Kwa hiyo, tutakuwa na aina ya katika uwanja wa utafutaji na bonyeza chaguo . 3. wafu Maelezo ya WAF & Shield     Baada ya hapo, tunapaswa kubonyeza kwenye menu . 4. Ushirikiano wa Maombi     Baada ya kubonyeza kwenye menu Tutacheza kwenye tab . 5. Ushirikiano wa Maombi Ushirikiano wa CAPTCHA     Sasa, sisi kubonyeza juu ya chaguo Bonyeza kwenye kifungo ili nakala URL ya faili ya JavaScript, kwa sababu URL hii itawekwa katika maombi ya Angular, na bonyeza kifungo . 6. Maelezo ya CloudFront JavaScript Maoni yako ya JavaScript Kuanza kwa API Key     Baada ya hapo, tutaweza kubonyeza chaguo Kujaza katika uwanja na kikoa cha tovuti yako, na bonyeza kwenye kifungo . 7. CloudFront Domain ya Kuanza kwa API Key     Kisha, tutapiga kwenye icon ili nakala kifungo cha API kwa sababu kifungo hiki cha API kitakubaliwa katika programu ya Angular. 8.     Suluhisho la API limeundwa. 9. Kuunda maombi ya angular. ni jukwaa la maendeleo kwa ajili ya kujenga WEB, simu, na programu za desktop kutumia HTML, CSS, na TypeScript (JavaScript). Kwa sasa, Angular ni katika toleo 21, na Google ni mlinzi mkuu wa mradi huo. ya angular ya angular Hebu kuunda programu na muundo wa msingi wa Angular kwa kutumia chombo na faili za ufungaji wa AI kufungwa, kuonyesha upande wa seva (SSR) kufungwa, faili ya njia kufungwa, na muundo wa mtindo wa 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.
 Sasa, tutaanzisha na kuunda mfumo wa Bootstrap CSS. Tutafanya hatua 2 na 3 ya chapisho . 2. Kuongeza mfumo wa Bootstrap CSS kwa programu ya Angular Kuongeza mfumo wa Bootstrap CSS kwa programu ya Angular Kuongeza mfumo wa Bootstrap CSS kwa programu ya Angular 
 
 Kisha, tutaunda faili za usanidi kwa ajili ya mabadiliko ya mazingira kwa amri hapa chini. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 Baada ya hapo, tutakuwa na mabadiliko. na URL ya faili ya JavaScript ambayo ina msimbo wa ushirikiano wa AWS WAF na variable na kifungo cha API kilichoundwa katika AWS WAF katika na ya Faili kama ilivyo chini. 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',
    },
  },
 Baada ya kubadilisha variables, tutaondoa maudhui ya ya darasa la Faili, kuunda na ya mbinu, na kutekeleza Njia ya Mwalimu ambaye atafanya kazi ya njia kama ilivyo chini. 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('');
        },
      });
    }
  }

}
 Sasa, tutaondoa maudhui kutoka kwa Fichia na kuongeza kwa Tag kwa ajili ya Mabadiliko ya chini kama ilivyo chini. 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>
 
 
 Kisha, tutaendesha programu kwa amri hapa chini. 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
 Tutaweza kuingia kwenye URL Angalia kama programu inafanya kazi. 8. http://localhost:4200/             Programu ya Angular iliundwa na kuunganishwa na changamoto ya AWS WAF CAPTCHA. 9. Huduma ya maombi inapatikana katika . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha Mwisho wa Kuhusu kile kilichojulikana katika makala hii: 
 
 
 Tumeunda kifungo cha API na kurekebisha kikoa ambapo captcha itafanya kazi katika AWS WAF. Tumeunda programu ya Angular na kuongezea msimbo wa captcha. Unaweza kutumia makala hii kuunda maombi ya wavuti na ulinzi wa bot kwa kutumia changamoto ya captcha ya AWS WAF. Shukrani kwa ajili ya kusoma, na natumaini umefurahia makala hii! Tutorial hii ilichapishwa kwenye katika lugha ya Kijapani. blog Blog ya Ili kuwa na update kila wakati na post makala mpya, kufuata mimi juu na ya . wa Twitter Maelezo ya LinkedIn wa Twitter Maelezo ya 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

Sauti hii imetolewa katika lugha asilia ya hadithi!

Ndefu sana; Kusoma

Jinsi ya kuongeza AWS WAF CAPTCHA kwa Maombi ya Angular

Jinsi ya kuongeza AWS WAF CAPTCHA kwa Maombi ya Angular

About Author

MAONI

HANG TAGS

MAKALA HII ILIWASILISHWA NDANI

Related Stories

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Sweet Security Unveils First Unified Detection And Response Platform

Jinsi $ TRUTH token ya Swarm Network inapanga kukabiliana na taarifa mbaya kupitia uhakiki wa Blockchain

Speed up Swift compile time

#ellenBrain Turns a Long Weekend Into: HackerNoon Swag Around the World

Sweet Security Unveils First Unified Detection And Response Platform

Jinsi $ TRUTH token ya Swarm Network inapanga kukabiliana na taarifa mbaya kupitia uhakiki wa Blockchain

Speed up Swift compile time

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps