Spring에서 구글 소셜 로그인 구현하기 (2) - FeignClient(OpenFeign)을 이용해 액세스 토큰 받아오기

1. 들어가기에 앞서

글을 시작하기 전에, 이번 포스팅에서 다룰 소셜 로그인의 인증 플로우에 대해 간략하게 짚어보자.

1. 사용자를 구글 로그인 창으로 넘겨준다.
2. 사용자가 구글 로그인에 성공하면, 구글 서버는 우리에게 승인 코드(Authorization code)를 넘겨준다.
3. (2)의 승인 코드를 구글 서버에게 넘기고, 구글 액세스 토큰을 받아온다.
4. 구글 액세스 토큰을 이용해 사용자 대신 구글 사용자 정보를 받아온다.
5. 사용자 정보의 유저 식별자를 통해 가입 여부를 확인한다. 새 회원이면 DB에 사용자 정보를 등록한 뒤, 로그인을 진행한다.

 

비유를 들어보자면... 이런 느낌이다.

• 사용자 정보: 금고에 보관 중
• 액세스 토큰: 금고의 열쇠에 해당. 서랍에 보관 중
• 승인 코드: 서랍의 자물쇠 비밀번호

액세스 토큰을 대충 보관하면 개나소나 사용자 정보에 접근 가능하다. 그래서 구글은 액세스 토큰을 서랍에 넣고 자물쇠를 채운 뒤, 로그인에 성공한 사람에게만 서랍 비밀번호를 알려준다. 사용자가 우리에게 서랍 비밀번호(승인 코드)를 알려주면, 우리는 사용자 대신 사용자 정보를 얻어오는 거다.

 

---

2. 어디까지 프론트에게 맡길까?

사실 프론트에서도 바로 액세스 토큰을 받아올 수 있다. 이렇게 되면 백에서는 구글 서버에 요청을 한번만 보내도 된다는 장점이 있다.

 

하지만 액세스 토큰을 프론트에서 직접 관리하는 것은 위험할 수 있다. 액세스 토큰이 유출되면 누구나 사용자 정보에 접근 가능하기 때문이다. (일반적으로 액세스 토큰의 유효기간은 30분~1시간이다.) 반면 인증 코드는 일회성이고 유효기간이 액세스 토큰보다 더 짧기 때문에, 유출 시 위험도가 더 낮다. 때문에 우리 팀에서는 2번까지 프론트에서 진행하고, 3번부터는 백에서 진행하기로 했다. 승인 코드는 POST를 이용해 RequestBody에 담아 보내주기로!

 

 

 이제 백에서 구현해야 할 부분이 정해졌다.

• 프론트로부터 받아온 인증 코드로, 구글에 액세스 토큰 요청
• 구글 액세스 토큰으로, 구글에 사용자 정보 요청
• 얻어온 사용자 정보를 통해, 미가입 회원이면 회원정보를 DB에 저장

마지막 10번은 소셜 로그인이기 보다는, 일반 로그인에 해당하므로 참고로만 보자.

 

---

3. properties 또는 yml 파일에 설정값 추가하기

먼저 application.properties 파일 또는 application.yml 파일에 아래와 같은 값을 설정해준다. 각종 URI 엔드포인트는 구글 공식문서에서 확인할 수 있다.

• token-base-uri: 해당 URI로 구글 액세스 토큰을 요청한다.
• member-info-base-uri: 해당 URI로 구글 사용자 정보를 요청한다.
• grant_type: 인증 코드로 액세스 토큰을 받아올 거니까 authorization_code로 설정해주었다.

// application.yml
oauth2:
  google:
    client-id: {클라이언트 ID}
    client-secret: {클라이언트 시크릿}
    redirect-uri: {리다이렉트 URI}
    token-base-uri: https://oauth2.googleapis.com
    member-info-base-uri: https://www.googleapis.com
    grant-type: authorization_code

 

 

 

클라이언트 ID와 시크릿, 리다이렉트 URI는 구글 클라우드 콘솔에서 확인할 수 있다. 반드시 콘솔에서 확인한 값과 동일한 값을 넣어주어야 한다.

 

 

지난 포스팅에서 박스친 부분을 유의깊게 보라고 한 것도 여기에 입력해야 하기 때문이다.

이걸 굳이 yml 파일에 추가하는 이유는 한 곳에서 관리하려는 이유도 있지만, client secret은 노출되면 안되는 값이기 때문이다. 당연히 깃에 올려도 안된다. 그래서 코드에 직접적으로 명시하지 않고, @Value 어노테이션을 이용해 yml 파일에서 값을 받아올 것이다.

 

---

4. OpenFeign을 이용해 구글에 액세스 토큰 요청하기

 

이 부분이 정말 어려웠다. 맨날 클라이언트 요청에 따라 응답만 던져줬는데, 이젠 내가 요청을 보내야 한다니🥹

서버에서 다른 서버로 HTTP 요청을 보낼 때 이용할 수 있는 기술로는 RestTemplate, WebClient, OpenFeign 등이 있다. 여기서는 OpenFeign을 이용해 진행해보겠다. OpenFeign은 JPA처럼 인터페이스만 구현하면 요청을 보낼 수 있어서 매우 쉽고 간편하다. 영어실력이 되는 분이라면 OpenFeign 공식 문서를 참고하는 걸 추천!

 

 

(1) 의존성 및 어노테이션 추가

implementation "org.springframework.cloud:spring-cloud-dependencies:2023.0.0"
implementation "org.springframework.cloud:spring-cloud-starter-openfeign:4.1.0"

 

OpenFeign을 이용하기 위해서는 build.gradle 파일에 의존성을 추가해주어야 한다. 스프링 클라우드 버전과 OpenFeign 버전을 꼭 확인하고 적어주자. 나는 스프링부트 3.2.0을 사용중이라 그에 맞춰 적었다.

 

@EnableFeignClients
@SpringBootApplication
public class SiltaraeBeApplication {

    public static void main(String[] args) {
        SpringApplication.run(SiltaraeBeApplication.class, args);
    }

}

 

그리고 메인함수가 있는 Application 클래스에 @EnableFeignClients 어노테이션을 추가해준다. 이제 OpenFeign을 사용할 준비가 끝났다.

 

 

(2) 구글 API 양식에 맞는 DTO 생성하기

요청을 보내기 전에, 구글에게 보낼 요청 데이터와 응답 데이터를 담을 DTO 객체를 생성해보자.

 

POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
client_id=your_client_id&
client_secret=your_client_secret&
redirect_uri=https%3A//oauth2.example.com/code&
grant_type=authorization_code

 

먼저 구글 공식문서에 따르면, 액세스 토큰을 요청할 때는 위와 같은 양식으로 HTTP Request를 보내야 한다. RequestBody에는 인증 코드, 클라이언트 ID, 클라이언트 시크릿, 리다이렉트 URI, 승인 타입이 담겨야 한다. 요청을 보낼 때 사용할 RequestDTO를 하나 생성해보자.

 

@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class OAuthAccessTokenRequest {

    private String clientId;

    private String clientSecret;

    private String redirectUri;

    private String grantType;

    private String code;

    @Builder
    public OAuthAccessTokenRequest(String clientId, String clientSecret, String redirectUri, String grantType, String code) {
        this.clientId = clientId;
        this.clientSecret = clientSecret;
        this.redirectUri = redirectUri;
        this.grantType = grantType;
        this.code = code;
    }
}

 

 

 

 

{
  "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
  "expires_in": 3920,
  "token_type": "Bearer",
  "scope": "https://www.googleapis.com/auth/drive.metadata.readonly",
  "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
}

 

그러면 구글 서버는 위와 같은 양식으로 응답을 보내준다. 액세스 토큰 외에도 액세스 토큰의 만료시간, 토큰 타입, 리프레시 토큰, 해당 액세스 토큰으로 어느 scope에 접근 가능한지 등이 적혀있다. 이 JSON 데이터를 매핑할 ResponseDTO도 하나 만들어보자.

 

@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class OAuthAccessTokenResponse {

    @JsonProperty("access_token")
    private String accessToken;

    @JsonProperty("expires_in")
    private Integer expiresIn;

    @JsonProperty("scope")
    private String scope;

    @JsonProperty("id_token")
    private String idToken;

}

 

@JsonProperty 어노테이션을 이용해, JSON 데이터가 자바 객체에 매핑될 때 각 key별로 매핑될 필드를 명시해주었다.

 

(3) GoogleAuthClient 생성하기

이제 FeignClient 인터페이스를 선언할 차례이다. OpenFeign은 JPA처럼 인터페이스를 선언하는 것만으로 다른 서버에 요청을 보낼 수 있다. 구글의 API 양식에 맞춰 FeignClient를 만들어보자.

 

package weavers.siltarae.login.domain;

import feign.Headers;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import weavers.siltarae.login.dto.request.OAuthAccessTokenRequest;
import weavers.siltarae.login.dto.response.OAuthAccessTokenResponse;

@FeignClient(name = "googleAuthClient", url = "${oauth2.google.token-base-uri}")
public interface GoogleAuthClient {

    @PostMapping("/token")
    @Headers("Content-Type: application/x-www-form-urlencoded")
    ResponseEntity<OAuthAccessTokenResponse> getAccessToken(@RequestBody OAuthAccessTokenRequest request);
}

 

• @FeignClient: Feign 클라이언트를 정의할 때 사용한다. name 속성을 통해 클라이언트의 이름을 정의하고, url을 통해 클라이언트가 요청을 보낼 서버의 기본 URL을 정의한다. 
• @PostMapping("/token"): /token 경로로 POST 요청을 보낼 것임을 명시한다.
• @Headers: HTTP Request Header를 지정할 수 있다.
• @RequestBody: 뒤에 오는 파라미터를 HTTP Request Body에 넣어 보낸다.

여기서는 OAuthAccessTokenRequest에 담긴 값들을 Request Body에 넣어 보내고, Response Body에 담긴 응답 데이터를 OAuthAccessTokenResponse 객체에 매핑했다.

 

스프링 클라우드는 FeignClientConfiguration을 이용해, 여기 설정된 이름대로 ApplicationContext에 클라이언트를 등록해준다. 따라서 따로 스프링 빈으로 등록하지 않아도 자동 주입이 가능하다.

 

 

(4) GoogleProvider 생성하기

 

package weavers.siltarae.login.domain;

import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Component;
import weavers.siltarae.global.exception.AuthException;
import weavers.siltarae.global.exception.ExceptionCode;
import weavers.siltarae.login.dto.request.OAuthAccessTokenRequest;
import weavers.siltarae.login.dto.response.OAuthAccessTokenResponse;
import weavers.siltarae.member.domain.SocialType;

@Component
@RequiredArgsConstructor
public class GoogleProvider {

    private final GoogleAuthClient googleAuthClient;

    private final String SOCIAL_TYPE = "GOOGLE";

    @Value("${oauth2.google.client-id}")
    private String CLIENT_ID;

    @Value("${oauth2.google.client-secret}")
    private String CLIENT_SECRET;

    @Value("${oauth2.google.redirect-uri}")
    private String REDIRECT_URI;

    @Value("${oauth2.google.grant-type}")
    private String GRANT_TYPE;

    @Value("${oauth2.google.member-info-base-uri}")
    private String MEMBER_INFO_BASE_URI;

    public String requestAccessToken(final String code) {

        OAuthAccessTokenRequest request = OAuthAccessTokenRequest.builder()
                .clientId(CLIENT_ID)
                .clientSecret(CLIENT_SECRET)
                .redirectUri(REDIRECT_URI)
                .grantType(GRANT_TYPE)
                .code(code).build();

        ResponseEntity<OAuthAccessTokenResponse> response = googleAuthClient.getAccessToken(request);

	// 만약 요청이 정상 수행되지 않으면, Exception 발생
        if(!response.getStatusCode().is2xxSuccessful() || !response.hasBody()) {
            throw new AuthException(ExceptionCode.INVALID_AUTHORIZATION_CODE);
        }

	// ResponseBody에서 AccessToken 추출
        return response.getBody().getAccessToken();
    }

 

이제 FeignClient를 사용할 GoogleProvider 클래스를 생성해보자.

GoogleProvider는 GoogleAuthClient를 호출하여 구글 서버에 요청을 보내고, 응답에서 액세스 토큰을 추출하여 반환해준다. 만약 응답의 상태코드가 200번대가 아니거나, ResponseBody가 없으면 요청이 정상 처리된 게 아니므로 Exception을 발생시키도록 했다. (AuthException은 커스텀 예외이다.)

 

깃에 올라가도 안전하도록 필요한 값들은 전부 application.yml 파일에서 받아오도록 했다. 

 

 

(5) 컨트롤러, 서비스 생성하기

 

마지막으로 컨트롤러와 서비스 코드를 작성해주면, 구글에서 액세스 토큰을 받아올 준비가 끝난다.

프론트가 /api/v1/login/google URI로 POST 요청을 보내면, 컨트롤러 -> 서비스 -> GoogleProvider -> GoogleAuthClient 순서대로 호출할 것이다.

 

package weavers.siltarae.login.service;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import weavers.siltarae.login.domain.GoogleProvider;

@Service
@Transactional
@RequiredArgsConstructor
public class LoginService {

    private final GoogleProvider googleProvider;

    public void login(String code) {
        String authAccessToken = googleProvider.requestAccessToken(code);
    }
}

 

승인 코드(code)를 GoogleProvider에 넘기고, 구글 액세스 토큰을 받아오는 login() 메서드를 만들어주었다.

 

 

package weavers.siltarae.login.dto.request;

import lombok.AccessLevel;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class LoginRequest {

    private String authCode;

    @Builder
    public LoginRequest(String authCode) {
        this.authCode = authCode;
    }
}

package weavers.siltarae.login.controller;

import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import weavers.siltarae.login.dto.request.LoginRequest;
import weavers.siltarae.login.service.LoginService;

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/v1")
public class LoginController {

    private final LoginService loginService;

    @PostMapping("/login/google")
    public ResponseEntity<AccessTokenResponse> login(@RequestBody final LoginRequest request) {

        loginService.login(request.getAuthCode());
    }

 

프론트에서 넘겨준 인증 코드를 매핑할 DTO LoginRequest 클래스를 생성한 다음, 프론트의 요청을 받아줄 LoginController를 만들었다.

 

---

5. 테스트는 어떻게 하지?

이부분은 좀 무식한 방법으로 진행했다. 혹시 더 유식한 방법 아는 분들은 알려주세요 🤧

 

일단 구글 클라우드 콘솔에 가서 리디렉션 URI에 백 주소를 추가해준다. 나는 http://localhost:8761/api/v1/login/google로 설정했다. (스프링부트가 8761번 포트에서 돌고 있다) application.properties나 application.yml 파일에 설정된 값도 바꿔주어야 한다.

 

@GetMapping("/login/google")
public String getAuthCode(@RequestParam final String code) {
    return code;
}

 

그 다음에, 인증코드를 백으로 받아올 수 있도록 LoginController에 메서드를 하나 추가해준다.

구글에서는 백에 http://localhost:8761/api/v1/login/google?code=4/0xiruqkvfaew... 같은 식으로 요청을 보내고, 나는 그걸 받아오면 되는 식이다.

 

그리고 아래 양식을 설정값에 맞게 채운 뒤, 브라우저 주소창에 붙여넣기 해준다.

https://accounts.google.com/o/oauth2/v2/auth?
client_id={클라이언트 ID}
&redirect_uri={리다이렉트 URI}
&scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid
&response_type=code

 

 

그리고 브라우저 주소창에 붙여넣기를 해주면 액세스 토큰값이 창에 나타난다.

이게 최선일까? 싶은데 다른 방법을 찾지 못해서🥹 나도 이렇게 무식한 방법으로 테스트하고 싶진 않았다...

 

이후는 포스트맨을 사용하든, 인텔리제이 HttpClient를 사용하든 편한대로 하면 된다.