google reCaptcha(리캡챠) v2 적용 방법 (스크립트 코드 예제 첨부)

• google reCaptcha 공식문서 : https://cloud.google.com/recaptcha/docs/reference/rest?hl=ko
• v2, v3 두가지 버전 중 v2 관련된 설명 ( v2 : 로봇이 아닙니다 체크 / v3 : 알아서 인지)

reCAPTCHA v3

reCAPTCHA v3를 사용하면 사용자 상호작용 없이 정상적인 상호작용인지 확인할 수 있습니다. 점수를 반환하는 순수 JavaScript API로, 사이트의 맥락에서 조치를 취할 수 있도록 합니다. 예를 들어 추가 인증 요소를 요구하거나 게시물을 검토하거나 콘텐츠를 스크래핑하는 봇을 제한합니다.

reCAPTCHA v2 ('로봇이 아닙니다' 체크박스)

'로봇이 아닙니다' 체크박스를 선택하면 사용자가 로봇이 아님을 나타내는 체크박스를 클릭해야 합니다. 이렇게 하면 보안문자를 사용하지 않고 즉시 사용자를 전달하거나 사람이 맞는지 확인하도록 요청합니다. 이 옵션은 통합하는 가장 간단한 옵션이며, 체크박스를 렌더링하는 데 두 줄의 HTML만 있으면 됩니다.

• 개발 방식 :
  • 여러 방식이 있으나 비동기 스크립트 방식으로 로드 할 에정 → analytics 붙이는 방식과 유사
    • https://developers.google.com/recaptcha/docs/loading?hl=ko
    • 응답 확인 관련 문서 : https://developers.google.com/recaptcha/docs/display?hl=ko

• 개발에 필요한 준비물 :
  • recaptcha 개발에 필요한 사이트키 
    • 사이트 등록 링크 : https://www.google.com/recaptcha/admin/create?hl=ko

• 정보 등록 방법 :
  • 사이트 등록 링크 접속후 아래의 정보 입력 후 다음 단계로
    • 라벨 :(ex : https://example.com )
    • reCAPTCHA유형 : V2, 로봇이 아닙니다' 체크
    • 도메인 : 적용할 도메인(example.com)
    • plaform이름 : (ex: example)

예제

• 개발방향 : reCaptcha 누를 경우 → 문의하기 버튼 활성화 되도록 처리 할 예정

1. 헤더에 script 코드 추가

  <script src="https://www.google.com/recaptcha/api.js" async defer></script>

1. body에 로봇이… 태그 추가

        <!-- 사이트 키 값을 data-sitekey에 넣습니다 -->
            <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3">
                <div class="g-recaptcha"
                     data-sitekey="사이트코드"
                     data-callback="인증 성공했을때 호출할 함수">
                </div>
            </div>

1. 하단 스크립트 추가

<script src="https://www.google.com/recaptcha/api.js?render=사이트코드"></script>

1. 참고- 다른 국가의 언어로 변경하고 싶을 경우 상단스크립트와 하단 스크립트에 “hl=en" 붙이기

            <!-- 헤더나 body 태그 끝나기 전에 추가 -->
            <script src="https://www.google.com/recaptcha/api.js?hl=en" async defer></script>

            ...

              <script src="https://www.google.com/recaptcha/api.js?render=&hl=en"></script>

풀코드

            <!-- 헤더나 body 태그 끝나기 전에 추가 -->
            <script src="https://www.google.com/recaptcha/api.js?hl=en" async defer></script>

             <!-- 사이트 키 값을 data-sitekey에 넣습니다 -->
            <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3">
                <div class="g-recaptcha"
                     data-sitekey="사이트코드"
                     data-callback="onRecaptchaSuccess">
                </div>
            </div>

            <button type="submit" id="submitBtn"  disabled="true" readonly="readonly" class="btn btn-lg btn-wide rounded-pill btn-block btn-dark text-base contact-us-form__btn-submit js__btn-submit">
                <?php echo lang('Common.문의하기'); ?>
                <span class="loading-card"></span>
            </button>
            <script src="https://www.google.com/recaptcha/api.js?render=사이트코드&hl=en"></script>