Google OAuth Setup

About

Spring Security로 OAuth 구현할 때 주소 등록하는 게 너무 많고 헷갈려서 레퍼런스를 계속 보게 됩니다. 고통을 많이 받아 이 참에 정리해둡니다.

Keywords

• OAuth Client ID, Client Secret - 해당 ID와 secret으로 어떤 구글 OAuth 앱인지 식별하고 로그인할 권한을 얻습니다. 구글 (GCP)에서 OAuth 앱을 만들고 발급받을 수 있습니다.

  • 백엔드가 Redirect 포함 로그인 처리를 모두 하는 웹 버전 로그인의 경우 백엔드에 등록해줘야 합니다. 여기서는 이 방식을 기준으로 가이드를 작성합니다.

  • 자바스크립트 방식 로그인의 경우엔 프론트엔드에 등록해야 합니다.

• 백엔드 OAuth 로그인 URL - e.g., http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:3000/auth/redirect

  • 프론트엔드에서 맨 처음 백엔드로 요청하는 구글 로그인 버튼에 넣어주는 주소입니다.

  • Google 로그인 방식으로 로그인 한 뒤 프론트엔드의 /auth/redirect로 돌아와달라는 요청입니다.

• 백엔드 Redirect URI - e.g., http://localhost:8080/login/oauth2/code/google

  • 구글 앱에서 Authorized Redirect URI로 등록해줘야 합니다. 구글에서 토큰을 발급하고 해당 주소로 가게 되는 부분입니다.

  • 프론트엔드는 알 필요 없습니다.

• 프론트엔드 Redirect URI - e.g., http://localhost:3000/auth/redirect

  • 모든 로그인 작업을 마치면 백엔드에서 프론트엔드의 해당 주소로 redirect 시킵니다.

  • 백엔드에서 등록해줘야 합니다.

  • 프론트엔드에서 해당 페이지를 만들고, 백엔드에서 쿼리스트링에 넣어준 토큰을 처리하는 로직(쿠키 저장 등)을 구현해야 합니다. 여기서 나온 토큰을 Authorization 헤더에 넣고 인증된 요청을 보낼 수 있습니다.

  • 구글 앱에서는 알 필요 없습니다.

Details

일단 client-id와 client-secret을 둘 다 등록해줘야 합니다. JavaScript 버전의 로그인이 아닌 웹 버전의 로그인이므로 백엔드 쪽에 넣습니다. (application-oauth.yml)

1. Google OAuth App에서 Authorized Redirect URI 추가

   `${BACKEND_URL}/login/oauth2/code/${providerType}`

   • 예를 들면 http://localhost:8080/login/oauth2/code/google 입니다.

   • 이 주소를 Google의 Authorized Redirect URI에 넣어줘야 합니다. 넣지 않으면 구글에서 unauthorized_redirect_uri 에러가 발생합니다.

2. 백엔드에서 프론트엔드로 돌아가는 authorized redirect URI 추가

   app:
     oauth2:
         authorized-redirect-uris:
           - <http://localhost:3000/auth/redirect>

3. 백엔드에서 SecurityConfiguration 구현 시 authorization 관련 URI 추가

   @Override
       protected void configure(HttpSecurity http) throws Exception {
           http
                   .cors().and()
                   .csrf().disable()
                   .httpBasic().disable()
                   .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                   .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                   .authorizeRequests(authz -> authz
                           .anyRequest().permitAll()
                           .expressionHandler(expressionHandler()))
                   .oauth2Login(oAuthz -> oAuthz
                           .authorizationEndpoint()
                           .baseUri("/oauth2/authorize") // (4) 프론트엔드로부터 OAuth 로그인 요청을 받을 URI
                           .authorizationRequestRepository(cookieAuthorizationRequestRepository).and()
                           .redirectionEndpoint().baseUri("/*/oauth2/code/*").and() // (1) 구글 앱 관련 Redirection URI
                           .userInfoEndpoint().userService(oAuth2UserService).and()
                           .successHandler(oAuth2AuthenticationSuccessHandler)
                           .failureHandler(oAuth2AuthenticationFailureHandler));
   
           http
                   .addFilterBefore(authenticationJwtTokenFilter, UsernamePasswordAuthenticationFilter.class);
       }

4. 프론트엔드에서 백엔드로 요청하는 버튼 구현

   const providerType = 'google'
   const url = `${BACKEND_URL}/oauth2/authorize/${providerType}?redirect_uri=${FRONTEND_URL}/auth/redirect`

   • 이때 url을 단순 <a> 태그를 넣은 버튼에 href 속성에 url을 넣어주기만 하면 됩니다.

5. 프론트엔드에서의 redirect URI에 대한 처리

   • 로그인을 완료하고 백엔드에서 JWT 토큰 값을 프론트엔드의 Redirect URL로 쿼리스트링을 통해 보내줍니다. (?access_token=XX&refresh_token=XXX)

   • /auth/redirect 페이지를 만들고, 해당 페이지에 전달된 쿼리를 읽습니다. 쿼리를 읽어 토큰을 가져오고 쿠키에 저장해줘서 앱에서 관리해주면 됩니다.

   • 이게 프론트엔드의 authorized-redirect-uri입니다. 백엔드에서도 application-oauth.yml에서 등록해줍니다.

Reference

레퍼런스는 다음 글 하나로 다 해결이 됩니다.

[Spring Boot] OAuth2 소셜 로그인 가이드 (구글, 페이스북, 네이버, 카카오)