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

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

如何显示验证码拼图

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

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

实施示例

以下示例列表显示了标准的 CAPTCHA 实现，包括 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
        });

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