導入 この記事では、最新バージョンの WEB アプリケーションを使用して作成します。 を統合し、 CAPTCHA は、ボットから保護するための挑戦です。 アングル AWS WAF(Web Application Firewall) アングル AWS WAF(Web Application Firewall) 前提条件 始める前に、下のツールをインストールして構成して、Angular アプリケーションを作成し、AWS WAF キャプチャに統合する必要があります。 
 
 
 
 
 Node.js と npm: Node.js は Google の V8 エンジンに基づく JavaScript コード ランタイム ソフトウェアです. npm は Node.js (Node.js パッケージ マネージャー) のパッケージ マネージャーです. これらは Angular アプリケーションを構築し、実行し、ライブラリをインストールするために使用されます. Angular CLI: Angular CLI は Angular のコマンド ライン ユーティリティであり、Angular アプリケーションのベース構造を作成するために使用されます。 IDE(例えば、Visual Studio Code または WebStorm):IDE(Integrated Development Environment)は、アプリケーションの開発に役立つグラフィックインターフェイスを持つツールで、Angularアプリケーションの開発に使用されます。 AWS アカウント:Amazon Web Servicesはクラウドコンピューティングサービスプラットフォームであり、AWS WAF CAPTCHA チャレンジを統合するために使用されます。 Node.js および NPM 角質CLI Visual Studio コード Webストーリー AWSアカウント 始めること AWS WAF でアカウントを作成および構成します。 Web Application Firewall(Webアプリケーションファイアウォール)は、WebアプリケーションやAPIを、可用性に影響を与え、セキュリティを損なったり、過剰なリソースを消費したりする一般的なインターネット脆弱性やボットの悪用から保護するように設計されたセキュリティサービスです。 AWS WAF AWS WAF AWS アカウントにアクセスします。Access the site and click on the link をクリックする . 1. , https://aws.amazon.com/waf/ コンソールにサインイン https://aws.amazon.com/waf/     メモ: 
 
 Amazon アカウントをお持ちでない場合は、セッション中に Amazon Cognito を使用して Angular アプリケーションへの認証の手順 1 から 9 に従って、Amazon Cognito でアカウントを作成して構成します。 Amazon Cognito を使用して Angular アプリケーションへの認証 Amazon Cognito を使用して Angular アプリケーションへの認証 今、私たちはフィールドを埋めます。 フィールドにいっぱい♪ フィールドにいっぱい♪ ボタンをクリックして . 2. アカウント ID または Alias ユーザ名 パスワード、 サイン in     次に、Type in the search field and click on the option. 検索フィールドで、オプションをクリック . 3. WAF WAF & SHIELD     次に、メニューをクリックします。 . 4. アプリケーション統合     メニューをクリックすると、 , we will click on the tab をクリックします。 . 5. アプリケーション統合 CAPTCHA統合     次に、オプションをクリックします。 ボタンをクリックして、 JavaScript ファイルの URL をコピーするため、この URL は Angular アプリケーションで設定され、ボタンをクリックします。 . 6. CloudFront JavaScript タグ コピー JavaScript タグ API キーの作成     次に、オプションをクリックします。 フィールドにいっぱい♪ あなたのウェブサイトのドメインと、ボタンをクリック . 7. クラウドFront ドメイン API キーの作成     次に、この API キーが Angular アプリケーションで構成されるので、API キーをコピーするためにアイコンをクリックします。 8.     APIキーが作成されました。 9. Angular アプリケーションを作成します。 is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 21, and Google is the maininer of the project. 現在、Angularはバージョン21にあり、Googleはプロジェクトの主なメンテナンス者です。 アングル アングル Angular base structure を使用してアプリケーションを作成します。 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 フレームワークをインストールし、構成します. We will do steps 2 and 3 of the post. . 2. Bootstrap CSS Framework を Angular アプリケーションに追加する方法 Bootstrap CSS Framework を Angular アプリケーションに追加する方法 Bootstrap CSS Framework を 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',
    },
  },
 変数を構成すると、コンテンツを削除します。 クラス from the ファイルを作成する そして 方法、実施方法 Method of the 実行するクラスは 下のような方法です。 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('');
        },
      });
    }
  }

}
 次に、コンテンツを削除します。 file and add the を追加 Tag with 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/             Ready! Angular アプリケーションは、AWS WAF CAPTCHA チャレンジと統合されました。 9. The application repository is available at . https://github.com/rodrigokamada/angular-aws-waf-captcha https://github.com/rodrigokamada/angular-aws-waf-captcha 結論 この記事でカバーされたものについてまとめます: 
 
 
 API キーを作成し、Captcha が AWS WAF で動作するドメインを構成しました。 Angular アプリを作成し、CAPTCHA コードを追加しました。 この記事を使用して、AWS WAF captcha チャレンジを使用して、ボット保護を搭載した Web アプリケーションを作成できます。 読んで頂きありがとうございます!記事が気に入りました! このチュートリアルは私の ポルトガル語で ブログ ブログ 新しい記事を投稿するたびに更新するには、私をフォローしてください そして . Twitterについて リンク Twitterについて リンク

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 を Angular アプリケーションに追加する方法

AWS WAF CAPTCHA を Angular アプリケーションに追加する方法

About Author

コメント

ラベル

この記事は

Related Stories

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps