CAPTCHA 퍼즐을 렌더링하는 방법

포커스 모드

CAPTCHA 퍼즐을 렌더링하는 방법 - AWS WAFAWS Firewall Manager, 및 AWS Shield Advanced

이 섹션에서는 renderCaptcha 구현 예제를 제공합니다.

클라이언트 인터페이스에서 AWS WAF renderCaptcha 원하는 위치에서 호출을 사용할 수 있습니다. 호출은 CAPTCHA 퍼즐을 검색 AWS WAF하여 렌더링하고 확인을 AWS WAF 위해 결과를에 전송합니다. 전화를 걸 때 퍼즐 렌더링 구성과 최종 사용자가 퍼즐을 완료했을 때 실행할 콜백을 제공합니다. 옵션에 대한 자세한 내용은 앞 섹션인 CAPTCHA JavaScript API 사양 섹션을 참조하세요.

이 호출을 지능형 위협 통합 API의 토큰 관리 기능과 함께 사용하십시오. 이 호출은 CAPTCHA 퍼즐의 성공적인 완료를 확인하는 토큰을 클라이언트에게 제공합니다. 지능형 위협 통합 APIs를 사용하여 토큰을 관리하고 AWS WAF 웹 ACLs로 보호되는 엔드포인트에 대한 클라이언트의 호출에서 토큰을 제공합니다. 지능형 위협 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
        });