ລະຫັດ QR ໃນບົດຄວາມນີ້, ພວກເຮົາຈະສ້າງການນໍາໃຊ້ WEB ໂດຍໃຊ້ຕົວແທນທີ່ທັນສະໄຫມຂອງ ການເຊື່ອມຕໍ່ ການຝຶກອົບຮົມ CAPTCHA ສໍາລັບການປ້ອງກັນກັບ bots. ຫນ້າທໍາອິດ ດາວນ໌ໂຫລດ AWS WAF (Web Application Firewall) ຫນ້າທໍາອິດ ດາວນ໌ໂຫລດ AWS WAF (Web Application Firewall) ຄໍາຖາມ ຫຼັງຈາກນັ້ນ, ທ່ານຕ້ອງຕິດຕັ້ງແລະຕິດຕັ້ງເຄື່ອງມືທີ່ຜ່ານມາເພື່ອສ້າງ Application Angular ແລະຕິດຕໍ່ກັບ AWS WAF CAPTCHA. 
 
 
 
 
 Node.js ແລະ npm: Node.js ແມ່ນໂຄງການລະຫັດ JavaScript runtime ທີ່ຖືກສ້າງຕັ້ງຂຶ້ນໃນເຄື່ອງຈັກ V8 ຂອງ Google. npm ເປັນຜູ້ຈັດການບັນທຶກສໍາລັບ Node.js (Node.js Package Manager). ພວກເຂົາຈະຖືກນໍາໃຊ້ເພື່ອສ້າງແລະດໍາເນີນການ application Angular ແລະຕິດຕັ້ງບັນທຶກ. Angular CLI: Angular CLI ເປັນອຸປະກອນອຸປະກອນຊຸດຄົ້ນຄວ້າສໍາລັບ Angular, ແລະມັນຈະຖືກນໍາໃຊ້ເພື່ອສ້າງໂຄງສ້າງພື້ນຖານຂອງອຸປະກອນ Angular. IDE (ລວມທັງ Visual Studio Code ຫຼື WebStorm): A IDE (Integrated Development Environment) ແມ່ນເຄື່ອງມືທີ່ມີອິນເຕີເນັດຟຣີເພື່ອຊ່ວຍໃນການພັດທະນາຂອງອຸປະກອນ, ແລະມັນຈະຖືກນໍາໃຊ້ເພື່ອພັດທະນາອຸປະກອນ Angular. AWS Account: Amazon Web Services ເປັນບໍລິການບໍລິການ cloud, ແລະມັນຈະຖືກນໍາໃຊ້ເພື່ອຕິດຕໍ່ຄວາມຕ້ອງການ AWS WAF CAPTCHA. Node.js ແລະ npm ປະເພດ Angular CLI ລະຫັດ Visual Studio ຫນ້າທໍາອິດ WebStorm ຂໍ້ມູນ AWS ການເລີ່ມຕົ້ນ ການສ້າງແລະກໍານົດບັນຊີໃນ AWS WAF. (Web Application Firewall) ເປັນບໍລິການຄວາມປອດໄພທີ່ອອກແບບມາເພື່ອປົກປັກຮັກສາ Applications ແລະ APIs ຂອງທ່ານຈາກ exploits ຂອງຄວາມປອດໄພຂອງອິນເຕີເນັດທົ່ວໄປແລະ bots ທີ່ສາມາດປະໂຫຍດການຮັບປະກັນຄວາມປອດໄພຫຼືການນໍາໃຊ້ຄຸນນະພາບສູງ. ປະເພດ AWS WAF ປະເພດ AWS WAF ການເຂົ້າເຖິງ AWS Account. Access the site ດາວນ໌ໂຫລດ Click On The Link . 1. , https://aws.amazon.com/waf/ ດາວນ໌ໂຫລດ Console https://aws.amazon.com/waf/     ປະເພດ: 
 
 ຖ້າຫາກວ່າທ່ານບໍ່ມີອີເມວ Amazon, ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກນັ້ນ, ທ່ານຈະໄດ້ຮັບການເຂົ້າໃຈກັບຄໍາຮ້ອງສະຫມັກ Angular ໃນຂະນະທີ່ທ່ານໄດ້ຮັບການເຂົ້າໃຈກັບ Amazon Cognito. ການເຂົ້າລະຫັດໂດຍໃຊ້ Amazon Cognito ກັບ Application Angular ການເຂົ້າລະຫັດໂດຍໃຊ້ Amazon Cognito ກັບ Application Angular ໃນປັດຈຸບັນ, ພວກເຮົາຈະກວດສອບໃນ field ຊື່ຫຍໍ້ຂອງ : Fill in the field ຊື່ຫຍໍ້ຂອງ : Fill in the field ດາວນ໌ໂຫລດ Click On The Button . 2. ລະຫັດ QR ລະຫັດ QR ລະຫັດ QR ລະຫັດ QR     ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະປະເພດ ໃນ field ການຊອກຫາແລະຄລິກໃສ່ Option . 3. ອັດຕະໂນມັດ ຫນ້າທໍາອິດ / WAF & Shield     ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະຊອກຫາໃນ menu . 4. ການນໍາໃຊ້ Integration     ຫຼັງຈາກການຄລິກໃສ່ Menu , ພວກເຮົາຈະຄລິກໃສ່ tab . 5. ການນໍາໃຊ້ Integration ການເຊື່ອມຕໍ່ CAPTCHA     ໃນປັດຈຸບັນ, ພວກເຮົາຈະຄລິກໃສ່ Option ດາວນ໌ໂຫລດ Click On The Button ເພື່ອຕັດ URL ຂອງເອກະສານ JavaScript, ເນື່ອງຈາກວ່າ URL ນີ້ຈະຖືກສ້າງຕັ້ງຂຶ້ນໃນ Application Angular, ແລະຄລິກໃສ່ button . 6. ດາວໂຫລດ CloudFront JavaScript ດາວນ໌ໂຫລດ JavaScript Tag ດາວໂຫລດ API Key     ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະຊອກຫາ Option ຊື່ຫຍໍ້ຂອງ : Fill in the field ກັບ Domain ຂອງເວັບໄຊທ໌ຂອງທ່ານ, ແລະຄລິກໃສ່ປຸ່ມນີ້ . 7. ລະຫັດ QR ປະເພດ Domain ດາວໂຫລດ API Key     ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະຄລິກໃສ່ icon ເພື່ອຕັດ API key ໃນຂະນະທີ່ API key ນີ້ຈະຖືກສ້າງຕັ້ງຂຶ້ນໃນ application Angular. 8.     ການອອກແບບ API Key 9. ດາວນ໌ໂຫລດ Angular App ມັນເປັນໂຄງການພັດທະນາສໍາລັບການສ້າງ WEB, mobile, ແລະ desktop applications using HTML, CSS, ແລະ TypeScript (JavaScript). ໃນປັດຈຸບັນ, Angular ແມ່ນໃນປັດຈຸບັນ 21 ແລະ Google ເປັນຜູ້ປົກຄອງຕົ້ນຕໍຂອງໂຄງການ. ຫນ້າທໍາອິດ ຫນ້າທໍາອິດ ດາວນ໌ໂຫລດ The Angular Base Structure ເຄື່ອງມືທີ່ມີເອກະສານ Configuration AI ດໍາ ເນີນ, ການ rendering server-side (SSR) ດໍາ ເນີນ, file routing ດໍາ ເນີນ, ແລະ format style 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.
 ໃນປັດຈຸບັນ, ພວກເຮົາຈະຕິດຕັ້ງແລະຕິດຕັ້ງ framework Bootstrap CSS. ພວກເຮົາຈະເຮັດການ 2 ແລະ 3 ຂອງບົດຄວາມ . 2. ການເພີ່ມ Bootstrap CSS Framework ໃນ application Angular ການເພີ່ມ Bootstrap CSS Framework ໃນ application Angular ການເພີ່ມ Bootstrap CSS Framework ໃນ application Angular 
 
 ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະສ້າງເອກະສານຄຸນນະສົມບັດສໍາລັບອຸປະກອນອຸປະກອນທີ່ມີຄຸນນະສົມບັດທີ່ຜ່ານມາ. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະຕິດຕັ້ງ variable ມີ URL ຂອງເອກະສານ JavaScript ລວມທັງ ລະຫັດ AWS WAF integration ແລະ variable ມີ API Key ທີ່ຖືກສ້າງຂຶ້ນໃນ AWS WAF ໃນ ແລະ ເອກະຊົນບໍລິການຂົນສົ່ງ 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',
    },
  },
 ຫຼັງຈາກການຄັດເລືອກຂອງ variables, ພວກເຮົາຈະຫຼຸດຜ່ອນອຸປະກອນຂອງ ລະຫັດ QR ດາວນ໌ໂຫລດ File Create ແລະ ລະຫັດ QR ວິທີການຂອງ ປະເພດທີ່ມັນຈະ execute ລະຫັດ QR 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('');
        },
      });
    }
  }

}
 ໃນປັດຈຸບັນ, ພວກເຮົາມີຄວາມຄິດເຫັນທີ່ ດາວໂຫລດ PDF Tag ກັບ The ປະເພດທີ່ແຕກຕ່າງກັນທີ່ຜ່ານມາ 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>
 
 
 ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະເຮັດວຽກກັບຄໍາຮ້ອງສະຫມັກໂດຍໃຊ້ຄໍາຮ້ອງສະຫມັກພາຍໃຕ້. 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
 ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະເຂົ້າເຖິງ URL ດາວນ໌ໂຫລດ App 8. http://localhost:4200/             ຄໍາຮ້ອງສະຫມັກ Angular ໄດ້ຖືກສ້າງຕັ້ງແລະຕິດຕໍ່ກັບ AWS WAF CAPTCHA Challenge. 9. ຄໍາຮ້ອງສະຫມັກ repository ແມ່ນມີຢູ່ໃນ . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha ພາສາລາວ ຊື່ຫຍໍ້ຂອງ : 
 
 
 ພວກເຮົາມີຄວາມສໍາຄັນ API ແລະກໍານົດພື້ນຖານທີ່ captcha ຈະເຮັດວຽກໃນ AWS WAF. ພວກເຮົາສ້າງການນໍາໃຊ້ Angular ແລະເພີ່ມລະຫັດ captcha. ທ່ານສາມາດນໍາໃຊ້ບົດຄວາມນີ້ເພື່ອສ້າງການນໍາໃຊ້ເວັບໄຊທ໌ທີ່ມີການປົກປັກຮັກສາ bot ໂດຍໃຊ້ AWS WAF captcha challenge. ຂໍຂອບໃຈວ່າທ່ານໄດ້ອ່ານບົດຄວາມນີ້, ແລະຂໍຂອບໃຈວ່າທ່ານໄດ້ຮູ້ບົດຄວາມນີ້! Tutorial ນີ້ໄດ້ຖືກຂຽນໃນ My ປະເພດ blog ພາສາລາວ ເພື່ອໄດ້ຮັບການອັບໂຫລດໃນເວລາທີ່ຂ້າພະເຈົ້າຊອກຫາບົດຄວາມໃຫມ່, Follow me on ແລະ . Twitter ປະເພດ LinkedIn ປະເພດ 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

