CAPTCHA 퍼즐을 렌더링하는 방법 - AWS WAF, AWS Firewall ManagerAWS Shield Advanced및 AWS Shield 네트워크 보안 디렉터

에 대한 새로운 콘솔 환경 소개 AWS WAF

이제 업데이트된 환경을 사용하여 콘솔의 모든 위치에서 AWS WAF 기능에 액세스할 수 있습니다. 자세한 내용은 업데이트된 콘솔 환경 작업 섹션을 참조하십시오.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

CAPTCHA 퍼즐을 렌더링하는 방법

이 섹션에서는 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
        });

구성 옵션에 대한 전체 정보는 CAPTCHA JavaScript API 사양 섹션을 참조하세요.