ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 자동등록방지 구글 reCAPTCHA(리캡챠) 설치
      코딩/php 2018. 12. 11. 16:46

      로봇에 의한 스팸글 등록 및 자동회원 가입을 막기 위한 구글 reCAPTCHA 를 설치하는 방법에 대해서 알아보겠습니다.

       

      구글 reCAPTCHA는 글쓰기 또는 회원 등록 페이지에서 사용자의 동작을 분석하여 로봇으로 판단이 되면 이미지중에 특정 부분을 선택하는 창이 띄워 사람임을 확인하도록 합니다. 리캡챠를 사용하기 위해서선 구글에 가입을 하여 사이트키와 프라이빗키를 발급받은 후, 리캡챠를 사용할 도메인을 등록하여야 합니다.

       

      현재 제공되는 방식을 사용자가 로봇이 아님을 나타내기 위해서 직접 클릭해야 하는 reCAPTCHA v2 와 클릭하지 않아도 자동으로 판단하는 Invisible reCAPTCHA가 있습니다. 각각의 사용하는 방법에 대해서 알아 보겠습니다.

       


      구글 계정이 있다고 가정을 하고 다음 사이트로 들어가 키를 발급 받습니다.

       

      https://developers.google.com/recaptcha/


       

      1. 키의 발급


      위 사이트에서 Get Started 로 들어가서 sign up for an API key pair 을 클릭하여 들어갑니다.

       

      Register a new site

       

       

       

      - Label 에 나중에 구분 가능하도록 명칭을 적습니다.
      - reCAPTCHA V2 와 Invisible reCAPTCHA 중에 원하는 타입을 선택합니다.(어떤 걸 선택하더라도 나중에 등록 폼을 코딩할 때 타입을 바꿀  수 있습니다.)
      - 도메인 리스트에 사용할 도메인을 입력합니다. 한줄에 도메인 하나씩해서 여러개를 입력할 수 있습니다. (테스트용으로 localhost를 사용하려면 그것도 적어 줍니다.)

      - 등록을 하면  Site key와 Secret key 가 발급이 됩니다. Site key는 등록폼에서 즉, 클라이언트 측에서 사용이 되고, Secret key 는 서버측에서 submit 된 값을 검증하기 위해서 사용됩니다.



      2. reCAPTCHA V2 타입 등록폼 작성 하기

       

      사람임을 확인하기 위해서 클릭을 해야 하는 형태입니다.

       

      reCAPTCHA V2 등록폼


        

      <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>reCAPTCHA 테스트</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
/* 서브밋 전에 리캡챠 체크 여부 를 확인합니다. */
function FormSubmit() {
	if (grecaptcha.getResponse() == ""){
	    alert("리캡챠를 체크해야 합니다.");
	    return false;
	} else {
	    return true;
	}
}
</script>
</head>
<body>
<br/>
<form name="testForm" method="post" action="./process.php" onsubmit="return FormSubmit();">
이름 : <input type="text" name="name" /><br />
전화번호 : <input type="text" name="tel" /><br />
<input type="submit" name="submit" value="제출"><br /><br/>
<div class="g-recaptcha" data-sitekey="발급받은 Site key"></div>
</form>
</body>
</html>

       

       

      3. Invisible reCAPTCHA 타입 등록폼 작성 하기

       

      Invisible reCAPTCHA 타입 등록폼


        

      <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>reCAPTCHA 테스트</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
function FormSubmit() {
	document.testForm.submit();
}
</script>
</head>
<body>
<br/>
<form name="testForm" method="post" action="./process.php">
이름 : <input type="text" name="name" /><br />
전화번호 : <input type="text" name="tel" /><br />
<button class="g-recaptcha" data-sitekey="발급받은 Site key" data-callback='FormSubmit'>제출</button>
</form>
</body>
</html>

        

      이 타입은 사용자가 체크를 할 필요가 없이 사용자의 행동을 분석하여 자동으로 로봇인지 판단하여 폼 제출시 이미지 선택창이 뜹니다.


       

      4. PHP 서버측 검증 코드

       

      <?php
if(isset($_POST['g-recaptcha-response'])){
	$captcha=$_POST['g-recaptcha-response'];
}

if(!$captcha) {
	echo '등록폼에 리캡챠를 확인하세요.';
}

$secretKey = "발급받은 Secret key";
$ip = $_SERVER['REMOTE_ADDR'];

$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);

if(intval($responseKeys["success"]) !== 1) {
	echo '검증을 통과하지 못했습니다.';
} else {
	echo '검증을 통과 했습니다.';
}
?>

       

      5. Deprected된 reCAPTCHA V1의 이미지

       

      다음 이미지는 reCAPTCHA V1의 이미지 입니다. reCAPTCHA V1 은 deprecated 되어서 더이상 사용되지 않습니다. 이걸 사용하고 있다면 업그레이드 해야 합니다.

       

      Deprected된 reCAPTCHA V1의 이미지


        


      출처: https://offbyone.tistory.com/59 [쉬고 싶은 개발자]


      위 출처내용에서 제 스타일대로 내용을 첨가 했습니다.

      -확실한 방법을 몰라서 마무리를 살짝 비틀어봤습니다.-



      ※저는 reCAPTCHA v2 타입을 사용하였으며, 이미 submit은 script 함수안에 document.form.submit();<- 이걸로 

      쓰여  있어서 onsubmit="return FormSubmit();"  를 사용하지 못하였습니다.

      그래서 아래 방법을 이용하여 자동등록방지를 완성하였습니다.



      _skin 폴더에서 reCAPTCHA를 설치한 게시글 작성페이지에서 쓰여진 form 구문안에 

      <input type='hidden' name='check' value='<?=$check?>'> 를 넣어줍니다.


      그 후  

      var check = FormSubmit();
      document.boardform.check.value = check;
      document.boardform.submit();


      위 내용처럼 삽입해주면 됩니다. 그럼 자동등록방지를 하였으면 check 변수에 true로 하지안았으면 false로 텍스트 형식으로 저장이 됩니다.


      이제 skin을 만졌으니 _exec 폴더의 작성페이지가서 

      <?php ?>

      요기 안에 

      if($check == 'false'){
	echo "<script>
          /*alert('자동등록방지에 체크해주세요.');history.back();*/
      exit;
      </script> ";
      	exit;
}

      를 추가해줍니다.


      그러면 check 변수가 false 일 때 작성한 내용이 저장되지 않습니다.



      Forest-coding

      '코딩 > php' 카테고리의 다른 글

      upload progress bar / percent  (0) 2018.11.30
      문자열이 포함되는지 검사하는 strpos  (0) 2018.11.27

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바