ສຽງນີ້ຖືກຜະລິດເປັນພາສາຕົ້ນສະບັບຂອງເລື່ອງ!

ຍາວເກີນໄປ; ອ່ານ

ວິທີການເພີ່ມ AWS WAF CAPTCHA ກັບ Application Angular

ວິທີການເພີ່ມ AWS WAF CAPTCHA ກັບ Application Angular

About Author

ຄຳເຫັນ

ວາງປ້າຍ

ບົດຄວາມນີ້ໄດ້ຖືກນໍາສະເຫນີໃນ

Related Stories

One-Tap Google Signup and Login? Yup, HackerNoon Has It!

Design Shifts at HackerNoon: Streamlined Top Nav, Quick Search and Settings Dashboard 🚀

New Year, New Exciting Features: Mint Your Name, Watch Web 2.5 and Meet The Top Startups of The Year

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

One-Tap Google Signup and Login? Yup, HackerNoon Has It!

Design Shifts at HackerNoon: Streamlined Top Nav, Quick Search and Settings Dashboard 🚀

New Year, New Exciting Features: Mint Your Name, Watch Web 2.5 and Meet The Top Startups of The Year

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps

ວິທີການເພີ່ມ AWS WAF CAPTCHA ກັບ Application Angular

About Author

ຄຳເຫັນ

ວາງປ້າຍ

ບົດ​ຄວາມ​ນີ້​ໄດ້​ຖືກ​ນໍາ​ສະ​ເຫນີ​ໃນ

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps

ບົດຄວາມນີ້ໄດ້ຖືກນໍາສະເຫນີໃນ