자라선

[Google][ReCaptcha][v3] 인증 프로세스 본문

Develop/API

[Google][ReCaptcha][v3] 인증 프로세스

자라선 2021. 7. 28. 13:59

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

 

reCAPTCHA v3  |  Google Developers

reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site. Register reCAPTCHA v3 keys here. This page explains how to enable and custom

developers.google.com

 

로봇인지 아닌지 여부를 알아보는 리캡챠 API 사용법

버전이 v1, v2, v3로 3가지가 있는데

 

v1은 그림을 선택해서 로봇여부를 확인하는 것이고

v2는 체크박스를 클릭하여 로봇여부를 확인하는것이며

v3는 클라이언트 유저가 별도의 과정이 필요없이 움직임을 통해 로봇여부를 자체적으로 검증하여 확인하는것이다.

 

당연히 v3가 최신이면서 사용자나 개발자도 편하기 떄문에 최근에는 v3만 사용하는 추세인듯하다.

 

1. Google Recaptcha 새 사이트 생성

https://www.google.com/recaptcha/admin/create

 

로그인 - Google 계정

하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인

accounts.google.com

생성란에 도메인란은 개발시 또는 운영서버의 도메인을 작성한다.

기본적으로 개발시 localhost 자체 도메인을 사용하니깐 박아두는것이 편하다.

출력된 키는 따로 저장해도 좋지만 어차피 관리자 콘솔에서 다시 조회가 가능하다.

 

 

2. 프로젝트 및 소스 작성

사용한 프레임워크는 스프링부트이고 의존성 라이브러리들은 아래와 같다.

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

 

resources/templates/index.html

 

<html>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<head>
    <title>Title</title>

    <script src="https://www.google.com/recaptcha/api.js?render=<YOUR_SITE_KEY>"></script>
    <script>
        function reCapt() {
            grecaptcha.ready(function() {
                grecaptcha.execute('<YOUR_SITE_KEY>', {action: 'submit'}).then(function(token) {
                    $('#token').val(token);
                });
            });
        }
    </script>
</head>
<body>

<form action="/validation" method="post">
    <button type="button" class="g-recaptcha" onclick="reCapt()">토큰받아옴</button>
    <br>
    <textarea type="text" id="token" name="token" value=""></textarea>
    <br>
    <button type="submit">제출</button>
</form>

</div>

</body>
</html>

 

Controller

package com.example.recaptcha.test;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.web.client.RestTemplateBuilder;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class testController {

    public static final String SECRET_KEY = "<YOUR_SECRET_KEY>";
    public static final String SITE_VERIFY_URL = "https://www.google.com/recaptcha/api/siteverify";

    @Autowired
    RestTemplateBuilder builder;

    @RequestMapping(value = "/validation", method = RequestMethod.POST)
    public @ResponseBody String ajax(String token){
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);

        MultiValueMap<String, String> map= new LinkedMultiValueMap<String, String>();
        map.add("secret", SECRET_KEY);
        map.add("response", token);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<MultiValueMap<String, String>>(map, headers);

        ResponseEntity<String> response = builder.build().postForEntity( SITE_VERIFY_URL, request , String.class );

        return response.getBody();
    }

}

 

 

3. 결과 화면

부트를 실행하고 index.html 로 접근하면 토큰 버튼, textaraa, 제출 버튼이 있는데

우측 하단에 reCAPTCHA로 보호됨 이라고 나와야 정상작동된다는걸 알수있다.

 

그리고 토큰을 받아보면 난잡한 코드가 생기는데

이것을 제출하게 되면 json 타입으로 성공되었다는 결과를 볼수 있다.

 

 

4. 프로세스 간략 설명

 

5번 TOKEN으로 요청을 TOKEN과 SECRET_KEY로 같이 요청 으로 정정

이미지에서는 로그인이라고 했지만 예시 프로젝트의 제출버튼이랑 똑같다.

 

결국에는 SITE_KEY로 구글에게 TOKEN를 발급받고 

이 TOKEN과 SECRET_KEY를 같이 다시 구글에게 인증 요청을 보내야지 최종적으로 RECAPTCHA가 적용이 된것이다.

 

본문 예시에서는 토큰을 버튼을 눌러 발급받도록 했지만 

실제 적용시에는 페이지 로드시 토큰을 발급받도록 하면 될듯하다.

저작자표시

'Develop > API' 카테고리의 다른 글

[NAVER][NAVER LOGIN] 네이버 로그인 (네아로) for Java  (0) 2021.12.07
[KAKAO][Spring] 카카오톡 REST 로그인 및 로그아웃 구현  (3) 2020.07.31
[IAMPORT][nodejs] 아임포트(IAMPORT) 간단 사용법  (0) 2020.07.31
[KAKAO][kakao i Open Builder] Chatbot  (0) 2020.07.31
[KAKAO][kakao i developers] OBT신청  (0) 2020.07.31
'Develop/API' Related Articles more
Comments