如何渲染CAPTCHA拼圖 - AWS WAFAWS Firewall Manager、 和 AWS Shield Advanced

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

如何渲染CAPTCHA拼圖

本節提供renderCaptcha實作範例。

您可以使用 AWS WAF renderCaptcha在客戶端界面中調用您想要的位置。該呼叫從中檢索一個CAPTCHA謎題 AWS WAF，進行渲染，並將結果發送到 AWS WAF 用於驗證。當您進行呼叫時，您會提供拼圖轉譯配置和您想要在最終使用者完成謎題時執行的回呼。如需有關選項的詳細資訊，請參閱前一節驗證碼 JavaScript API 規格。

將此呼叫與智慧型威脅整合的 Token 管理功能搭配使用APIs。這個調用為您的客戶提供了一個令牌，用於驗證CAPTCHA拼圖的成功完成。使用智能威脅集成APIs來管理令牌，並將客戶通話中的令牌提供給受保護的端點 AWS WAF 網頁ACLs。如需智慧型威脅的相關資訊APIs，請參閱使用智慧型威脅 JavaScript API。

實施示例

下列範例清單顯示標準CAPTCHA實作，包括 AWS WAF <head>區段URL中的整合。

此清單會使用使用智慧型威脅整合AwsWafIntegration.fetch包裝renderCaptcha函式的成功回呼來設定函數。APIs如需有關此函數的資訊，請參閱如何使用集成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>
範例組態設定

下列範例列出了renderCaptcha寬度和標題選項的非預設設定。


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

如需組態選項的完整資訊，請參閱驗證碼 JavaScript API 規格。