웹사이트에 점수 기반 사이트 키 설치(챌린지 없음)

이 페이지에서는 웹사이트에 챌린지 없이 점수 기반 사이트 키를 설치하는 방법을 설명합니다. 점수 기반 사이트 키를 사용하면 사용자가 보안문자 챌린지에 답하지 않고도 사이트 전체에서 reCAPTCHA Enterprise를 포함할 수 있습니다.

점수 기반 사이트 키를 설치하면 사용자 마찰 없이 각 요청에 대한 점수가 반환됩니다. 점수를 기준으로 사용자 상호작용의 위험도를 이해하고 적절한 응답을 구성할 수 있습니다. 또한 점수 기반 사이트 키는 새로운 공격 또는 대상에 대한 조기 경고를 위해 봇 활동 원격 분석 정보를 수집할 수 있습니다.

reCAPTCHA Enterprise의 위험 모델을 개선하려면 사이트의 모든 페이지에 reCAPTCHA Enterprise를 포함하는 것이 좋습니다. 실제 사용자와 봇이 여러 페이지와 작업 간에 어떻게 전환되는지 이해하는 데 도움이 됩니다.

시작하기 전에

  1. 환경에서 reCAPTCHA Enterprise를 설정하는 가장 좋은 방법을 선택하고 설정을 완료합니다.

  2. 점수 기반 사이트 키를 만듭니다. 또는 다음 단계 중 하나를 수행하여 기존 점수 기반 사이트 키의 ID를 복사할 수 있습니다.

    • Google Cloud Console에서 기존 점수 기반 사이트 키의 ID를 복사하려면 다음을 수행합니다.

      1. reCAPTCHA Enterprise 페이지로 이동합니다.

        reCAPTCHA Enterprise로 이동

      2. reCAPTCHA 키 목록에서 복사할 키 ID 위에 마우스 포인터를 올려놓고 를 클릭합니다.

    • REST API를 사용하여 기존 점수 기반 사이트 키의 ID를 복사하려면 projects.keys.list 메서드를 사용합니다.

    • gcloud 도구를 사용하여 기존 점수 기반 사이트 키의 ID를 복사하려면 gcloud recaptcha keys list 명령어를 사용합니다.

웹사이트에 키 배치

reCAPTCHA Enterprise는 사이트 상호작용에 대한 컨텍스트가 있을 때 가장 잘 작동합니다. reCAPTCHA Enterprise는 합법적인 동작과 악의적인 동작을 모두 모니터링하여 사이트 상호작용에 대해 학습합니다.

최상의 결과를 얻으려면 웹사이트의 다음 위치에 점수 기반 사이트 키를 설치합니다.

  • 설문지
  • 작업(사용자 상호작용)
  • 모든 웹페이지의 배경

점수 기반 사이트 키는 사용자를 방해하지 않으므로 전환에 영향을 주지 않으면서 필요할 때마다 점수 기반 사이트 키를 사용하여 reCAPTCHA Enterprise를 실행할 수 있습니다.

프런트엔드에 키 통합

  1. 웹페이지에서 reCAPTCHA Enterprise를 로드하려면 웹페이지의 <head></head> 요소 내에 점수 기반 사이트 키가 있는 자바스크립트 API를 추가합니다.
        <head>
        <script src="https://www.google.com/recaptcha/enterprise.js?render=site_key"></script>
        ....
        </head>
      
  2. 특정 상호작용(예: 버튼 클릭, 여러 상호작용) 시 또는 웹페이지가 로드될 때 reCAPTCHA Enterprise 인증을 추가합니다.

    action 매개변수를 지정하면 다음 기능이 사용 설정됩니다.

    • 악의적인 행동은 다양할 수 있으므로 작업의 맥락에 근거한 적응형 위험 분석.
    • Stackdriver에서 작업별 점수 메트릭의 필터링 및 그룹화.

    reCAPTCHA Enterprise 인증을 추가할 위치에 따라 적절한 옵션을 선택합니다.

    • 사용자 상호작용에 reCAPTCHA Enterprise 인증을 추가하려면 다음 안내를 따르세요.

      1. reCAPTCHA 라이브러리가 로드될 때 grecaptcha.enterprise.execute()가 실행되도록 하려면 grecaptcha.enterprise.ready()를 사용합니다.

      2. 점수 기반 사이트 키로 보호하려는 각 상호작용에 대해 grecaptcha.enterprise.execute()를 호출합니다. action 매개변수에서 사용자 상호작용에 의미 있는 이름을 지정합니다. 자세한 내용은 작업을 참조하세요.

        다음 예시에서는 로그인 작업에서 grecaptcha.enterprise.execute()를 호출하는 방법을 보여줍니다.

           <script>
            function onClick(e) {
              e.preventDefault();
              grecaptcha.enterprise.ready(async () => {
                const token = await grecaptcha.enterprise.execute('site_key', {action: 'LOGIN'});
                // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
                // reCAPTCHA Enterprise to the end user's browser.
                // This token must be validated by creating an assessment.
                // See https://cloud.google.com/recaptcha-enterprise/docs/create-assessment
              });
            }
           </script>
           

        grecaptcha.enterprise.execute()는 다음 예시와 같이 토큰을 생성합니다.

        03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA
        
      3. 페이지 로드 시 reCAPTCHA Enterprise 인증을 추가하려면 다음을 수행합니다.

        1. reCAPTCHA 라이브러리가 로드될 때 grecaptcha.enterprise.execute()가 실행되도록 하려면 grecaptcha.enterprise.ready()를 사용합니다.

        2. 점수 기반 사이트 키를 사용하여 grecaptcha.enterprise.execute()를 호출하고 action 매개변수에서 사용자 상호작용에 의미 있는 이름을 지정합니다. 자세한 내용은 작업을 참조하세요.

          다음 예시에서는 웹페이지를 로드할 때 grecaptcha.enterprise.execute()를 호출하는 방법을 보여줍니다.

             <script  src="https://www.google.com/recaptcha/enterprise.js?render=site_key"></script>
             <script>
                grecaptcha.enterprise.ready(function() {
                    grecaptcha.enterprise.execute('site_key', {action: 'homepage'}).then(function(token) {
                       // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
                       // reCAPTCHA Enterprise to the end user's browser.
                       // This token must be validated by creating an assessment.
                       // See https://cloud.google.com/recaptcha-enterprise/docs/create-assessment
                    });
                });
             </script>
              

      4. 단순 HTML 버튼에 reCAPTCHA Enterprise를 추가하려면 다음 안내를 따르세요.

        1. 토큰을 처리하려면 callback() 함수를 추가합니다.

              <script>
                 function onSubmit(token) {
                   document.getElementById("demo-form").submit();
                 }
              </script>
            

        2. html 버튼에 속성을 추가합니다.

              <button class="g-recaptcha"
              data-sitekey="site_key"
              data-callback='onSubmit'
              data-action='submit'>Submit</button>
            

  3. 토큰이 생성된 후 2분 내에 reCAPTCHA 토큰을 백엔드에 전송하여 평가를 만듭니다.

다음 단계