[TIL] Spring Security, OAuth2 Client 라이브러리 쓰지 않고 구글 OAuth 회원가입 구현하기

728x90

✅ 개발환경

SpringBoot 3.2.11, Gradle

JDK 17

최근 며칠간 강의를 들으면서 Spring Security와 OAuth2 Client 라이브러리를 활용해 구글, 페이스북, 네이버 OAuth 회원가입과 로그인을 구현하는 연습을 해보았다.

마침 요즘 진행중인 프로젝트가 이제 막 구현 단계에 진입해서, 여기에 구글 OAuth 로그인과 회원가입만 적용해보면 좋을 것 같아서 내가 한 번 적용해보겠다고 했다.

✅ 그러나 우리 프로젝트는 강의 속 프로젝트와는 구조적인 차이가 있었다.

강의 프로젝트에서는 로그인과 회원가입을 처리하는 백엔드 서버가 따로 있지 않고,

프론트 서버 하나를 두고 Spring Security를 사용하여 로그인과 회원가입 기능을 구현하였다.

그러나 우리 프로젝트는 프론트 서버와 백 서버가 분리되어 있었다.

프론트 서버는 nginx로 되어 있고, 사용자가 회원가입 요청을 보내면 이 요청은 게이트웨이를 거쳐서

user-service라는 백엔드 서버에서 처리되도록 설계되어 있었다.

그래도 OAuth 인증을 통해 사용자 정보를 가져오는 원리는 알고 있으니 어떻게든 구현할 수 있겠지 싶어서

맨땅에 헤딩하는 방식으로 구현에 도전해보았다!

구현 과정에 배운 점도 많은 것 같아서 일기처럼 써보려고 한다.

가독성 안 좋음 주의, 나만 알아볼 수 있음 주의...!

✅ 우선은 요청과 응답이 왔다갔다 하는 것을 직접 확인하고 싶어서
SpringSecurity와 OAuth2 Client 의존성을 추가하지 않고 쌩으로 구현을 해보았다.

아래는 완성된 코드이다.

📌 front-service (localhost:8080)

loginForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google OAuth Login</title>
</head>
<body>
<h1>Login with Google</h1>
<a id="google-signup-button" href="#">
    <button>Google 간편 회원가입하기</button>
</a>

<script>
    fetch('http://localhost:8090/oauth_state', { method: 'POST', credentials: 'include' })
        .then(response => response.text())
        .then(state => {
            const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
                `client_id=668863934871-v4070e9ugtjvb34us0irg2u1muu46ra2.apps.googleusercontent.com` +
                `&redirect_uri=http://localhost:8090/asdf` +
                `&response_type=code` +
                `&scope=openid%20profile%20email` +
                `&state=${state}`;
            document.getElementById('google-signup-button').href = googleAuthUrl;
        });
</script>
<script>
    const urlParams = new URLSearchParams(window.location.search);
    const status = urlParams.get('status');
    const message = urlParams.get('message');

    if (status === 'success') {
        alert('회원가입 완료!');
    } else if (status === 'error') {
        if(message === 'alreadyExists') {
            alert('이미 가입된 회원입니다.');
        } else {
            alert('회원가입에 실패했습니다. 다시 시도해주세요.');
        }
    }
</script>
</body>
</html>

우선 프론트엔드에서 "Google 간편 회원가입하기" 버튼을 클릭한다.
이 버튼을 누르면 구글 OAuth 서버의 사용자 인증 페이지로 GET 요청을 보내게 된다.

이 요청을 처리하기 위해 필요한 URL은 동적으로 생성된다.

URL이 동적으로 생성되는 이유는 요청 파라미터 중 state 값을 user-service에서 받아와야 하기 때문이다.
state 값은 CSRF 공격을 방지하기 위한 용도로 사용된다.

구글 OAuth 서버에서 사용자가 인증을 완료하면,

요청 파라미터 중 redirect_uri로 지정한 엔드포인트에서 응답을 받아볼 수 있다.

엔드포인트는 테스트용이기 때문에 임의로 asdf라고 설정했다.

요청을 보낼 때 response_type=code로 지정했기 때문에 응답으로 코드가 올 것이다.

📌 user-service (localhost:8090)

1. state값 동적 생성하여 front-service에 보내주는 부분

SignupController.java

	@PostMapping("/oauth_state")
    public ResponseEntity<String> generateState(HttpSession session) {
        String state = UUID.randomUUID().toString();
        session.setAttribute(KEY_OAUTH_STATE, state);
        return ResponseEntity.ok(state);
    }

우선 state값을 동적으로 생성하기 위한 엔드포인트를 구현하였다.

front-service에서 해당 엔드포인트로 요청을 보내면,

user-service에서는 uuid를 랜덤으로 생성하여 세션에 저장해두고, front-service에게 이 uuid를 보내준다.

2. 구글 OAuth 서버로부터 코드 응답받는 부분

SignupController.java

@GetMapping("/asdf")
    @CrossOrigin(origins = "http://localhost:8080", allowCredentials = "true")
    public ResponseEntity<String> handleGoogleOAuthCallback(@RequestParam MultiValueMap<String, String> params,
                                                            HttpSession session,
                                                            HttpServletResponse httpResponse) {
        log.info("Google Oauth 인증 완료, 응답 파라미터:");
        params.forEach((key, value) -> log.info(key + " = " + value));

        String originalState = (String) session.getAttribute(KEY_OAUTH_STATE);
        log.info("state from front service={}, originalState={}", params.get("state"), originalState);
        if (!params.get("state").contains(originalState)) {
            throw new IllegalStateException("Invalid state parameter");
        }
        
        ...
        
    }

그리고 사용자가 프론트 서버를 통해 OAuth 인증 서버로 이동하여 인증을 완료하고 나면,

해당 엔드포인트에서 응답을 받아볼 수 있을 것이다.

현재 user-service의 세션에 있는 state값은 front-service의 요청 파라미터의 state값과 동일해야 하기 때문에 (csrf 방지)

만약 state 값이 일치하지 않는다면 예외를 발생시켜주었다.

여기까지 진행이 완료되면, 아래와 같은 로그가 찍힌다.

3. 구글 OAuth 서버에게 액세스 토큰 요청하고 응답받는 부분

그 다음은 해당 코드 구글 OAuth 서버에 전송하여,

사용자 정보에 액세스할 수 있는 액세스 토큰을 응답받아야한다.

...
private static final String GRANT_TYPE = "authorization_code";
private static final String TOKEN_URL = "https://oauth2.googleapis.com/token";
...

@GetMapping("/asdf")
    @CrossOrigin(origins = "http://localhost:8080", allowCredentials = "true")
    public ResponseEntity<String> handleGoogleOAuthCallback(@RequestParam MultiValueMap<String, String> params,
                                                            HttpSession session,
                                                            HttpServletResponse httpResponse) {
        
        ...

        String code = params.getFirst("code");
        String clientId = {클라이언트ID};
        String clientSecret = {클라이언트 보안 비밀번호};
        String redirectUri = "http://localhost:8090/asdf";

        // Google OAuth 서버에 Access token 요청
        RestTemplate restTemplate = new RestTemplate();
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
        String body = "code=" + URLEncoder.encode(code, StandardCharsets.UTF_8) +
                "&client_id=" + URLEncoder.encode(clientId, StandardCharsets.UTF_8) +
                "&client_secret=" + URLEncoder.encode(clientSecret, StandardCharsets.UTF_8) +
                "&redirect_uri=" + URLEncoder.encode(redirectUri, StandardCharsets.UTF_8) +
                "&grant_type=" + URLEncoder.encode(GRANT_TYPE, StandardCharsets.UTF_8);

        HttpEntity<String> entity = new HttpEntity<>(body, headers);
        try {
            log.info("Google oauth 서버에 post 요청 전송 : {}", entity);
            ResponseEntity<String> response = restTemplate.postForEntity(TOKEN_URL, entity, String.class);
            log.info("응답 status code: {}", response.getStatusCode());
            log.info("응답 body: {}", response.getBody());


		...
        
}

RestTemplate을 이용해서 구글 OAuth 서버의 /token 엔드포인트로 POST요청을 보냈다.

요청을 보낼 때에는 요청 바디에 파라미터로 code, client_id, client_secret, redirect_uri, grant_type을 반드시 명시해주어야 한다.

이때 code는 위에서 응답받은 code를 그대로 넣어주면 된다.

redirect_uri는 반드시 맨 처음 front-service에서 사용자 인증을 위한 요청을 보낼 때 적어준 uri를 그대로 적어주어야 한다.

(그렇지 않으면 invalid_grant나 redirect_uri_mismatch가 발생한다. 이것 때문에 꽤 많이 고생했다..)

그리고 grant_type은 "authorization_code" 고정이다. 무조건 이렇게 적어주어야 한다고 한다.

여기까지 진행되면 아래와 같은 로그가 찍힌다.

4. 구글 사용자 정보 api에게 액세스 토큰을 보내서 사용자 정보를 가져오는 부분

...
private static final String USER_INFO_URL = "https://www.googleapis.com/oauth2/v3/userinfo";
...

@GetMapping("/asdf")
    @CrossOrigin(origins = "http://localhost:8080", allowCredentials = "true")
    public ResponseEntity<String> handleGoogleOAuthCallback(@RequestParam MultiValueMap<String, String> params,
                                                            HttpSession session,
                                                            HttpServletResponse httpResponse) {
        ...

            String accessToken = String.valueOf(objectMapper.readTree(response.getBody()).get("access_token"));

            // 사용자 정보 가져오기
            restTemplate = new RestTemplate();
            HttpHeaders userInfoHeaders = new HttpHeaders();
            userInfoHeaders.setBearerAuth(accessToken);
            HttpEntity<String> userInfoEntity = new HttpEntity<>(userInfoHeaders);

            log.info("Google user info api 에 get 요청 전송: {}", userInfoEntity);
            ResponseEntity<String> userInfoResponse = restTemplate.exchange(USER_INFO_URL, HttpMethod.GET, userInfoEntity, String.class);
            log.info("응답 Status Code: {}", userInfoResponse.getStatusCode());
            log.info("응답 Body: {}", userInfoResponse.getBody());

            JsonNode userInfo = objectMapper.readTree(userInfoResponse.getBody());
            String sub = userInfo.get("sub").asText();
            if (signupService.findUserByUserId("google_" + sub) == null) {
                String userId = signupService.signUp(userInfo);
                String message = URLEncoder.encode("회원가입 성공!");
                String redirectUrl = "http://localhost:8080/?status=success&message=" + message;
                if (!httpResponse.isCommitted()) {
                    httpResponse.sendRedirect(redirectUrl);
                }
            }
            
            ...

이렇게 하면 회원의 정보를 가져올 수 있다.

sub는 회원의 pk, id라고 생각하면 된다고 한다.

응답이 정상적으로 왔다면 위와 같은 로그가 찍힌다.

5. 회원가입 로직 수행 후 front-service에 응답 보내기

이제 이 회원을 우리 서버의 DB에 임의로 가입시키면 된다.

나는 아이디=google_{sub}, 비밀번호=asdf_{sub} 로 설정하였고,

name과 email 필드에는 구글 사용자 api로부터 받아온 사용자의 name과 email 정보를 넣어서 회원가입을 시켰다.

구글 OAuth를 통해 가입한 회원이라는 것을 표시해주기 위해서 User entity에 provider라는 필드도 두었다.

로컬 테스트용 데이터베이스에 이렇게 회원이 저장된 것을 확인할 수 있다.

가입이 완료되면 front-service로 redirect응답을 보낸다.

응답 url 파라미터의 status 값에 따라 각각 다른 알림창이 뜨면서, index 페이지로 리다이엑트 되도록 설정해주었다.

이제, OAuth2 Client 라이브러리와 Spring Security를 도입해보려고 한다!

참고로 구현 중간에 클라이언트 ID를 잘못 적어서 한시간정도 401의 늪에 빠졌었다.

인섭이오빠가 클라이언트ID가 잘못된 걸 찾아줬는데 진짜 너무 고마웠다.

✅ References

- https://developers.google.com/identity/protocols/oauth2?hl=ko

- https://developers.google.com/identity/protocols/oauth2/web-server?hl=ko#httprest

- https://cloud.google.com/apigee/docs/api-platform/reference/policies/oauth-http-status-code-reference?hl=ko

✅ 에러 해결에 도움을 준 페이지들

- https://blog.timekit.io/google-oauth-invalid-grant-nightmare-and-how-to-fix-it-9f4efaf1da35

- https://groups.google.com/g/adwords-api/c/jBeyFbcim60?pli=1

728x90

'개인 공부 > WEB-Spring,SpringBoot' 카테고리의 다른 글

[JPA] ddl-auto 옵션 (0)	2024.11.19
쌩구현했던 구글 OAuth 인증 프로젝트에 Spring Security 적용하기 (0)	2024.11.18
스프링 시큐리티 & OAuth로 구글 간편 로그인, 회원가입 시키기 (2)	2024.11.12
[TIL] SpringSecurity 기본 설정 공부하며 알게 된 점 (1)	2024.11.10
Spring Framework와 객체지향 (0)	2024.08.13

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

📝

[TIL] Spring Security, OAuth2 Client 라이브러리 쓰지 않고 구글 OAuth 회원가입 구현하기

✅ 개발환경

✅ 그러나 우리 프로젝트는 강의 속 프로젝트와는 구조적인 차이가 있었다.

✅ 우선은 요청과 응답이 왔다갔다 하는 것을 직접 확인하고 싶어서
SpringSecurity와 OAuth2 Client 의존성을 추가하지 않고 쌩으로 구현을 해보았다.

📌 front-service (localhost:8080)

📌 user-service (localhost:8090)

1. state값 동적 생성하여 front-service에 보내주는 부분

2. 구글 OAuth 서버로부터 코드 응답받는 부분

3. 구글 OAuth 서버에게 액세스 토큰 요청하고 응답받는 부분

4. 구글 사용자 정보 api에게 액세스 토큰을 보내서 사용자 정보를 가져오는 부분

5. 회원가입 로직 수행 후 front-service에 응답 보내기

✅ References

✅ 에러 해결에 도움을 준 페이지들

'개인 공부 > WEB-Spring,SpringBoot' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[TIL] Spring Security, OAuth2 Client 라이브러리 쓰지 않고 구글 OAuth 회원가입 구현하기

✅ 개발환경

✅ 그러나 우리 프로젝트는 강의 속 프로젝트와는 구조적인 차이가 있었다.

✅ 우선은 요청과 응답이 왔다갔다 하는 것을 직접 확인하고 싶어서SpringSecurity와 OAuth2 Client 의존성을 추가하지 않고 쌩으로 구현을 해보았다.

📌 front-service (localhost:8080)

📌 user-service (localhost:8090)

1. state값 동적 생성하여 front-service에 보내주는 부분

2. 구글 OAuth 서버로부터 코드 응답받는 부분

3. 구글 OAuth 서버에게 액세스 토큰 요청하고 응답받는 부분

4. 구글 사용자 정보 api에게 액세스 토큰을 보내서 사용자 정보를 가져오는 부분

5. 회원가입 로직 수행 후 front-service에 응답 보내기

✅ References

✅ 에러 해결에 도움을 준 페이지들

'개인 공부 > WEB-Spring,SpringBoot' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

✅ 우선은 요청과 응답이 왔다갔다 하는 것을 직접 확인하고 싶어서
SpringSecurity와 OAuth2 Client 의존성을 추가하지 않고 쌩으로 구현을 해보았다.