

**Apresentando uma nova experiência de console para AWS WAF**

Agora você pode usar a experiência atualizada para acessar a AWS WAF funcionalidade em qualquer lugar do console. Para obter mais detalhes, consulte [Trabalhando com o console](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html). 

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# AWS WAF JavaScript integrações
<a name="waf-javascript-api"></a>

Esta seção explica como usar as AWS WAF JavaScript integrações.

Você pode usar a JavaScript integração APIs para implementar integrações de AWS WAF aplicativos em seus navegadores e outros dispositivos que são JavaScript executados. 

Os códigos CAPTCHA e os desafios silenciosos só podem ser executados quando os navegadores estão acessando endpoints HTTPS. Os clientes do navegador devem estar sendo executados em contextos seguros para adquirir tokens. 
+ A ameaça inteligente APIs permite que você gerencie a autorização de tokens por meio de um desafio silencioso do navegador do lado do cliente e inclua os tokens nas solicitações que você envia aos seus recursos protegidos. 
+ A API de integração do CAPTCHA aumenta a ameaça APIs inteligente e permite que você personalize o posicionamento e as características do quebra-cabeça do CAPTCHA em seus aplicativos clientes. Essa API aproveita a ameaça inteligente APIs para adquirir AWS WAF tokens para uso na página após o usuário final concluir com êxito o quebra-cabeça do CAPTCHA. 

Ao usar essas integrações, você garante que as chamadas de procedimento remoto feitas pelo seu cliente contenham um token válido. Quando essas integrações APIs estão implementadas nas páginas do seu aplicativo, você pode implementar regras atenuantes em seu pacote de proteção (web ACL), como bloquear solicitações que não contêm um token válido. Você também pode implementar regras que imponham o uso dos tokens que seus aplicativos clientes obtêm, usando as ações Challenge ou CAPTCHA em suas regras. 

**Exemplo de implementação de ameaça inteligente APIs**  
A lista a seguir mostra os componentes básicos de uma implementação típica da ameaça inteligente APIs em uma página de aplicativo web. 

```
<head>
<script type="text/javascript" src="protection pack (web ACL) integration URL/challenge.js" defer></script>
</head>
<script>
const login_response = await AwsWafIntegration.fetch(login_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: login_body
  });
</script>
```

**Exemplo de implementação da API CAPTCHA JavaScript**  
A API de integração CAPTCHA permite que você personalize a experiência de quebra-cabeça CAPTCHA de seus usuários finais. A integração CAPTCHA aproveita a integração JavaScript inteligente de ameaças, para verificação do navegador e gerenciamento de tokens, além de adicionar uma função para configurar e renderizar o quebra-cabeça do CAPTCHA. 

A lista a seguir mostra os componentes básicos de uma implementação típica da JavaScript API CAPTCHA em uma página de aplicativo web. 

```
<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>

<script type="text/javascript">
    function showMyCaptcha() {
        var container = document.querySelector("#my-captcha-container");
        
        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            ...other configuration parameters as needed...
        });
    }
    
    function captchaExampleSuccessFunction(wafToken) {
        // Use WAF token to access protected resources
        AwsWafIntegration.fetch("...WAF-protected URL...", {
            method: "POST",
            ...
        });
    }
    
    function captchaExampleErrorFunction(error) {
        /* Do something with the error */
    }
</script>

<div id="my-captcha-container">
    <!-- The contents of this container will be replaced by the captcha widget -->
</div>
```

**Topics**
+ [Fornecimento de domínios para uso nos tokens](waf-js-challenge-api-set-token-domain.md)
+ [Usando a JavaScript API com políticas de segurança de conteúdo](waf-javascript-api-csp.md)
+ [Usando a JavaScript API de ameaças inteligentes](waf-js-challenge-api.md)
+ [Usando a API CAPTCHA JavaScript](waf-js-captcha-api.md)

# Fornecimento de domínios para uso nos tokens
<a name="waf-js-challenge-api-set-token-domain"></a>

Esta seção explica como fornecer domínios adicionais para tokens.

Por padrão, ao AWS WAF criar um token, ele usa o domínio host do recurso associado ao pacote de proteção (Web ACL). Você pode fornecer domínios adicionais para os tokens AWS WAF criados para o. JavaScript APIs Para fazer isso, configure a variável global `window.awsWafCookieDomainList`, com um ou mais domínios de token. 

Ao AWS WAF criar um token, ele usa o domínio mais adequado e mais curto dentre a combinação dos domínios `window.awsWafCookieDomainList` e do domínio do host do recurso associado ao pacote de proteção (Web ACL). 

Exemplo de configurações: 

```
window.awsWafCookieDomainList = ['.aws.amazon.com']
```

```
window.awsWafCookieDomainList = ['.aws.amazon.com', 'abc.aws.amazon.com']
```

Você não pode usar sufixos públicos nessa lista. Por exemplo, você não pode usar `gov.au` ou `co.uk` como domínios de token na lista.

