如何轉譯 CAPTCHA 拼圖 - AWS WAFAWS Firewall Manager、 AWS Shield Advanced和 AWS Shield 網路安全主管

推出 的新主控台體驗 AWS WAF

您現在可以使用更新後的體驗，在主控台的任何位置存取 AWS WAF 功能。如需詳細資訊，請參閱使用更新的主控台體驗。

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

如何轉譯 CAPTCHA 拼圖

本節提供範例renderCaptcha實作。

您可以在 AWS WAF renderCaptcha用戶端界面中使用您想要的 呼叫。呼叫會從 擷取 CAPTCHA 拼圖 AWS WAF、轉譯它，並將結果傳送至 AWS WAF 以進行驗證。當您進行呼叫時，您會提供拼圖轉譯組態，以及在最終使用者完成拼圖時要執行的回呼。如需選項的詳細資訊，請參閱上一節：CAPTCHA JavaScript API 規格。

將此呼叫與智慧型威脅整合 APIs的字符管理功能搭配使用。此呼叫會為您的用戶端提供權杖，以驗證 CAPTCHA 拼圖是否成功完成。使用智慧型威脅整合 APIs 來管理權杖，並在用戶端呼叫受 AWS WAF 保護套件或 Web ACLs 保護的端點時提供權杖。如需智慧型威脅 APIs的詳細資訊，請參閱 使用智慧型威脅 JavaScript API。

實作範例

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

此清單使用使用智慧型威脅整合 APIs 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 規格。