일반 HTML에 Google reCAPTCHA v2 추가

뭐야?

ACAPTCHA 는 봇과 사람을 구분하는 데 도움이 되는 테스트입니다.

reCAPTCHA은 Google의 CAPTCHA 구현입니다. 타사 라이브러리 없이 통합하기가 매우 쉽습니다.

목적은 무엇입니까?

reCAPTCHA는 합법적인 사용자가 사이트에 액세스할 수 있도록 허용하면서 악의적인 소프트웨어/봇이 웹사이트에서 악의적인 활동에 관여하지 못하도록 합니다.

통합하는 방법?

우리는 v2 버전을 사용할 것입니다.

1. 사이트 키 생성
Google reCAPTCHA Admin Page에서 사이트 키를 생성할 수 있습니다.

또한 사이트를 배포할 사이트 도메인을 추가해야 합니다. 테스트를 위해 localhost를 추가하고 루프백 주소(127.0.0.1)를 사용하거나 reCAPTCHA automated tests guide의 키를 사용할 수 있습니다. 그 열쇠 중 하나는

6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

이 예에서 사용할 것입니다.

2. 마크업에 위젯 추가
HTML에 추가해야 할 유일한 것은

<div
  class="g-recaptcha"
  data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
>
</div>

사용 사례에 따라 양식에 추가하거나 양식 없이 사용할 수 있습니다. Source

또한 head 태그에 cdn 링크를 추가해야 합니다.

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

위젯에서 콜백을 듣고 자체 핸들러를 등록할 수 있습니다.

<div
  class="g-recaptcha"
  data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
  data-callback="onRecaptchaSuccess"
  data-expired-callback="onRecaptchaResponseExpiry"
  data-error-callback="onRecaptchaError"
>
</div>

이러한 콜백을 사용하여 양식 또는 원하는 작업을 검증하거나 무효화할 수 있습니다.

reCAPTCHA가 성공적으로 검증되면 성공적으로 제출하는 간단한 양식을 만들었습니다. here . 기본적인 스타일링도 가미해 깔끔한 느낌을 주었습니다.

이것이 귀하의 프로젝트에 도움이 되기를 바랍니다. 읽어주셔서 감사합니다 😉.