

**에 대한 새로운 콘솔 환경 소개 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` 함께 라는 쿠키를 포함하도록 보호된 엔드포인트에 대한 요청을 요구합니다.

`getToken` 작업은 저장된 AWS WAF 토큰을 검색하여 이름이 `aws-waf-token`인 현재 페이지의 쿠키에 저장하는 비동기식 API 직접 호출이며, 해당 값은 토큰 값으로 설정됩니다. 필요에 따라 페이지에서 이 토큰 쿠키를 사용할 수 있습니다.

`getToken`를 을 호출하면 다음과 같은 작업을 수행합니다.
+ 만료되지 않은 토큰을 이미 사용할 수 있는 경우 호출 시 해당 토큰이 즉시 반환됩니다.
+ 그렇지 않으면 호출 시 토큰 공급자로부터 새 토큰을 검색하고 토큰 획득 워크플로가 제한 시간 초과 전에 완료될 때까지 최대 2초간 기다립니다. 작업 제한 시간이 초과되면 오류가 발생하며, 호출 코드에서 이를 처리해야 합니다.

`getToken` 작업에는 `aws-waf-token` 쿠키가 현재 만료되지 않은 토큰을 보유하고 있는지 여부를 나타내는 `hasToken` 작업이 함께 제공됩니다.

`AwsWafIntegration.getToken()`은 유효한 토큰을 검색하여 쿠키로 저장합니다. 대부분의 클라이언트 호출은 이 쿠키를 자동으로 연결하지만 일부는 연결하지 않습니다. 예를 들어, 호스트 도메인 간에 이루어진 호출은 쿠키를 연결하지 않습니다. 다음 구현 세부 정보에서는 두 유형의 클라이언트 호출을 모두 사용하는 방법을 보여줍니다.

**`aws-waf-token` 쿠키를 연결하는 호출에 대한 기본 `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` 쿠키를 연결하지 않을 때 토큰 연결**  
`AwsWafIntegration.getToken()`은 유효한 토큰을 검색하여 쿠키로 저장하지만 모든 클라이언트 호출이 기본적으로 이 쿠키를 연결하는 것은 아닙니다. 예를 들어, 호스트 도메인 간에 이루어진 호출은 쿠키를 연결하지 않습니다.

`fetch` 래퍼는 이러한 사례를 자동으로 처리하지만 `fetch` 래퍼를 사용할 수 없는 경우 `aws-waf-token` 사용자 지정 `x-aws-waf-token` 헤더를 사용하여 처리할 수 있습니다. AWS WAF 는 쿠키에서 토큰을 읽는 것 외에도이 헤더에서 토큰을 읽습니다. 다음 코드는 헤더를 설정하는 예제를 보여줍니다.

```
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)를 참조하세요.