HTML 에 google reCAPTCHA 넣기 - 완료 후 함수 호출

www.google.com/recaptcha/about/

상단 Admin Console 클릭 > 원하는 구글 계정으로 로긴

우측상단에서 + 를 클릭하면 아래와 같은 화면이 나오는데 값을 입력하고 체출 클릭

*주의 : localhost 도메인을 지원하지 않으므로 로컬 테스트의 경우는 127.0.0.1 을 도메인으로 등록

dev 용과 production 용 사이트를 별도로 등록하기를 google 에서는 권유

 

입력하면 다음과 같이 사용할수있는 키를 제공 - 이후에 설정 페이지에서 확인가능

키를 이용해서 HTML 에 입력하면 됨.

 

HTML 에 넣어보기 - 로봇이아닙니다를 클릭하고 완료되면 onSubmit() 이 호출됨

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
function onSubmit() {
	console.log('-- recaptcha 완료');
}
</script>



<div class="captcha-submit">
  <div id="recaptcha" class="g-recaptcha" data-sitekey="{{여기다 클라이언트용 키 입력}}" data-callback="onSubmit"></div>
    <div class="submitbutton">
    <input type="hidden" name="mv_powerbook">
    <input value="Send" type="submit" id="submit" class="form-submit" disabled />
  </div>
</div>

 

서버측 사용방법은 다음기회에!