Cómo renderizar el rompecabezas de CAPTCHA - AWS WAF, AWS Firewall Manager, y AWS Shield Advanced

Cómo renderizar el rompecabezas de CAPTCHA

En esta sección se incluye un ejemplo de la implementación de renderCaptcha.

Puede usar la llamada renderCaptcha de AWS WAF donde quiera en su interfaz de cliente. La llamada recupera un rompecabezas de CAPTCHA de AWS WAF, lo renderiza y envía los resultados a AWS WAF para su verificación. Al realizar la llamada, proporciona la configuración de renderización del rompecabezas y las devoluciones de llamadas que desea ejecutar cuando los usuarios finales completen el rompecabezas. Para obtener detalles sobre las opciones, consulte la sección anterior, Especificación de la API de JavaScript de CAPTCHA.

Utilice esta llamada junto con la funcionalidad de administración de tokens de las API de integración de amenazas inteligentes. Esta llamada proporciona a su cliente un token que verifica que ha completado correctamente el rompecabezas de CAPTCHA. Utilice las API de integración de amenazas inteligentes para gestionar el token y proporcionarlo en las llamadas de sus clientes a los puntos de conexión protegidos con ACL web de AWS WAF. Para obtener más información acerca de las API de amenazas inteligentes, consulte Uso de la API de JavaScript de amenazas inteligentes.

Despliegue de ejemplo

La siguiente lista de ejemplos muestra una implementación de CAPTCHA estándar, incluida la ubicación de la URL de integración AWS WAF en la sección <head>.

En este listado, se configura la función renderCaptcha con una devolución de llamada de éxito que utiliza el contenedor AwsWafIntegration.fetch de las API de integración de amenazas inteligentes. Para obtener información acerca de esta función, consulte Cómo utilizar el contenedor fetch de integración.

<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>
Ejemplo de configuración

En la siguiente lista de ejemplos, se muestra la configuración no predeterminada de renderCaptcha para las opciones de ancho y título. 


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

Para obtener información completa acerca de las opciones de configuración, consulte Especificación de la API de JavaScript de CAPTCHA.