기존 방식의 문제점

• 클라이언트측에서 /api/oauth/google을 호출 할 경우 AuthGuard로 인해 자동으로 구글 로그인 페이지로 redirect됩니다.

@Get()
@UseGuards(AuthGuard("google"))
@ApiOperation({
  summary: "구글 로그인 페이지로 리다이렉트",
})
googleOAuth() {
  // redirect google login page
  return { msg: "Google Authentication" };
}

• 그 후, 로그인을 완료할 경우 아래의 구글 측에서 /api/oauth/google/callback 으로 access token과 함께 callback합니다.

  

@Post("callback")
@ApiOperation({
  summary: "구글 로그인 callback, 쿠키 생성 후 사용자에게 전송",
})
async googleOAuthCallback(@Body() body: AccessTokenDto, @Res() res: Response) {
  const { accessToken } = body;

  const userInfo = await this.googleOauthService.getUserInfo(accessToken);

  const token = await this.googleOauthService.signIn({
    oauthId: userInfo.data.sub,
    name: userInfo.data.name,
  });

  if (token) {
    res.cookie("access_token", token, {
      sameSite: true,
      secure: false, // 배포시에는 true로 바꿔야됨
      httpOnly: true,
      maxAge: 2 * 60 * 60 * 1000,
    });

    return HttpResponse.success({ validate: true });
  }

  return HttpResponse.success({ validate: false });
}

• 이 경우, 클라이언트측에서는 /api/oauth/google/callback API를 호출한적이 없으므로 로그인 여부를 알 수 없고, 유저 정보 또한 얻을 수 없습니다.
• SSR을 사용할 경우 문제 없이 유저 정보를 전송할 수 있지만, CSR을 사용하고 있는 상황에서는 해당 문제가 발생한다.

개선된 방식

• 구글 공식 문서를 확인해본 결과 사용자가 request token을 주면 구글에서 authorization code를 보낸다.
• 그 후, 사용자는 authorization code를 이용해 access token을 요청하고, access token을 이용해 구글 로그인을 수행한다.
• 실제 프로젝트에 대입해보면 아래와 같은 흐름도가 나온다.

1. Front-End에서 OAuth 로그인을 요청한다.
2. Google Server에서 access token을 발행한다.
3. Front-End는 발행 받은 access token을 /api/oauth/google/login API 호출시 POST를 통해 함께 보낸다.
4. Back-End는 Front-End로 부터 받은 access token과 googleapis을 이용해 Google Server에 사용자 정보를 요청한다.
5. 유효한 access token일 경우 Google Server는 해당 사용자의 정보를 반환한다.