如何显示验证码拼图 - AWS WAF、AWS Firewall Manager、AWS Shield Advanced 和 AWS Shield 网络安全分析器

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

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

如何显示验证码拼图

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

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

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

实施示例

以下示例列表显示了标准的验证码实施，包括 AWS 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 规范。