본문 바로가기
OAuth/Google Login API

[Google Login API] 소셜 로그인 요청 Redirect 처리 (Spring Boot 레퍼런스를 보면서 구현해보는 구글 소셜 로그인 REST API - 3)

by 임채훈 2020. 10. 18.

Spring Boot 환경에서 구글 소셜 로그인 API를 REST 방식으로 구현하기

이전글

2020/10/18 - [OAuth/Google Login API] - [Google Login API] 개발환경 구성 및 Spring Boot 프로젝트 생성 (Spring Boot 레퍼런스를 보면서 구현해보는 구글 소셜 로그인 REST API - 2)

 

[Google Login API] 개발환경 구성 및 Spring Boot 프로젝트 생성 (Spring Boot 레퍼런스를 보면서 구현해보��

Spring Boot 환경에서 구글 소셜 로그인 API를 REST 방식으로 구현하기 Step Google APIs 신규 프로젝트 생성 및 개발환경 구성 새 프로젝트 생성 OAuth 동의 화면 구성 API Key 생성 OAuth 클라이언트 ID 생성(사

antdev.tistory.com

 

들어가기에 앞서 기본적인 소셜 로그인 처리 프로세스에 대해 간단하게 짚고 넘어가도록 하겠습니다.

일반적으로 SNS Social 로그인의 경우 아래의 절차로 처리됩니다.

  1. 로그인 최초 요청 처리

    첫번째로 사용자가 특정한 웹사이트나 앱을 사용할때 볼 수 있는 로그인 화면에서 특정한 소셜 로그인 버튼인

    해당 버튼과 같이 로그인 버튼을 눌렀을때 요청되는 최초의 요청을 처리합니다.

  2. 첫번째 요청을 받아 특정 Social Login API Server로 부터 1회용 code를 받도록 합니다.

  3. 두번째 요청을 통해 받게된 code를 이용하여 Social Login API Server로부터 access token 및 refresh token을 발급받습니다.

  4. 이후에 추가적으로 각 소셜별로 특정한 사용자의 추가 정보 혹은 사용자의 인증 정보를 통하여 별도의 요청을 필요로 할때 세번째 요청을 통해 받게된 access token을 이용하여 요청하여 필요한 정보들을 받도록 합니다.

 

Step

  1. Google APIs 신규 프로젝트 생성 및 개발환경 구성
    1. 새 프로젝트 생성
    2. OAuth 동의 화면 구성
    3. API Key 생성
    4. OAuth 클라이언트 ID 생성(사용자 인증 정보 생성)
  2. 개발환경 구성 및 Spring Boot 프로젝트 생성
    1. 개발환경
    2. Spring Boot 프로젝트 생성
  3. 소셜 로그인 요청 Redirect 처리 (로그인 최초 요청 처리)
  4. 소셜 로그인 요청 Redirect 처리 - 2
  5. 구글 로그인 Access Token 및 Refresh Token 발급


3. 소셜 로그인 요청 Redirect 처리

1. 소셜 로그인 타입을 구분할 enum 클래스 생성

public enum SocialLoginType {
    GOOGLE,
    FACEBOOK,
    KAKAO,
    NAVER
}

2. 소셜 로그인 타입별로 공통적으로 사용될 interface 생성

public interface SocialOauth {
    /**
     * 각 Social Login 페이지로 Redirect 처리할 URL Build
     * 사용자로부터 로그인 요청을 받아 Social Login Server 인증용 code 요청
     */
    String getOauthRedirectURL();
}

3. 공통 interface를 구현할 소셜 로그인 각 타입별 Class 생성

@Component
public class FacebookOauth implements SocialOauth {
    @Override
    public String getOauthRedirectURL() {
        return "";
    }
}
@Component
public class GoogleOauth implements SocialOauth {
    @Override
    public String getOauthRedirectURL() {
        return "";
    }
}
@Component
public class KakaoOauth implements SocialOauth {
    @Override
    public String getOauthRedirectURL() {
        return "";
    }
}
@Component
public class NaverOauth implements SocialOauth {
    @Override
    public String getOauthRedirectURL() {
        return "";
    }
}

여기까지 여러가지 소셜 플랫폼에 따라 공통적으로 가져야 될 기능과 구분할 수 있도록 모듈화를 하기위해 클래스들을 작성했습니다.

물론 현재 포스팅은 Google 로그인 API 구현하는 과정이기 때문에 GoogleOauth만 사용할것이지만 혹시나 학습차 보고 계시거나 실제로 다양한 소셜 플랫폼을 지원하는 서비스를 개발중이신분들께서는 위의 구성대로 타 소셜 로그인 서비스까지 구현해보시면 좋을것같습니다.

 

4. Service Class 생성

@Service
@RequiredArgsConstructor
public class OauthService {
    private final FacebookOauth facebookOauth;
    private final GoogleOauth googleOauth;
    private final KakaoOauth kakaoOauth;
    private final NaverOauth naverOauth;
		private final HttpServletResponse response;

    public void request(SocialLoginType socialLoginType) {
        String redirectURL;
        switch (socialLoginType) {
            case GOOGLE: {
                redirectURL = googleOauth.getOauthRedirectURL();
            } break;
            case FACEBOOK: {
                redirectURL = facebookOauth.getOauthRedirectURL();
            } break;
            case KAKAO: {
                redirectURL = kakaoOauth.getOauthRedirectURL();
            } break;
            case NAVER: {
                redirectURL = naverOauth.getOauthRedirectURL();
            } break;
            default: {
                throw new IllegalArgumentException("알 수 없는 소셜 로그인 형식입니다.");
            }
        }
        try {
            response.sendRedirect(redirectURL);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

위 코드를 보면 getOauthRedirectURL 메소드는 redirect 처리를 할 URL을 생성하는 메소드라고 볼 수 있고 해당 URL로 sendRedirect 처리하고 있습니다.

이게 어떤 과정인가하면 내 서비스가 예를들어 쇼핑몰 서비스라고 가정했을때 사용자가 구글 로그인 요청을 했을때 구글 웹페이지에서 사용자의 브라우저 세션에 구글 계정이 로그인되어있는가 및 구글 로그인을 할 수 있는 페이지로 이동되어야 됩니다.

OauthService에서 각 소셜 서비스 타입별로 분기처리하여 getOauthRedirectURL 메소드를 호출할 수 있도록 하고 알 수 없는 타입의 파라미터가 전달되었을때는 Exception을 발생시키도록 처리했습니다.

 

5. Controller 생성

@RestController
@CrossOrigin
@RequiredArgsConstructor
@RequestMapping(value = "/auth")
@Slf4j
public class OauthController {
    private final OauthService oauthService;

    /**
     * 사용자로부터 SNS 로그인 요청을 Social Login Type 을 받아 처리
     * @param socialLoginType (GOOGLE, FACEBOOK, NAVER, KAKAO)
     */
    @GetMapping(value = "/{socialLoginType}")
    public void socialLoginType(
            @PathVariable(name = "socialLoginType") SocialLoginType socialLoginType) {
		log.info(">> 사용자로부터 SNS 로그인 요청을 받음 :: {} Social Login", socialLoginType);
        oauthService.request(socialLoginType);
    }
}

6. Converter 생성

@Configuration
public class SocialLoginTypeConverter implements Converter<String, SocialLoginType> {
    @Override
    public SocialLoginType convert(String s) {
        return SocialLoginType.valueOf(s.toUpperCase());
    }
}

SocialLoginTypeConverter는 Controller에서 socialLoginType 파라미터(@PathVariable을 통해)를 받는데 enum 타입의 대문자 값을 소문자로 mapping 가능하도록 하기위하여 생성해주었습니다.

만약 converter가 구현되어 있지 않으면 http://localhost:8080/auth/GOOGLE의 형태로 파라미터가 전달되어야 됩니다.

따라서 SocialLoginTypeConverter를 통해 http://localhost:8080/auth/google 형태의 파라미터가 전달되었을때 앞에서 생성해준 SocialLoginType의 GOOGLE 값에 매핑이 될 수 있게됩니다.

 

 

여기까지 진행됐다면 사용자에게 로그인 요청을 받아 처리해야될 로직을 구성해야할 전체적인 구성은 거의 완료되었습니다.

쉽게 설명하자면 사용자가 Web 서비스나 Mobile App 서비스에서

위와 같은 버튼을 눌렀을때 위에서 생성한 Controller의 socialLoginType 매핑 메소드로 요청보내도록 처리되는겁니다.

이때 요청 요청 URL은 현재 개발중인 로컬을 기준으로 http://localhost:8080/auth/google 의 형태가 될겁니다.

만약 해당 로그인버튼을 HTML로 구성한다고 가정했을때는 다음과 같이 구성할 수 있습니다.

<a href="http://localhost:8080/auth/GOOGLE">구글 아이디로 로그인</a>

 

이제 Spring Boot Server를 구동한 후에 http://localhost:8080/auth/google 요청을 보내보면 아래와 같이 성공적으로 요청을 받는데 성공했음을 확인할 수 있습니다.

이제 본격적으로 Google Login API Server와의 통신하는 로직을 구성하면 됩니다.

 

다음장에 이어서

2020/10/18 - [OAuth/Google Login API] - [Google Login API] 소셜 로그인 요청 Redirect 처리 - 2 (Spring Boot 레퍼런스를 보면서 구현해보는 구글 소셜 로그인 REST API - 4)


혹시나 오류가 발생하거나 질문할 사항이 있으시면 댓글 및 카카오톡 1:1 오픈채팅을 통해서 문의해주시면 친절하게 알려드리겠습니다~!

 

지나가던 백엔드 개발자

 

open.kakao.com

전체 소스코드는 개인 Github에 올려두었습니다.

 

youspend8/google-login-api-sample-blog

Contribute to youspend8/google-login-api-sample-blog development by creating an account on GitHub.

github.com

 

댓글