Os domínios que você especifica nessa lista devem ser compatíveis com seus outros domínios e configurações de domínio: 
+ Os domínios devem ser aqueles que AWS WAF aceitarão, com base no domínio do host protegido e na lista de domínios do token configurada para o pacote de proteção (Web ACL). Para obter mais informações, consulte [AWS WAF configuração da lista de domínios de token do pacote de proteção (web ACL)](waf-tokens-domains.md#waf-tokens-domain-lists). 
+ Se você usa a API JavaScript CAPTCHA, pelo menos um domínio em sua chave de API CAPTCHA deve corresponder exatamente a um dos domínios de token `window.awsWafCookieDomainList` ou deve ser o domínio ápice de um desses domínios de token. 

  Por exemplo, para o domínio do token `mySubdomain.myApex.com`, a chave de API `mySubdomain.myApex.com` é uma correspondência exata e a chave de API `myApex.com` é o domínio apex. Qualquer chave corresponde ao domínio do token. 

  Para saber mais sobre as chaves de API, consulte [Como gerenciar chaves de API para a API JS CAPTCHA](waf-js-captcha-api-key.md). 

Se você usar o grupo de regras gerenciadas `AWSManagedRulesACFPRuleSet`, poderá configurar um domínio que corresponda ao do caminho de criação da conta que você forneceu para a configuração do grupo de regras. Para saber mais sobre essa configuração, consulte [Adicionando o grupo de regras gerenciadas do ACFP à sua web ACL](waf-acfp-rg-using.md).

Se você usar o grupo de regras gerenciadas `AWSManagedRulesATPRuleSet`, poderá configurar um domínio que corresponda ao do caminho de login que você forneceu para a configuração do grupo de regras. Para saber mais sobre essa configuração, consulte [Adicionar grupos de regras gerenciadas ao pacote de proteção (ACL da Web)](waf-atp-rg-using.md).

# Usando a JavaScript API com políticas de segurança de conteúdo
<a name="waf-javascript-api-csp"></a>

Esta seção fornece um exemplo de configuração para permitir o domínio AWS WAF apex na lista de permissões.

Se você aplicar políticas de segurança de conteúdo (CSP) aos seus recursos, para que sua JavaScript implementação funcione, você precisa colocar o domínio AWS WAF apex na lista de permissões. `awswaf.com` Eles JavaScript SDKs fazem chamadas para AWS WAF endpoints diferentes, portanto, a lista de permissões desse domínio fornece as permissões SDKs necessárias para operar.

Veja a seguir um exemplo de configuração para permitir o domínio AWS WAF apex na lista de permissões: 

```
connect-src 'self' https://*.awswaf.com;
script-src 'self' https://*.awswaf.com;
script-src-elem 'self' https://*.awswaf.com;
```

Se você tentar usar o JavaScript SDKs com recursos que usam CSP e não tiver permitido o AWS WAF domínio, você receberá erros como os seguintes: 

```
Refused to load the script ...awswaf.com/<> because it violates the following Content Security Policy directive: “script-src ‘self’
```

# Usando a JavaScript API de ameaças inteligentes
<a name="waf-js-challenge-api"></a>

Esta seção fornece instruções para usar a JavaScript API de ameaças inteligentes em seu aplicativo cliente.

A ameaça inteligente APIs fornece operações para executar desafios silenciosos no navegador do usuário e para lidar com os AWS WAF tokens que comprovam o sucesso do desafio e das respostas CAPTCHA. 

Implemente a JavaScript integração primeiro em um ambiente de teste e depois na produção. Para obter orientações adicionais sobre codificação, consulte as seções a seguir. 

 

**Para usar a ameaça inteligente APIs**

1. **Instale o APIs** 

   Se você usar a API CAPTCHA, você poderá ignorar esta etapa. Quando você instala a API CAPTCHA, o script instala automaticamente a ameaça inteligente. APIs

   1. Faça login no Console de gerenciamento da AWS e abra o AWS WAF console em [https://console.aws.amazon.com/wafv2/homev2](https://console.aws.amazon.com/wafv2/homev2). 

   1. No painel de navegação, escolha **Integração de aplicativos**. Na página **Integração de aplicativos**, você pode ver as opções com guias. 

   1. Selecione **Integração de ameaças inteligentes**

   1. Na guia, selecione o pacote de proteção (ACL da Web) com o qual você deseja fazer a integração. A lista de pacotes de proteção (web ACL) inclui somente pacotes de proteção (web ACLs) que usam o grupo de regras `AWSManagedRulesACFPRuleSet` gerenciadas, o grupo de regras `AWSManagedRulesATPRuleSet` gerenciadas ou o nível de proteção desejado do grupo de regras `AWSManagedRulesBotControlRuleSet` gerenciadas. 

   1. Abra o painel **JavaScript SDK** e copie a tag do script para usar em sua integração. 

   1. No código da página da aplicação, na seção `<head>`, insira a tag de script que você copiou para o pacote de proteção (ACL da Web). Essa inclusão faz com que seu aplicativo cliente recupere automaticamente um token em segundo plano no carregamento da página. 

      ```
      <head>
          <script type="text/javascript" src="protection pack (web ACL) integration URL/challenge.js” defer></script>
      <head>
      ```

      Essa lista `<script>` é configurada com o recurso `defer`, mas você pode alterar a configuração para `async` se quiser um comportamento diferente para sua página. 

1. **(Opcional) Adicionar configuração de domínio para os tokens do cliente** — Por padrão, ao AWS WAF criar um token, ele usa o domínio host do recurso associado ao pacote de proteção (Web ACL). Para fornecer domínios adicionais para o JavaScript APIs, siga as orientações em[Fornecimento de domínios para uso nos tokens](waf-js-challenge-api-set-token-domain.md). 

1. **Codificar sua integração de ameaças inteligentes**: escreva seu código para garantir que a recuperação do token seja concluída antes que o cliente envie suas solicitações para os endpoints protegidos. Se você já estiver usando a API `fetch` para fazer sua chamada, poderá substituir o wrapper de integração `fetch` do AWS WAF . Se você não usa a `fetch` API, pode usar a `getToken` operação de AWS WAF integração em vez disso. Para ver orientações de codificação, consulte as seções a seguir. 

1. **Adicionar verificação de token no pacote de proteção (ACL da Web)**: adicione pelo menos uma regra ao pacote de proteção (ACL da Web) que verifique se há um token de desafio válido nas solicitações da Web enviadas pelo seu cliente. Você pode usar grupos de regras que verificam e monitoram tokens de desafio, como o nível direcionado do grupo de regras gerenciadas do Controle de Bots, e você pode usar a ação de regra Challenge para verificar, conforme descrito em [CAPTCHAe Challenge em AWS WAF](waf-captcha-and-challenge.md). 

   As adições do pacote de proteção (ACL da Web) verificam se as solicitações aos endpoints protegidos incluem o token que você adquiriu na integração com o cliente. Solicitações que incluem um token válido e não expirado passam pela inspeção Challenge e não enviam outro desafio silencioso ao seu cliente. 

1. **(Opcional) Bloqueie solicitações sem tokens** — Se você usar o APIs com o grupo de regras gerenciadas do ACFP, o grupo de regras gerenciadas pelo ATP ou as regras específicas do grupo de regras do Bot Control, essas regras não bloquearão solicitações sem tokens. Para bloquear solicitações sem tokens, siga as orientações em [Bloqueio de solicitações que não têm um AWS WAF token válido](waf-tokens-block-missing-tokens.md). 

**Topics**
+ [Especificação da API de ameaças inteligentes](waf-js-challenge-api-specification.md)
+ [Como usar o wrapper de integração `fetch`](waf-js-challenge-api-fetch-wrapper.md)
+ [Como usar a integração `getToken`](waf-js-challenge-api-get-token.md)

# Especificação da API de ameaças inteligentes
<a name="waf-js-challenge-api-specification"></a>

Esta seção lista a especificação dos métodos e propriedades da mitigação JavaScript APIs inteligente de ameaças. Use-os APIs para integrações inteligentes de ameaças e CAPTCHA.

**`AwsWafIntegration.fetch()`**  
Envia a `fetch` solicitação HTTP para o servidor usando a implementação da AWS WAF integração. 

**`AwsWafIntegration.getToken()`**  
Recupera o AWS WAF token armazenado e o armazena em um cookie na página atual com o nome `aws-waf-token` e o valor definido como o valor do token. 

**`AwsWafIntegration.hasToken()`**  
Retorna um booleano indicando se o cookie `aws-waf-token` atualmente contém um token não expirado. 

Se você também estiver usando a integração CAPTCHA, consulte a especificação para isso em [Especificação da API CAPTCHA JavaScript](waf-js-captcha-api-specification.md).

# Como usar o wrapper de integração `fetch`
<a name="waf-js-challenge-api-fetch-wrapper"></a>

Esta seção fornece instruções para usar o wrapper de integração `fetch`.

Você pode usar o AWS WAF `fetch` wrapper alterando suas `fetch` chamadas normais para a `fetch` API no `AwsWafIntegration` namespace. O AWS WAF wrapper suporta todas as mesmas opções da chamada de JavaScript `fetch` API padrão e adiciona o tratamento de tokens para a integração. Essa abordagem geralmente é a maneira mais simples de integrar seu aplicativo. 

**Antes da implementação do wrapper**  
A lista de exemplo a seguir mostra o código padrão antes de implementar o wrapper `fetch` de `AwsWafIntegration`.

```
const login_response = await fetch(login_url, {
	    method: 'POST',
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    body: login_body
	  });
```

**Após a implementação do wrapper**  
A lista a seguir mostra o mesmo código com a implementação do wrapper `fetch` de `AwsWafIntegration`.

```
const login_response = await AwsWafIntegration.fetch(login_url, {
	    method: 'POST',
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    body: login_body
	  });
```

# Como usar a integração `getToken`
<a name="waf-js-challenge-api-get-token"></a>

Esta seção explica como usar a operação `getToken`.

AWS WAF exige que suas solicitações para endpoints protegidos incluam o cookie nomeado `aws-waf-token` com o valor do seu token atual. 

A operação `getToken` é uma chamada de API assíncrona que recupera o token do AWS WAF e o armazena em um cookie na página atual com o nome `aws-waf-token` e o valor definido como o valor do token. Você pode usar esse cookie de token conforme necessário em sua página. 

Quando você chama `getToken`, ele faz o seguinte: 
+ Se um token não expirado já estiver disponível, a chamada o retornará imediatamente.
+ Caso contrário, a chamada recuperará um novo token do provedor do token, aguardando até 2 segundos para que o fluxo de trabalho de aquisição do token seja concluído antes do tempo limite. Se a operação atingir o tempo limite, ela gerará um erro, que seu código de chamada deve processar. 

A operação `getToken` tem uma operação `hasToken` complementar, que indica se o cookie `aws-waf-token` atualmente contém um token não expirado. 

`AwsWafIntegration.getToken()` recupera um token válido e o armazena como um cookie. A maioria das chamadas de clientes anexa automaticamente esse cookie, mas algumas não. Por exemplo, chamadas feitas em domínios de host não anexam o cookie. Nos detalhes de implementação a seguir, mostramos como trabalhar com os dois tipos de chamadas de clientes. 

**Implementação básica de `getToken`, para chamadas que anexam o cookie `aws-waf-token`**  
A lista de exemplo a seguir mostra o código padrão para implementar a operação `getToken` com uma solicitação de 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
	}
```

**Envie o formulário somente após o token estar disponível em `getToken`**  
A lista a seguir mostra como registrar um receptor de eventos para interceptar envios de formulários até que um token válido esteja disponível para uso. 

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

**Como anexar o token quando seu cliente não anexa o cookie `aws-waf-token` por padrão**  
`AwsWafIntegration.getToken()` recupera um token válido e o armazena como um cookie, mas nem todas as chamadas de clientes anexam esse cookie por padrão. Por exemplo, chamadas feitas em domínios de host não anexam o cookie. 

O `fetch` wrapper trata esses casos automaticamente, mas se você não conseguir usar o `fetch` wrapper, poderá lidar com isso usando um cabeçalho personalizado`x-aws-waf-token`. AWS WAF lê os tokens desse cabeçalho, além de lê-los do `aws-waf-token` cookie. O código a seguir mostra um exemplo de configuração do cabeçalho. 

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

Por padrão, AWS WAF só aceita tokens que contenham o mesmo domínio do domínio host solicitado. Todos os tokens entre domínios exigem entradas correspondentes no pacote de proteção (ACL da Web) da lista de domínios do token. Para obter mais informações, consulte [AWS WAF configuração da lista de domínios de token do pacote de proteção (web ACL)](waf-tokens-domains.md#waf-tokens-domain-lists). 

Para obter informações adicionais sobre o uso de tokens entre domínios, consulte [aws-waf-bot-controlaws-samples/](https://github.com/aws-samples/aws-waf-bot-control-api-protection-with-captcha) -. api-protection-with-captcha

# Usando a API CAPTCHA JavaScript
<a name="waf-js-captcha-api"></a>

Esta seção fornece instruções para usar a API de integração CAPTCHA.

A JavaScript API CAPTCHA permite que você configure o quebra-cabeça CAPTCHA e o coloque onde quiser em seu aplicativo cliente. Essa API aproveita os recursos da ameaça inteligente JavaScript APIs para adquirir e usar AWS WAF tokens depois que um usuário final conclui com sucesso um quebra-cabeça de CAPTCHA. 

Implemente a JavaScript integração primeiro em um ambiente de teste e depois na produção. Para obter orientações adicionais sobre codificação, consulte as seções a seguir. 

**Para usar a API de integração CAPTCHA**

1. **Instale a API**

   1. Faça login no Console de gerenciamento da AWS e abra o AWS WAF console em [https://console.aws.amazon.com/wafv2/homev2](https://console.aws.amazon.com/wafv2/homev2). 

   1. No painel de navegação, escolha **Integração de aplicativos**. Na página **Integração de aplicativos**, você pode ver as opções com guias. 

   1. Selecione **Integração CAPTCHA**.

   1. Copie a tag do script de JavaScript integração listada para uso em sua integração.

   1. No código da página do aplicativo, na seção `<head>`, insira a tag de script que você copiou. Essa inclusão torna o quebra-cabeça CAPTCHA disponível para configuração e uso. 

      ```
      <head>
          <script type="text/javascript" src="integrationURL/jsapi.js" defer></script>
      </head>
      ```

      Essa lista `<script>` é configurada com o recurso `defer`, mas você pode alterar a configuração para `async` se quiser um comportamento diferente para sua página. 

      O script do CAPTCHA também carrega automaticamente o script de integração de ameaças inteligentes, caso ele ainda não esteja presente. O script de integração de ameaças inteligentes faz com que seu aplicativo cliente recupere automaticamente um token em segundo plano no carregamento da página e fornece outras funcionalidades de gerenciamento de tokens necessárias para o uso da API CAPTCHA. 

1. **(Opcional) Adicionar configuração de domínio para os tokens do cliente** — Por padrão, ao AWS WAF criar um token, ele usa o domínio host do recurso associado ao pacote de proteção (Web ACL). Para fornecer domínios adicionais para o JavaScript APIs, siga as orientações em[Fornecimento de domínios para uso nos tokens](waf-js-challenge-api-set-token-domain.md). 

1. **Obtenha a chave de API criptografada para o cliente** — A API CAPTCHA requer uma chave de API criptografada que contenha uma lista de domínios de clientes válidos. AWS WAF usa essa chave para verificar se o domínio do cliente que você está usando com a integração foi aprovado para usar AWS WAF CAPTCHA. Para gerar sua chave de API, siga as orientações em [Como gerenciar chaves de API para a API JS CAPTCHA](waf-js-captcha-api-key.md).

1. **Codificar a implementação do widget CAPTCHA**: implemente a chamada de API `renderCaptcha()` em sua página, no local em que você deseja usá-la. Para obter informações sobre como configurar e usar essa função, consulte as seguintes seções, [Especificação da API CAPTCHA JavaScript](waf-js-captcha-api-specification.md) e [Como renderizar o quebra-cabeça CAPTCHA](waf-js-captcha-api-render.md). 

   A implementação do CAPTCHA se integra à integração inteligente de ameaças APIs para gerenciamento de tokens e para executar chamadas de busca que usam os tokens. AWS WAF Para obter orientação sobre como usá-los APIs, consulte[Usando a JavaScript API de ameaças inteligentes](waf-js-challenge-api.md).

1. **Adicionar verificação de token ao pacote de proteção (ACL da Web)**: adicione pelo menos uma regra ao pacote de proteção (ACL da Web) que verifique se há um token de CAPTCHA válido nas solicitações da Web enviadas pelo cliente. Você pode usar a ação de regra CAPTCHA para verificar, conforme descrito em [CAPTCHAe Challenge em AWS WAF](waf-captcha-and-challenge.md). 

   As adições ao pacote de proteção (ACL da Web) verificam se as solicitações dirigidas aos endpoints protegidos incluem o token que você adquiriu na integração de cliente. Solicitações que incluem um token de CAPTCHA válido e não expirado passam pela inspeção de ação de regra CAPTCHA e não apresentam ao usuário final outro quebra-cabeça CAPTCHA. 

Depois de implementar a JavaScript API, você pode revisar as CloudWatch métricas das tentativas e soluções de quebra-cabeças do CAPTCHA. Para obter detalhes sobre métricas e dimensões, consulte [Métricas e dimensões da conta](waf-metrics.md#waf-metrics-account).

**Topics**
+ [Especificação da API CAPTCHA JavaScript](waf-js-captcha-api-specification.md)
+ [Como renderizar o quebra-cabeça CAPTCHA](waf-js-captcha-api-render.md)
+ [Manipulando uma resposta CAPTCHA de AWS WAF](waf-js-captcha-api-conditional.md)
+ [Como gerenciar chaves de API para a API JS CAPTCHA](waf-js-captcha-api-key.md)

# Especificação da API CAPTCHA JavaScript
<a name="waf-js-captcha-api-specification"></a>

Esta seção lista a especificação dos métodos e propriedades do CAPTCHA JavaScript APIs. Use o CAPTCHA JavaScript APIs para executar quebra-cabeças CAPTCHA personalizados em seus aplicativos cliente. 

Essa API se baseia na ameaça inteligente APIs, que você usa para configurar e gerenciar a aquisição e o uso de AWS WAF tokens. Consulte [Especificação da API de ameaças inteligentes](waf-js-challenge-api-specification.md).

**`AwsWafCaptcha.renderCaptcha(container, configuration)`**  
Apresenta um quebra-cabeça de AWS WAF CAPTCHA para o usuário final e, em caso de sucesso, atualiza o token do cliente com a validação do CAPTCHA. Ele está disponível apenas com a integração CAPTCHA. Use essa chamada junto com a ameaça inteligente APIs para gerenciar a recuperação do token e fornecer o token em suas `fetch` chamadas. Veja a ameaça inteligente APIs em[Especificação da API de ameaças inteligentes](waf-js-challenge-api-specification.md).  
Ao contrário do intersticial CAPTCHA que AWS WAF envia, o quebra-cabeça CAPTCHA renderizado por esse método exibe o quebra-cabeça imediatamente, sem uma tela de título inicial.     
**`container`**  
O objeto `Element` do elemento do contêiner de destino na página. Isso geralmente é recuperado chamando `document.getElementById()` ou `document.querySelector()`.  
Obrigatório: sim  
Tipo: `Element`  
**configuração**  
Um objeto contendo as configurações do CAPTCHA, da seguinte forma****:    
**`apiKey`**   
A chave de API criptografada que habilita permissões para o domínio do cliente. Use o console do AWS WAF para gerar suas chaves de API para seus domínios de clientes. Você pode usar uma chave para até cinco domínios. Para mais informações, consulte [Como gerenciar chaves de API para a API JS CAPTCHA](waf-js-captcha-api-key.md).   
Obrigatório: Sim  
Tipo: `string`  
**`onSuccess: (wafToken: string) => void;`**   
Chamado com um AWS WAF token válido quando o usuário final conclui com sucesso um quebra-cabeça de CAPTCHA. Use o token nas solicitações que você envia aos endpoints que você protege com um pacote de AWS WAF proteção (web ACL). O token fornece a prova e o timestamp da conclusão bem-sucedida do último quebra-cabeça.   
Obrigatório: Sim  
**`onError?: (error: CaptchaError) => void;`**   
Chamado com um objeto de erro quando ocorre um erro durante a operação CAPTCHA.   
Obrigatório: não  
**Definição de classe `CaptchaError`**: o manipulador `onError` fornece um tipo de erro com a seguinte definição de classe.   

```
CaptchaError extends Error {
    kind: "internal_error" | "network_error" | "token_error" | "client_error";
    statusCode?: number;
}
```
+ `kind`: o tipo de erro retornado. 
+ `statusCode`: o código de status do HTTP, se disponível. Isso é usado por `network_error` se o erro for devido a um erro no HTTP.  
**`onLoad?: () => void;`**   
Chamado quando um novo quebra-cabeça CAPTCHA é carregado.  
Obrigatório: não  
**`onPuzzleTimeout?: () => void;`**   
Chamado quando um quebra-cabeça CAPTCHA não é concluído antes de expirar.  
Obrigatório: não  
**`onPuzzleCorrect?: () => void;`**   
Chamado quando uma resposta correta é fornecida a um quebra-cabeça CAPTCHA.  
Obrigatório: não  
**`onPuzzleIncorrect?: () => void;`**   
Chamado quando uma resposta incorreta é fornecida a um quebra-cabeça CAPTCHA.  
Obrigatório: não  
**`defaultLocale`**   
A localidade padrão a ser usada para o quebra-cabeça CAPTCHA. As instruções escritas para quebra-cabeças CAPTCHA estão disponíveis em árabe (ar-SA), chinês simplificado (zh-CN), holandês (nl-NL), inglês (en-US), francês (fr-FR), alemão (de-DE), italiano (it-IT), japonês (ja-JP), português do Brasil (pt-BR), espanhol (es-ES) e turco (tr-TR). As instruções de áudio estão disponíveis para todos os idiomas escritos, exceto chinês e japonês, cujos padrões são o inglês. Para alterar o idioma padrão, forneça o idioma e o código de localidade internacionais, por exemplo, `ar-SA`.  
Padrão: o idioma atualmente em uso no navegador do usuário final  
Obrigatório: não  
Tipo: `string`  
**`disableLanguageSelector`**   
Se definido como `true`, o quebra-cabeça CAPTCHA oculta o seletor de idioma.   
Padrão: `false`  
Exigido: Não  
Tipo: `boolean`  
**`dynamicWidth`**   
Se definido como `true`, o quebra-cabeça CAPTCHA muda de largura para compatibilidade com a largura da janela do navegador.   
Padrão: `false`  
Exigido: Não  
Tipo: `boolean`  
**`skipTitle`**   
Se definido como `true`, o quebra-cabeça CAPTCHA não exibirá o título do quebra-cabeça **Resolva o quebra-cabeça**.   
Padrão: `false`  
Exigido: Não  
Tipo: `boolean`

# Como renderizar o quebra-cabeça CAPTCHA
<a name="waf-js-captcha-api-render"></a>

Esta seção fornece um exemplo de implementação `renderCaptcha`.

Você pode usar a AWS WAF `renderCaptcha` chamada onde quiser na interface do cliente. A chamada recupera um quebra-cabeça de CAPTCHA AWS WAF, o renderiza e envia os resultados para verificação. AWS WAF Ao fazer a chamada, você fornece a configuração de renderização do quebra-cabeça e os retornos de chamada que deseja executar quando os usuários finais concluírem o quebra-cabeça. Consulte a seção anterior, [Especificação da API CAPTCHA JavaScript](waf-js-captcha-api-specification.md), para detalhes sobre as opções.

Use essa chamada em conjunto com a funcionalidade de gerenciamento de tokens da integração APIs inteligente de ameaças. Essa chamada fornece ao seu cliente um token que verifica a conclusão bem-sucedida do quebra-cabeça CAPTCHA. Use a integração inteligente de ameaças APIs para gerenciar o token e fornecer o token nas chamadas do seu cliente para os endpoints protegidos com pacotes de AWS WAF proteção (web ACLs). Para obter informações sobre a ameaça inteligente APIs, consulte[Usando a JavaScript API de ameaças inteligentes](waf-js-challenge-api.md).

**Exemplos de implementação**  
A lista de exemplos a seguir mostra uma implementação padrão de CAPTCHA, incluindo o posicionamento da URL de AWS WAF integração na `<head>` seção. 

Essa listagem configura a `renderCaptcha` função com um retorno de chamada bem-sucedido que usa o `AwsWafIntegration.fetch` invólucro da integração inteligente de ameaças. APIs Para ter mais informações sobre essa função, consulte [Como usar o wrapper de integração `fetch`](waf-js-challenge-api-fetch-wrapper.md).

```
<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>

<script type="text/javascript">
    function showMyCaptcha() {
        var container = document.querySelector("#my-captcha-container");
        
        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            ...other configuration parameters as needed...
        });
    }
    
    function captchaExampleSuccessFunction(wafToken) {
        // Captcha completed. wafToken contains a valid WAF token. Store it for
        // use later or call AwsWafIntegration.fetch() to use it easily.
        // It will expire after a time, so calling AwsWafIntegration.getToken()
        // again is advised if the token is needed later on, outside of using the
        // fetch wrapper.
        
        // Use WAF token to access protected resources
        AwsWafIntegration.fetch("...WAF-protected URL...", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: "{ ... }" /* body content */
        });
    }
    
    function captchaExampleErrorFunction(error) {
        /* Do something with the error */
    }
