Como renderizar o quebra-cabeça CAPTCHA - AWS WAF, AWS Firewall Manager, e AWS Shield Advanced

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á.

Como renderizar o quebra-cabeça CAPTCHA

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

Você pode usar a chamada renderCaptcha do AWS WAF onde quiser na interface do cliente. A chamada recupera um quebra-cabeça CAPTCHA do AWS WAF, o renderiza e envia os resultados para o AWS WAF para verificação. 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, para detalhes sobre as opções.

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

Exemplos de implementação

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

Essa listagem configura a função renderCaptcha com um retorno de chamada bem-sucedido que usa o wrapper AwsWafIntegration.fetch das APIs de integração de ameaças inteligentes. Para ter mais informações sobre essa função, consulte Como usar o wrapper de integração fetch.

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