Cómo renderizar el rompecabezas de CAPTCHA

Modo de enfoque

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

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

Puede usar la AWS WAF renderCaptcha llamada donde desee en la interfaz de cliente. La llamada recupera un acertijo de CAPTCHA AWS WAF, lo renderiza y envía los resultados para su verificación. AWS WAF 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 CAPTCHA JavaScript .

Utilice esta llamada junto con la funcionalidad de administración de tokens de la integración inteligente de amenazas. APIs Esta llamada proporciona a su cliente un token que verifica que ha completado correctamente el rompecabezas de CAPTCHA. Utilice la integración inteligente de amenazas APIs para administrar el token y proporcionarlo en las llamadas de sus clientes a los puntos finales que están protegidos por la AWS WAF web ACLs. Para obtener información sobre la amenaza inteligente APIs, consulteUso de la JavaScript API 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 AWS WAF integración en la <head> sección.

Esta lista configura la renderCaptcha función con una llamada de respuesta correcta que utiliza el AwsWafIntegration.fetch contenedor de la integración de amenazas inteligentes. APIs 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
        });