本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
本节提供了处理验证码响应的示例。
带有的 AWS WAF 规则 CAPTCHA 如果匹配的 Web 请求没有带有有效 CAPTCHA 时间戳的令牌，则操作会终止对该请求的评估。如果请求是GET文本/html 调用，CAPTCHA 然后，action 为客户提供带有验证码拼图的插页式广告。当你不集成 CAPTCHA JavaScript API 时，插页式广告会运行拼图，如果最终用户成功解决了这个问题，则会自动重新提交请求。
当你集成 CAPTCHA JavaScript API 并自定义验证码处理时，你需要检测终止的验证码响应，提供你的自定义 CAPTCHA，然后如果最终用户成功解决了难题，则重新提交客户的 Web 请求。
以下代码示例演示如何执行此操作。
注意
的 AWS WAF CAPTCHA 操作响应的状态码为 HTTP 405，我们用它来识别 CAPTCHA 此代码中的响应。如果您的受保护端点使用 HTTP 405 状态代码为同一调用传递任何其他类型的响应，本示例代码也会为这些响应显示验证码拼图。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>
<body>
<div id="my-captcha-box"></div>
<div id="my-output-box"></div>
<script type="text/javascript">
async function loadData() {
// Attempt to fetch a resource that's configured to trigger a CAPTCHA
// action if the rule matches. The CAPTCHA response has status=HTTP 405.
const result = await AwsWafIntegration.fetch("/protected-resource");
// If the action was CAPTCHA, render the CAPTCHA and return
// NOTE: If the endpoint you're calling in the fetch call responds with HTTP 405
// as an expected response status code, then this check won't be able to tell the
// difference between that and the CAPTCHA rule action response.
if (result.status === 405) {
const container = document.querySelector("#my-captcha-box");
AwsWafCaptcha.renderCaptcha(container, {
apiKey: "...API key goes here...",
onSuccess() {
// Try loading again, now that there is a valid CAPTCHA token
loadData();
},
});
return;
}
const container = document.querySelector("#my-output-box");
const response = await result.text();
container.innerHTML = response;
}
window.addEventListener("load", () => {
loadData();
});
</script>
</body>
</html>