</script>

<div id="my-captcha-container">
    <!-- The contents of this container will be replaced by the captcha widget -->
</div>
```

**Exemplo de definições de configuração**  
A lista de exemplo a seguir mostra o `renderCaptcha` com configurações não padrão para as opções de largura e o título. 

```
        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            dynamicWidth: true, 
            skipTitle: true
        });
```

Para obter informações completas sobre as opções de configuração, consulte [Especificação da API CAPTCHA JavaScript](waf-js-captcha-api-specification.md).

# Manipulando uma resposta CAPTCHA de AWS WAF
<a name="waf-js-captcha-api-conditional"></a>

Esta seção fornece um exemplo de como lidar com uma resposta CAPTCHA.

Uma AWS WAF regra com uma CAPTCHA ação encerra a avaliação de uma solicitação da web correspondente se a solicitação não tiver um token com um carimbo de data/hora CAPTCHA válido. Se a solicitação for uma `GET` text/html chamada, a CAPTCHA ação então serve ao cliente um intersticial com um quebra-cabeça de CAPTCHA. Quando você não integra a JavaScript API CAPTCHA, o intersticial executa o quebra-cabeça e, se o usuário final o resolver com sucesso, reenvia automaticamente a solicitação. 

Ao integrar a JavaScript API CAPTCHA e personalizar o tratamento do CAPTCHA, você precisa detectar a resposta de encerramento do CAPTCHA, fornecer seu CAPTCHA personalizado e, se o usuário final resolver o quebra-cabeça com sucesso, reenviar a solicitação web do cliente. 

O exemplo de código a seguir mostra como fazer isso. 

**nota**  
A resposta da AWS WAF CAPTCHA ação tem um código de status HTTP 405, que usamos para reconhecer a CAPTCHA resposta nesse código. Se seu endpoint protegido usa um código de status HTTP 405 para comunicar qualquer outro tipo de resposta para a mesma chamada, esse código de exemplo também renderizará um quebra-cabeça CAPTCHA para essas respostas. 

```
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>
<body>
    <div id="my-captcha-box"></div>
    <div id="my-output-box"></div>

    <script type="text/javascript">
    async function loadData() {
        // Attempt to fetch a resource that's configured to trigger a CAPTCHA
        // action if the rule matches. The CAPTCHA response has status=HTTP 405.
        const result = await AwsWafIntegration.fetch("/protected-resource");

        // If the action was CAPTCHA, render the CAPTCHA and return

        // NOTE: If the endpoint you're calling in the fetch call responds with HTTP 405
        // as an expected response status code, then this check won't be able to tell the
        // difference between that and the CAPTCHA rule action response.

        if (result.status === 405) {
            const container = document.querySelector("#my-captcha-box");
            AwsWafCaptcha.renderCaptcha(container, {
                apiKey: "...API key goes here...",
                onSuccess() {
                    // Try loading again, now that there is a valid CAPTCHA token
                    loadData();
                },
            });
            return;
        }

        const container = document.querySelector("#my-output-box");
        const response = await result.text();
        container.innerHTML = response;
    }

    window.addEventListener("load", () => {
        loadData();
    });
    </script>
