

**Memperkenalkan pengalaman konsol baru untuk AWS WAF**

Anda sekarang dapat menggunakan pengalaman yang diperbarui untuk mengakses AWS WAF fungsionalitas di mana saja di konsol. Untuk detail selengkapnya, lihat [Bekerja dengan konsol](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html). 

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Cara menggunakan integrasi `getToken`
<a name="waf-js-challenge-api-get-token"></a>

Bagian ini menjelaskan cara menggunakan `getToken` operasi.

AWS WAF mengharuskan permintaan Anda ke titik akhir yang dilindungi untuk menyertakan cookie yang diberi nama `aws-waf-token` dengan nilai token Anda saat ini. 

`getToken`Operasi ini adalah panggilan API asinkron yang mengambil AWS WAF token dan menyimpannya dalam cookie pada halaman saat ini dengan nama`aws-waf-token`, dan nilai yang ditetapkan ke nilai token. Anda dapat menggunakan cookie token ini sesuai kebutuhan di halaman Anda. 

Saat Anda menelepon`getToken`, itu melakukan hal berikut: 
+ Jika token yang belum kedaluwarsa sudah tersedia, panggilan akan segera mengembalikannya.
+ Jika tidak, panggilan akan mengambil token baru dari penyedia token, menunggu hingga 2 detik hingga alur kerja akuisisi token selesai sebelum waktu habis. Jika waktu operasi habis, itu akan menimbulkan kesalahan, yang harus ditangani oleh kode panggilan Anda. 

`getToken`Operasi ini memiliki operasi yang menyertainya`hasToken`, yang menunjukkan apakah `aws-waf-token` cookie saat ini memegang token yang belum kedaluwarsa. 

`AwsWafIntegration.getToken()`mengambil token yang valid dan menyimpannya sebagai cookie. Sebagian besar panggilan klien secara otomatis melampirkan cookie ini, tetapi beberapa tidak. Misalnya, panggilan yang dilakukan di seluruh domain host tidak melampirkan cookie. Dalam detail implementasi yang mengikuti, kami menunjukkan cara bekerja dengan kedua jenis panggilan klien. 

**`getToken`Implementasi dasar, untuk panggilan yang melampirkan `aws-waf-token` cookie**  
Daftar contoh berikut menunjukkan kode standar untuk mengimplementasikan `getToken` operasi dengan permintaan login.

```
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
	}
```

**Kirim formulir hanya setelah token tersedia dari `getToken`**  
Daftar berikut menunjukkan cara mendaftarkan pendengar acara untuk mencegat kiriman formulir hingga token yang valid tersedia untuk digunakan. 

```
<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>
```

**Melampirkan token saat klien Anda tidak melampirkan `aws-waf-token` cookie secara default**  
`AwsWafIntegration.getToken()`mengambil token yang valid dan menyimpannya sebagai cookie, tetapi tidak semua panggilan klien melampirkan cookie ini secara default. Misalnya, panggilan yang dilakukan di seluruh domain host tidak melampirkan cookie. 

`fetch`Pembungkus menangani kasus ini secara otomatis, tetapi jika Anda tidak dapat menggunakan `fetch` pembungkus, Anda dapat menangani ini dengan menggunakan header khusus`x-aws-waf-token`. AWS WAF membaca token dari header ini, selain membacanya dari `aws-waf-token` cookie. Kode berikut menunjukkan contoh pengaturan header. 

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

Secara default, AWS WAF hanya menerima token yang berisi domain yang sama dengan domain host yang diminta. Setiap token lintas domain memerlukan entri yang sesuai dalam daftar domain token paket perlindungan (web ACL). Untuk informasi selengkapnya, lihat [AWS WAF paket perlindungan (web ACL) konfigurasi daftar domain token](waf-tokens-domains.md#waf-tokens-domain-lists). 

Untuk informasi tambahan tentang penggunaan token lintas domain, lihat [aws-waf-bot-controlaws-samples/](https://github.com/aws-samples/aws-waf-bot-control-api-protection-with-captcha) -. api-protection-with-captcha