Come renderizzare il CAPTCHA puzzle - AWS WAF, AWS Firewall Manager e AWS Shield Advanced

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Come renderizzare il CAPTCHA puzzle

Questa sezione fornisce un esempio di renderCaptcha implementazione.

Puoi utilizzare il plugin AWS WAF renderCaptchachiama dove vuoi nell'interfaccia client. La chiamata recupera un CAPTCHA puzzle da AWS WAF, lo rende e invia i risultati a AWS WAF per la verifica. Quando effettui la chiamata, fornisci la configurazione di rendering del puzzle e i callback che desideri eseguire quando gli utenti finali completano il puzzle. Per informazioni dettagliate sulle opzioni, consultate la sezione precedente,. Specifiche dell'API CAPTCHA JavaScript

Utilizzate questa chiamata insieme alla funzionalità di gestione dei token dell'integrazione intelligente delle minacce. APIs Questa chiamata fornisce al cliente un token che verifica il completamento con successo del CAPTCHA puzzle. Utilizzate l'integrazione intelligente delle minacce APIs per gestire il token e per fornire il token nelle chiamate del cliente agli endpoint protetti con AWS WAF webACLs. Per informazioni sulla minaccia intelligenteAPIs, vedereUtilizzo della minaccia intelligente JavaScript API.

Esempio di implementazione

L'elenco di esempio seguente mostra un'CAPTCHAimplementazione standard, incluso il posizionamento di AWS WAF integrazione URL nella <head> sezione.

Questo elenco configura la renderCaptcha funzione con un callback di successo che utilizza il AwsWafIntegration.fetch wrapper dell'integrazione intelligente delle minacce. APIs Per informazioni su questa funzione, vedere. Come usare il fetch wrapper di integrazione

<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>
Impostazioni di configurazione di esempio

L'elenco di esempio seguente mostra le opzioni renderCaptcha con impostazioni non predefinite per la larghezza e il titolo. 


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

Per informazioni complete sulle opzioni di configurazione, vedereSpecifiche dell'API CAPTCHA JavaScript .