recaptcha v3 사용법

 

오늘은 구글 리캡챠 버전 3을 적용해본다.

버전 3은 처음이라 도키도키.

 

구글 리캡챠 이미지

 

 

1. 구글 리캡챠 사이트에 들어간다.

www.google.com/recaptcha/about/

 

구글 리캡챠 사이트  메인화면

 

들어가면 이런 화면이 뜨는데

빨간색 박스를 누른다.

물론 구글 로그인이 돼 있는 상태에서 해야 한다.

 

구글 리캡챠 사이트 등록1

 

이제 리캡챠를 등록할 사이트를

등록하는 과정이다.

1번 사이트를 대신할 별명을 넣는다.

2번은 리캡챠 버전을 선택한다.

물론 recaptcha v3로 한다.

3번은 리캡챠를 등록할 도메인을 적어 넣는다.

https://www.naver.com/ 복사를 해서 이렇게 넣는 게 아니라.

www.naver.com으로 넣어야 한다. 

4번은 약관 동의 체크

5번은 소유자한테 알 림메 일을 발송하는 체크박스이다.

 

구글 리캡챠 사이트 등록2

 

제출을 하면 이런 창이 뜨는데

1. 사이트 키와

2 비밀키를 복사해서

잘 저장해 논다.

빨간색 박스 부분을 누르면 복사가 된다.

여기까지가 구글 리캡챠 사이트에서 할 일이 끝난다.

이제 내 사이트에서 적용으로 하러 간다.

 

2.  내 사이트에 구글 리캡챠 추가

 

구글 캡챠 적용할 페이지부분

 

일단 이봄에서 구글 리캡챠를 적용할 것인데

빨간색 박스를 눌렀을 때 구글 리캡챠를 체크해서

사람인지 아닌지를 판별할 것이다.

 

<input type="hidden" id="g-recaptcha" name="g-recaptcha">

<script src='https://www.google.com/recaptcha/api.js?render=<Site key>'></script>

<script type="text/javascript">
  grecaptcha.ready(function() {
   grecaptcha.execute('<Site key>', {action: 'homepage'}).then(function(token) {
    document.getElementById('g-recaptcha').value = token;
   });
  });
</script>

 

여기서 <Site key>가 위에 코드에는 나와있다.

여기다가 아까 받은 사이트 키를 복사하면 된다.

 

<form action="ok.php" method="post">
    <input type="hidden" id="g-recaptcha" name="g-recaptcha">
    <button type="submit"></button>
</form>

<script src="https://www.google.com/recaptcha/api.js?render=6LcKdy_0hAAAAAJR6bdjxdFxfbwnbQVijzA-rnu2e"></script>

<script type="text/javascript">
    grecaptcha.ready(function() {
        grecaptcha.execute('6LcKdy_0hAAAAAJR6bdjxdFxfbwnbQVijzA-rnu2e', {
            action: 'submit'
        }).then(function(token) {
            document.getElementById('g-recaptcha').value = token;
        });
    });
</script>

 

아까 받은 사이트 키를 잘 적용하면 위와 같은

모습이다.

 

위에 컨택 어스 부분이 form안에 있다고

가정하고 위와 같이 코딩을 하면

submit을 눌렀을 때

ok.php 페이지로 이동하는데

ok.php에 검증 코드가 있다.

 

구글 캡챠 마크1
구글 캡챠 마크2

 

일단 검증 코드로 넘어가기 전에 잘 나오면 

위와 같이

웹사이트에 구글 리캡챠 마크가 출력되어야 한다.

마우스 후버를 했을 때 reCAPTCHA로 보호됨이

떠야 정상적으로 코드가 들어간 것이다.

 

3.  폼에서 사람인지 로봇인지 판별

<?php
session_start();
$captcha = $_POST['g-recaptcha'];
$secretKey = '6LftH_0hAAAAAOfDsOAVf7OLf7RFXxMZJJi0fpAo';
$ip = $_SERVER['REMOTE_ADDR'];

$data = array(
  'secret' => $secretKey,
  'response' => $captcha,
  'remoteip' => $ip
);

$url = "https://www.google.com/recaptcha/api/siteverify";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($ch);
curl_close($ch);

$responseKeys = json_decode($response, true);

if ($responseKeys["success"]) {
  echo "[성공] 통과";
  echo $response;
} else {
  echo "통과 실패";
  echo $response;
}


?>

 

사람이면 통과를 

아니면 통과 실패를 출력한다.

 

php recaptcha v3 사용법에 대해서

최대한 쉽게 풀라고 노력하였습니다.

 

저처럼 삽질하는 분이 없길 바랍니다.

 

'웹 개발 > 자주쓰는 코드' 카테고리의 다른 글

jquery modal popup custom1  (10) 2022.11.03
tab menu custom 심플 반응형  (1) 2022.11.03
jquery scroll event 순수제작  (2) 2022.11.03
SSL 인증서 총정리  (3) 2022.10.26

+ Recent posts