

**の新しいコンソールエクスペリエンスの紹介 AWS WAF**

更新されたエクスペリエンスを使用して、コンソールの任意の場所で AWS WAF 機能にアクセスできるようになりました。詳細については、[「コンソールの使用](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html)」を参照してください。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 統合 `getToken` を使用する方法
<a name="waf-js-challenge-api-get-token"></a>

このセクションでは、`getToken` オペレーションの使用方法について説明します。

AWS WAF では、保護されたエンドポイントへのリクエストに、現在のトークンの値`aws-waf-token`を持つ という名前の Cookie を含める必要があります。

`getToken` オペレーションとは、 AWS WAF トークンを取得し、名前を `aws-waf-token` にして、値をトークン値に設定し、現在のページの cookie に保存する非同期 API コールです。このトークン cookie は、必要に応じてページで使用できます。

`getToken` を呼び出すと、次が実行されます。
+ 期限切れでないトークンが既に使用可能な場合、コールは直ちにそれを返します。
+ それ以外の場合、コールは トークンプロバイダーから新しいトークンを取得します。トークン取得ワークフローが完了するまで最大で 2 秒間の猶予があり、この待機期間が経過するとタイムアウトします。オペレーションがタイムアウトすると、呼び出しコードが処理しなければならないエラーがスローされます。

`getToken` オペレーションには付随する `hasToken` オペレーションがあり、`aws-waf-token` cookie が現在有効期限が切れていないトークンを保持しているかどうかを示します。

`AwsWafIntegration.getToken()` は有効なトークンを取得し、それを Cookie として保存します。ほとんどのクライアント呼び出しは、この Cookie を自動的にアタッチしますが、アタッチしないクライアント呼び出しもあります。例えば、ホストドメイン間で行われた呼び出しは Cookie にアタッチしません。以下の実施詳細では、両方のタイプのクライアント呼び出しを操作する方法を示します。

**`aws-waf-token` Cookie にアタッチする呼び出しの基本的な `getToken` 実施**  
次のリストの例は、ログインリクエストで `getToken` オペレーションを実装するための標準コードを示しています。

```
const login_response = await AwsWafIntegration.getToken()
	    .catch(e => {
	        // Implement error handling logic for your use case
	    })
	    // The getToken call returns the token, and doesn't typically require special handling
	    .then(token => {
	        return loginToMyPage()
	    })
	
	async function loginToMyPage() {
	    // Your existing login code
	}
```

**トークンが `getToken` から利用可能になった後にのみフォームを送信する**  
次のリストは、有効なトークンが使用可能になるまで、フォーム送信をインターセプトするイベントリスナーを登録する方法を示しています。

```
<body>
	  <h1>Login</h1>
	  <p></p>
	  <form id="login-form" action="/web/login" method="POST" enctype="application/x-www-form-urlencoded">
	    <label for="input_username">USERNAME</label>
	    <input type="text" name="input_username" id="input_username"><br>
	    <label for="input_password">PASSWORD</label>
	    <input type="password" name="input_password" id="input_password"><br>
	    <button type="submit">Submit<button>
	  </form>
	
	<script>
	  const form = document.querySelector("#login-form");
	
	  // Register an event listener to intercept form submissions
	  form.addEventListener("submit", (e) => {
	      // Submit the form only after a token is available 
	      if (!AwsWafIntegration.hasToken()) {
	          e.preventDefault();
	          AwsWafIntegration.getToken().then(() => {
	              e.target.submit();
	          }, (reason) => { console.log("Error:"+reason) });
	        }
	    });
	</script>
	</body>
```

**クライアントがデフォルトで `aws-waf-token` Cookie にアタッチしない場合のトークンとのアタッチ**  
`AwsWafIntegration.getToken()` は有効なトークンを取得し、それを Cookie として保存しますが、デフォルトの場合、すべてのクライアント呼び出しがこの Cookie にアタッチするわけではありません。例えば、ホストドメイン間で行われた呼び出しは Cookie にアタッチしません。

`fetch` ラッパーはこれらのケースを自動的に処理しますが、`fetch`ラッパーを使用できない場合は、Cookie から読み取るだけでなく、このヘッダーのカスタム `x-aws-waf-token` header. AWS WAF reads `aws-waf-token` トークンを使用して処理できます。次のコードは、ヘッダーの設定例を示しています。

```
const token = await AwsWafIntegration.getToken();
const result = await fetch('/url', {
    headers: {
        'x-aws-waf-token': token,
    },
});
```

デフォルトでは、 はリクエストされたホストドメインと同じドメインを含むトークン AWS WAF のみを受け入れます。クロスドメイントークンには、保護パック (ウェブ ACL) トークンドメインリストの対応するエントリが必要です。詳細については、「[AWS WAF 保護パック (ウェブ ACL) トークンドメインリスト設定](waf-tokens-domains.md#waf-tokens-domain-lists)」を参照してください。

クロスドメイントークンの使用の詳細については、「[aws-samples/aws-waf-bot-control-api-protection-with-captcha](https://github.com/aws-samples/aws-waf-bot-control-api-protection-with-captcha)」を参照してください。