介绍 在本文中,我们将使用最新版本的 WEB 应用程序创建 并整合了 CAPTCHA挑战,以防止机器人。 Angular AWS WAF(网络应用防火墙) 角落 AWS WAF(网络应用防火墙) 前提条件 在我们开始之前,您需要安装和配置下面的工具来创建 Angular 应用程序并与 AWS WAF captcha 集成。 
 
 
 
 
 Node.js 和 npm: Node.js 是一个基于 Google 的 V8 引擎的 JavaScript 代码运行时间软件. npm 是 Node.js (Node.js 包管理器) 的包管理器。 Angular CLI: Angular CLI 是 Angular 的命令行工具,它将用于创建 Angular 应用程序的基结构。 IDE(例如,Visual Studio Code或WebStorm):一个IDE(集成开发环境)是一个具有图形界面的工具,用于帮助开发应用程序,并将用于开发角度应用程序。 AWS 帐户:亚马逊 Web Services 是一个云计算服务平台,将用于整合 AWS WAF CAPTCHA 挑战。 Node.js 和 NPM 角形 CLI 视觉工作室代码 网络风暴 AWS 帐户 开始的 在 AWS WAF 上创建和配置帐户。 (Web Application Firewall) 是一种安全服务,旨在保护您的 WEB 应用程序和 API 免受常见的互联网漏洞和机器人的利用,这些漏洞可能会影响可用性,损害安全性,或消耗过多的资源。 AWS WAF 服务器 AWS WAF 服务器 让我们访问 AWS 帐户. 访问网站 然后点击链接 . 1. , https://aws.amazon.com/waf/ 登录到 Console https://aws.amazon.com/waf/     注: 
 
 如果您没有 Amazon 帐户,请按照 Amazon Cognito 应用程序使用 Amazon Cognito 身份验证的步骤 1 到 9 在会话中创建和配置帐户。 使用 Amazon Cognito 对 Angular 应用程序进行身份验证 使用 Amazon Cognito 对 Angular 应用程序进行身份验证 现在,我们将填补该领域 ,填写在场 ,填写在场 然后点击按钮 . 2. 帐户 ID 或 Alias 用户名 密码, 标志在     接下来,我们将类型 在搜索框中,然后点击选项 . 3. 瓦夫 WAF & 盾牌     然后,我们将在菜单上点击 . 4. 应用一体化     点击菜单后 ,我们将点击Tab . 5. 应用一体化 CAPTCHA 集成     现在,我们将点击选项 ,点击按钮 复制 JavaScript 文件的 URL,因为这个 URL 将在 Angular 应用程序中配置,然后点击按钮 . 6. CloudFront JavaScript 标签 复制 JavaScript 标签 生成 API 密钥     接下来,我们将点击选项 ,填写在场 与您的网站的域名,并点击按钮 . 7. 云前线 域名 生成 API 密钥     然后,我们将点击图标来复制API密钥,因为这个API密钥将在角度应用程序中配置。 8.     准备好了! API 密钥已经创建。 9. 创建 Angular 应用程序。 是使用HTML、CSS和TypeScript(JavaScript)构建WEB、移动和桌面应用程序的开发平台,目前,Angular在版本21中,谷歌是该项目的主要维护者。 角落 角落 让我们使用 Angular base 结构创建应用程序 AI配置文件被禁用,服务器端渲染(SSR)被禁用,路线文件被禁用,以及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.
 现在,我们将安装和配置 Bootstrap CSS 框架. 我们将执行帖子的步骤 2 和 3 . 2. 将 Bootstrap CSS 框架添加到 Angular 应用程序 将 Bootstrap CSS 框架添加到 Angular 应用程序 将 Bootstrap CSS 框架添加到 Angular 应用程序 
 
 接下来,我们将使用下面的命令创建环境变量的配置文件。 ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)
 然后,我们将配置变量。 包含包含 AWS WAF 集成代码和变量的 JavaScript 文件的 URL 在 AWS WAF 中创建的 API 密钥 和 文件如下。 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',
    },
  },
 配置变量后,我们将删除该变量的内容 班级从 文件,创建 和 方法,并实施 该方法的 该类将执行 方法如下。 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('');
        },
      });
    }
  }

}
 现在,我们将从内容中删除 檔案並添加 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。 检查应用程序是否工作。 8. http://localhost:4200/             准备好了! Angular 应用程序创建并与 AWS WAF CAPTCHA 挑战集成。 9. 应用库可在 . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha 结论 总结这篇文章中所涵盖的内容: 
 
 
 我们创建了 API 密钥,并配置了在 AWS WAF 中使用 captcha 的域。 我们创建了一个 Angular 应用程序,并添加了 captcha 代码。 您可以使用本文创建具有 bot 保护的 Web 应用程序,使用 AWS WAF captcha 挑战。 感谢您阅读,希望您喜欢这篇文章! 此教程已发布在我的 在葡萄牙 博客 博客 要在每次我发布新文章时保持最新,请跟随我 和 . 推特 林肯 推特 林肯

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 添加到角形应用程序中

如何将 AWS WAF CAPTCHA 添加到角形应用程序中

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

比特币 UTXO 模型，为独特的生态系统提供动力

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

比特币 UTXO 模型，为独特的生态系统提供动力

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps