Giới thiệu Trong bài viết này, chúng tôi sẽ tạo một ứng dụng WEB sử dụng phiên bản mới nhất của Và tích hợp các CAPTCHA thách thức để bảo vệ chống lại bot Angular AWS WAF (Web Application Firewall) - Tường lửa ứng dụng web góc AWS WAF (Web Application Firewall) - Tường lửa ứng dụng web Điều kiện Trước khi chúng tôi bắt đầu, bạn cần cài đặt và cấu hình các công cụ dưới đây để tạo ứng dụng Angular và tích hợp nó với captcha AWS WAF. 
 
 
 
 
 Node.js và npm: Node.js là một phần mềm chạy thời gian mã JavaScript dựa trên công cụ V8 của Google. npm là một trình quản lý gói cho Node.js (Node.js Package Manager). Angular CLI: Angular CLI là một tiện ích dòng lệnh cho Angular, và nó sẽ được sử dụng để tạo cấu trúc cơ sở của ứng dụng Angular. IDE (ví dụ, Visual Studio Code hoặc WebStorm): Một IDE (Integrated Development Environment) là một công cụ có giao diện đồ họa để hỗ trợ trong việc phát triển các ứng dụng, và nó sẽ được sử dụng để phát triển ứng dụng Angular. Tài khoản AWS: Amazon Web Services là nền tảng dịch vụ điện toán đám mây, và nó sẽ được sử dụng để tích hợp AWS WAF CAPTCHA challenge. Node.js và NPM góc CLI Mã Visual Studio Webb bão Tài khoản AWS Bắt đầu Tạo và cấu hình tài khoản trên AWS WAF. (Web Application Firewall) là một dịch vụ bảo mật được thiết kế để bảo vệ các ứng dụng và API của bạn khỏi những lợi ích của các lỗ hổng Internet phổ biến và bot có thể ảnh hưởng đến tính sẵn có, làm tổn hại đến bảo mật hoặc tiêu thụ tài nguyên quá mức. AWS WAF Thông tin AWS WAF Hãy truy cập tài khoản AWS. Truy cập trang web Và click vào link . 1. , https://aws.amazon.com/waf/ Đăng nhập vào console https://aws.amazon.com/waf/     Ghi chú: 
 
 Nếu bạn không có tài khoản Amazon, hãy làm theo các bước 1 đến 9 trong bài đăng Xác thực bằng cách sử dụng Amazon Cognito vào một ứng dụng Angular trong phiên. Xác thực bằng cách sử dụng Amazon Cognito cho một ứng dụng Angular Xác thực bằng cách sử dụng Amazon Cognito cho một ứng dụng Angular Bây giờ, chúng ta sẽ điền vào lĩnh vực , điền vào trường , điền vào trường Và click vào nút . 2. ID tài khoản hoặc alias Tên người dùng Mật khẩu , Tín hiệu in     Tiếp theo, chúng ta sẽ loại trong hộp tìm kiếm và nhấp vào tùy chọn . 3. WAF Trang chủ » WAF & Shield     Sau đó, chúng tôi sẽ click vào menu . 4. Ứng dụng Integration     Sau khi click vào menu , chúng tôi sẽ click vào tab . 5. Ứng dụng Integration Tích hợp captcha     Bây giờ, chúng tôi sẽ nhấp vào tùy chọn Click vào nút để sao chép URL của tệp JavaScript, bởi vì URL này sẽ được cấu hình trong ứng dụng Angular, và nhấp vào nút . 6. CloudFront JavaScript thẻ Sao chép JavaScript Tag Tạo API Key     Tiếp theo, chúng tôi sẽ nhấp vào tùy chọn , điền vào trường với tên miền của trang web của bạn, và nhấp vào nút . 7. Cloudfront Domain Tạo API Key     Sau đó, chúng tôi sẽ nhấp vào biểu tượng để sao chép khóa API vì khóa API này sẽ được cấu hình trong ứng dụng Angular. 8.     Ready! API key đã được tạo ra. 9. Tạo ứng dụng Angular là một nền tảng phát triển để xây dựng các ứng dụng web, di động và máy tính để bàn sử dụng HTML, CSS và TypeScript (JavaScript). Hiện tại, Angular đang ở phiên bản 21, và Google là người duy trì chính của dự án. góc góc Hãy tạo ứng dụng với cấu trúc cơ sở Angular bằng cách sử dụng công cụ với các tệp cấu hình AI bị vô hiệu hóa, render server-side (SSR) bị vô hiệu hóa, tệp đường dẫn bị vô hiệu hóa, và định dạng phong cách 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.
 Bây giờ, chúng tôi sẽ cài đặt và cấu hình Bootstrap CSS framework. chúng tôi sẽ làm các bước 2 và 3 của bài viết . 2. Thêm Bootstrap CSS framework vào một ứng dụng Angular Thêm Bootstrap CSS framework vào một ứng dụng Angular Thêm Bootstrap CSS framework vào một ứng dụng Angular 
 
 Tiếp theo, chúng tôi sẽ tạo các tệp cấu hình cho các biến môi trường với lệnh dưới đây. ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 Sau đó, chúng tôi sẽ cấu hình các biến với URL của tệp JavaScript chứa mã tích hợp AWS WAF và biến với khóa API được tạo trong AWS WAF trong và Các file dưới đây 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',
    },
  },
 Sau khi cấu hình các biến, chúng tôi sẽ loại bỏ nội dung của Lớp từ the File, tạo và phương pháp, và thực hiện các Phương pháp của the lớp mà nó sẽ thực hiện Phương pháp như dưới đây. 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('');
        },
      });
    }
  }

}
 Bây giờ, chúng tôi sẽ loại bỏ nội dung từ file và thêm vào Tag với the Các biến khác như dưới đây. 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>
 
 
 Tiếp theo, chúng tôi sẽ chạy ứng dụng với lệnh bên dưới. 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
 Sau đó, chúng tôi sẽ truy cập vào URL Kiểm tra xem ứng dụng có hoạt động không. 8. http://localhost:4200/             Ứng dụng Angular đã được tạo và tích hợp với thách thức AWS WAF CAPTCHA. 9. Các ứng dụng repository có sẵn tại . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha Kết luận Tóm tắt những gì đã được bao gồm trong bài viết này: 
 
 
 Chúng tôi đã tạo khóa API và cấu hình miền nơi captcha sẽ hoạt động trong AWS WAF. Chúng tôi đã tạo một ứng dụng Angular và thêm mã captcha. Bạn có thể sử dụng bài viết này để tạo các ứng dụng web có bảo vệ bot bằng cách sử dụng AWS WAF captcha challenge. Cảm ơn bạn đã đọc, và tôi hy vọng bạn thích bài viết! Tutorial này đã được đăng trên trong tiếng Bồ Đào Nha. Blog của Blog của Để được cập nhật bất cứ khi nào tôi đăng bài viết mới, hãy theo dõi tôi và . 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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Cách thêm AWS WAF CAPTCHA vào ứng dụng Angular

Cách thêm AWS WAF CAPTCHA vào ứng dụng Angular

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

72 Stories To Learn About The Essays Of Adam Smith

184 Stories To Learn About Psychology

178 Stories To Learn About Essay

581 Stories To Learn About Non Fiction

72 Stories To Learn About The Essays Of Adam Smith

184 Stories To Learn About Psychology

178 Stories To Learn About Essay

581 Stories To Learn About Non Fiction

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps