CAPTCHA パズルをレンダリングする方法 - AWS WAF、AWS Firewall Manager、および AWS Shield Advanced

CAPTCHA パズルをレンダリングする方法

このセクションでは、renderCaptcha の実施例を示します。

クライアントインターフェイスの任意の場所で AWS WAF renderCaptcha 呼び出しを使用できます。この呼び出しで AWS WAF から CAPTCHA パズルが取得されてレンダリングされ、検証のために結果が AWS WAF に送信されます。呼び出しを行うときは、パズルのレンダリング設定と、エンドユーザーがパズルを完成させたときに実行するコールバックを指定します。オプションの詳細については、前のセクション「CAPTCHA JavaScript API 仕様」を参照してください。

この呼び出しは、インテリジェントな脅威に対応した統合 API のトークン管理機能と組み合わせて使用します。この呼び出しにより、CAPTCHA パズルの完成に成功したことを検証するトークンがクライアントに渡されます。インテリジェントな脅威に対応した統合 API を使用してトークンを管理し、AWS WAF ウェブ ACL で保護されているエンドポイントへのクライアントの呼び出しでトークンを提供します。インテリジェントな脅威に対応した API の詳細については、「インテリジェントな脅威に対応した JavaScript API の使用」を参照してください。

実装例

次のリストの例は、<head> セクション内の AWS WAF 統合 URL の配置など、標準的な CAPTCHA 実装を示しています。

このリストは、インテリジェントな脅威に対応した統合 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 仕様」を参照してください。