如何显示验证码拼图 - Amazon WAF、Amazon Firewall Manager、Amazon Shield Advanced 和 Amazon Shield 网络安全分析器
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

介绍 Amazon WAF 的全新控制台体验

现在，您可以使用更新后的体验访问控制台中任意位置的 Amazon WAF 功能。有关更多详细信息，请参阅 使用更新的控制台体验。

如何显示验证码拼图

本节提供了 renderCaptcha 实现的一个示例。

您可以在客户端界面的任何地方使用 Amazon WAF renderCaptcha 调用。该调用从 Amazon WAF 中检索并显示验证码拼图，然后将结果发送到 Amazon WAF 进行验证。调用时，您需要提供拼图显示配置以及最终用户完成拼图时要运行的回调。有关选项的更多信息，请参阅上一部分 CAPTCHA JavaScript API 规范。

将此调用与智能威胁集成 API 的令牌管理功能结合使用。该调用将为您的客户端提供一个令牌，用于验证验证码拼图是否成功完成。使用智能威胁集成 API 来管理令牌，并在客户端调用受 Amazon WAF 保护包（web ACL）保护的端点时提供令牌。有关智能威胁 API 的信息，请参阅 使用智能威胁 JavaScript API。

实施示例

以下示例列表显示了标准的验证码实施，包括 Amazon WAF 集成 URL 在该 <head> 部分中的放置。

该列表将使用智能威胁集成 API 的 AwsWafIntegration.fetch 包装程序配置带有成功回调的 renderCaptcha 函数。有关此函数的信息，请参阅 如何使用集成 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
        });

有关配置选项的全部信息，请参阅 CAPTCHA JavaScript API 规范。