</body>
</html>
```

# Como gerenciar chaves de API para a API JS CAPTCHA
<a name="waf-js-captcha-api-key"></a>

Esta seção fornece instruções para gerar e excluir chaves de API.

Para integrar o AWS WAF CAPTCHA em um aplicativo cliente com a JavaScript API, você precisa da tag de integração da JavaScript API e da chave de API criptografada para o domínio do cliente em que deseja executar o quebra-cabeça do CAPTCHA. 

A integração do aplicativo CAPTCHA JavaScript usa as chaves de API criptografadas para verificar se o domínio do aplicativo cliente tem permissão para usar a API AWS WAF CAPTCHA. Ao chamar a API CAPTCHA do seu JavaScript cliente, você fornece uma chave de API com uma lista de domínios que inclui um domínio para o cliente atual. Você pode listar até 5 domínios em uma única chave criptografada. 

**Requisitos de chaves de API**  
A chave de API que você usa na integração do CAPTCHA deve conter um domínio que se aplique ao cliente em que você usa a chave. 
+ Se você especificar um `window.awsWafCookieDomainList` na integração de ameaças inteligentes do seu cliente, pelo menos um domínio em sua chave de API deverá corresponder exatamente a um dos domínios de token em `window.awsWafCookieDomainList` ou deverá ser o domínio apex de um desses domínios de token. 

  Por exemplo, para o domínio do token `mySubdomain.myApex.com`, a chave de API `mySubdomain.myApex.com` é uma correspondência exata e a chave de API `myApex.com` é o domínio apex. Qualquer chave corresponde ao domínio do token. 

  Para obter informações sobre a configuração da lista de domínios de tokens, consulte [Fornecimento de domínios para uso nos tokens](waf-js-challenge-api-set-token-domain.md).
+ Caso contrário, o domínio atual deverá estar contido na chave da API. O domínio atual é o domínio que você pode ver na barra de endereço do navegador. 

Os domínios que você usa devem ser aqueles que AWS WAF serão aceitos, com base no domínio de host protegido e na lista de domínios de token configurada para a Web ACL. Para obter mais informações, consulte [AWS WAF configuração da lista de domínios de token do pacote de proteção (web ACL)](waf-tokens-domains.md#waf-tokens-domain-lists).

**Como escolher a região da sua chave de API**  
AWS WAF pode gerar chaves de API CAPTCHA em qualquer região em que AWS WAF esteja disponível. 

Como regra geral, você deve usar a mesma região para a chave de API de CAPTCHA que usa para o pacote de proteção (ACL da Web). No entanto, se você espera um público global para um pacote de proteção regional (Web ACL), você pode obter uma tag de JavaScript integração CAPTCHA com escopo CloudFront e uma chave de API com escopo e usá-las com um pacote de proteção regional (Web ACL). CloudFront Essa abordagem permite que os clientes carreguem um código CAPTCHA da região mais próxima a eles, o que reduz a latência. 

As chaves da API CAPTCHA que têm como escopo regiões diferentes das CloudFront quais não são suportadas para uso em várias regiões. Elas só podem ser usadas na região para a qual estão previstas. 

**Para gerar uma chave de API para seus domínios de clientes**  
Para obter a URL de integração e gerar e recuperar as chaves de API por meio do console. 

1. Faça login no Console de gerenciamento da AWS e abra o AWS WAF console em [https://console.aws.amazon.com/wafv2/homev2](https://console.aws.amazon.com/wafv2/homev2). 

1. No painel de navegação, escolha **Integração de aplicativos**. 

1. No painel, **pacotes de proteção (web ACLs) que estão habilitados para integração de aplicativos**, selecione a região que você deseja usar para sua chave de API. Você também pode selecionar a região no painel de **Chaves de API** da guia de **Integração do CAPTCHA**.

1. Escolha a guia **Integração de CAPTCHA**. Essa guia fornece a tag de JavaScript integração CAPTCHA, que você pode usar em sua integração, e a lista de chaves de API. Ambos têm como escopo a região selecionada.

1. No painel **Chaves de API**, escolha **Gerar chave**. A caixa de diálogo de geração de chaves é exibida. 

1. Insira os domínios de cliente que você deseja incluir na chave. Você pode inserir até 5. Quando terminar, escolha **Gerar chave**. A interface retorna à guia de integração do CAPTCHA, onde sua nova chave está listada. 

   Depois de criada, uma chave de API é imutável. Se você precisar fazer alterações em uma chave, gere uma nova chave e use-a em vez disso. 

1. (Opcional) Copie a chave recém-gerada para uso em sua integração. 

Você também pode usar o REST APIs ou um idioma específico AWS SDKs para esse trabalho. As chamadas da API REST são [Criar APIKey](https://docs.aws.amazon.com/waf/latest/APIReference/API_CreateAPIKey.html) e [Listar APIKeys](https://docs.aws.amazon.com/waf/latest/APIReference/API_ListAPIKeys.html). 

**Para excluir uma chave de API**  
Para excluir uma chave de API, você deve usar a API REST ou uma linguagem específica AWS SDKs. A chamada da API REST é [Delete APIKey](https://docs.aws.amazon.com/waf/latest/APIReference/API_DeleteAPIKey.html). Você não pode usar o console para excluir uma chave. 

Depois de excluir uma chave, pode levar até 24 horas para AWS WAF proibir o uso da chave em todas as regiões. 