구글 로그인 방법론 및 구현

구글 로그인 방법론

방법 1. 클라가 구글과 소통 다하고, 백은 아무것도 안함

• 설명
• 아래 그림과 같이 현재 백엔드 구글 로그인 구현은 구글에 뭔가 따로 요청을 하지 않아요.



• 클라가 구글에 로그인 요청해서 id토큰과 profile 정보를 받는데, 여기서 profile정보를 서버에 넘겨줘버리는거죠.
• 플로우를 다르게 나타내보자면 아래 그림과 같아요.

• 장단점
• 간단하지만, 클라와 백이 프로필을 바로 주고 받는 거다 보니 보안에 취약하지 않을까 하는 걱정이 됩니다.

• 코드로 보여드리자면 아래와 같습니다.
• 참고 → 우리 코드 &
  Springboot-JWT-React-OAuth2.0-Eazy

  Github

  Springboot-JWT-React-OAuth2.0-Eazy

  Owner

  codingspecialist

  Updated

  Jun 21, 2024

  

• 문제점

💡 프론트엔드가 굳이 서버에게 요청해서 email, username, picture 받아오는 이유 1. 신규 유저인지 기존 유저인지 확인하려면 DB 까지 갔다와야해서 2. 프론트엔드가 구글에 요청해서 email, username, picture 받아온 후 서버에게 로그인/회원가입 요청하면(나 이미 구글로그인 했어! email만 줄테니 로그인 된 것으로 처리해줘!) 서버 입장에서 진짜 구글 로그인 한 게 맞는지 믿을 수 없음 (보안 문제)

구글Oauth로그인 적용기-JWT(2)
1편에서 다룬 내용 (보러가기)Front-end와 Back-end 분리Front-end에서 AccessToken을 받아 Backend에게 주면 Backend가 Google에 AccessToken으로 요청하여 Profile정보를 받아옴이번 편에서 다룰 내용Profile

https://velog.io/@mdy0102/%EA%B5%AC%EA%B8%80Oauth%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-JWT2

 

방법 2. 클라도 구글과 소통하고, 백도 함

• 설명
• 아래 그림과 같음



• 클라가 구글에 로그인 요청해서 id 토큰 받은 걸 서버에 넘겨줌
• 서버는 id토큰을 가지고 구글에 검증 요청을 해서 profile(PayLoad) 받음
• 플로우

• 장단점
• 코드 수정 필요. 대신 안전하고 더 보편적인 방법인 거 같음.

• 코드 - 구현 예시 1 → 서버가 아래 uri로 구글에 요청 보냄
• 카카오, 네이버는 이런 식으로 구현되어야 해서, 아마 코드 통일하려고 굳이 이렇게 구현하지 않았나 싶음
[Springboot, JWT] JWT를 이용한 소셜 로그인 구현하기 - Kakao/Google
들어가기 전에 구글링을 통해 소셜 로그인 구현을 찾아보면, 하기 라이브러리들을 통한 구현이 많습니다. implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' 이 경우, 주로 back-end(JAVA)에서 소셜 로그인을 A to Z까지 진행하는 경우가 많습니다. 만약, 필요한 것이 back-end에서 로그인을 전부 하는 것이라면 하기 글이 도움되지 않을 수 있습니다. 해당 부분 고려하시어 보시면 좋을 것 같습니다😄 이번 프로젝트의 경우, front-end에서 로그인을 진행하고, 로그인 이후 얻은 acc..

https://earth-95.tistory.com/105

백엔드 서버로 인증  |  Authentication  |  Google Developers

https://developers.google.com/identity/sign-in/web/backend-auth?hl=ko#send-the-id-token-to-your-server

• 코드 - 구현 예시 2 → GoogleIdTokenVerifier 라이브러리 사용
• 보편적인 방법인지 좀 더 서칭 필요
Google 소셜 로그인 Google API 클라이언트 라이브러리 + GoogleIdTokenVerifier 사용하는 방법
Rest API 서버에서 OAuth2.0을 사용하여 소셜 로그인을 구현해야 했습니다. 프론트는 리액트를 사용했기에 SPA방식을 고려해야 했습니다. 보통 아래와 같은 흐름으로 구현이 됩니다. 그림상으로는 1~3번 까지는 SPA에서 처리한다음 4번에서 code와 redirect_url을 반환합니다. 현재 진행하는 프로젝트에서는 5번의 access_token과 id_token값까지 프론트에서 받은 다음, access_token을 백엔드 서버에 제공하여 소셜 정보를 받는 과정으로 변경하였습니다. 구글 소셜 로그인 API를 구현하는 방식은 아래 블로그에 잘 설명되어 있습니다. (accessToken 값을 제공받는 과정까지 있습니다.) antdev.tistory.com/68 [Google Login API] Goo..

https://dncjf64.tistory.com/305

서버 측에서 Google ID 토큰 확인  |  Authentication  |  Google Developers

https://developers.google.com/identity/gsi/web/guides/verify-google-id-token?hl=ko

백엔드 서버로 인증  |  Google Developers

https://developers.google.com/identity/sign-in/android/backend-auth?hl=ko#calling-the-tokeninfo-endpoint

• 기타 참고
[Spring Boot] 29. Google OAuth with JWT (1)
해당 부분은 기존에 작성된 [Vue.js] Google OAuth 2.0 사용하기와 연계되어 이어서 작성되는 부분입니다. 해당 내용을 살짝 정리하자면, web application에서 Google OAuth를 사용하여 사용자 인증을 구현하는 절차를 구현하는 과정이였습니다. 자세한 내용은 아래의 링크를 참조 부탁드립니다. (vue.js + Google OAuth) 2021.04.05 - [Vue.js] - [Vue.js] 18. Google OAuth 2.0 사용하기 (1) [Vue.js] 18. Google OAuth 2.0 사용하기 (1) 요즘은 많은 Application에서 자체적으로 구현한 Login이 아닌 Google, Facebook, Naver등 에서 제공하는 방식으로 Login이 가능하게 구..

https://ayoteralab.tistory.com/entry/Spring-Boot-29-Google-OAuth-with-JWT-1

• 나쁘지 x
구글 ID_Token 을 검증하며 알아보는 JWT(feat. Go)
여러가지 이유에 의해서 서드파티 로그인을 구현해야 하는 경우가 있습니다.직접 로그인을 구현하기 귀찮아서일 수도 있고, 혹은 애플처럼 정책에 의해 구현해야할 경우도 있겠습니다.최근에 갠프에서 구글 로그인을 구현할 일이 생겨서 한번 같이 알아보도록 하겠습니다.구글 로그인을

https://velog.io/@teihong93/%EA%B5%AC%EA%B8%80-IDToken-%EC%9D%84-%EA%B2%80%EC%A6%9D%ED%95%98%EB%A9%B0-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-JWTfeat.-Go

• 좋은 듯!
구글 로그인 API (Google Sign-In API)
공식문서 developers.google.com/identity/sign-in/android/backend-auth Authenticate with a backend server | Google Sign-In for Android If you use Google Sign-In with an app or site that communicates with a backend server, you might need to identify the currently signed-in user on the server. To do so securely, after a user successfully signs in, send the user's ID token to your server usi developers.g..

https://kimmjieun.tistory.com/109

구글 ID_Token 을 검증하며 알아보는 JWT(feat. Go)
여러가지 이유에 의해서 서드파티 로그인을 구현해야 하는 경우가 있습니다.직접 로그인을 구현하기 귀찮아서일 수도 있고, 혹은 애플처럼 정책에 의해 구현해야할 경우도 있겠습니다.최근에 갠프에서 구글 로그인을 구현할 일이 생겨서 한번 같이 알아보도록 하겠습니다.구글 로그인을

https://velog.io/@teihong93/구글-IDToken-을-검증하며-알아보는-JWTfeat.-Go

구글 로그인 구현

• 서론
• 두 번째 방법을 사용하기로 했다.
• 첫 번째 방법에 적어둔 단점이 너무나 치명적이기 때문이다.
• restTemplate 방식을 사용했다.

• 본론 : 내 코드
• AuthController
• AuthService
• GoogleLoginHelper
• GoogleAuthDto
• AuthGoogleLoginRequest
• AuthLogionResponse

• 참고
• 이 블로그는 webclient 방식을 사용한다.
[Springboot, JWT] JWT를 이용한 소셜 로그인 구현하기 - Kakao/Google
들어가기 전에 구글링을 통해 소셜 로그인 구현을 찾아보면, 하기 라이브러리들을 통한 구현이 많습니다. implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' 이 경우, 주로 back-end(JAVA)에서 소셜 로그인을 A to Z까지 진행하는 경우가 많습니다. 만약, 필요한 것이 back-end에서 로그인을 전부 하는 것이라면 하기 글이 도움되지 않을 수 있습니다. 해당 부분 고려하시어 보시면 좋을 것 같습니다😄 이번 프로젝트의 경우, front-end에서 로그인을 진행하고, 로그인 이후 얻은 acc..

https://earth-95.tistory.com/105#%EB%25--%25-D%EB%25--%25B-%EB%25A-%25B-

RestTemplate vs WebClient

RestTemplate과 WebClient

이 글은 자바에서 HTTP 요청을 써봤거나 써보려고 하는 독자를 대상을 작성하였습니다. 스프링 어플리케이션에서 HTTP 요청할 때 사용하는 방법으로 RestTemplate과 WebClient가 있다. 스프링 5.0 이전까지는 클라이언트에서 HTTP…

https://tecoble.techcourse.co.kr/post/2021-07-25-resttemplate-webclient/

[Spring boot] WebClient 사용해보기

https://docs.spring.io/spring-framework/docs/current/reference/html/web-reactive.html#webflux-client Web on Reactive Stack The original web framework included in the Spring Framework, Spring Web MVC, was purpose-built for the Servlet API and Servlet containers. The reactive-stack web framework, Spring WebFlux, was added later in version 5.0. It is fully non-blocking, supports docs.spring.io 개발 중..

https://annajin.tistory.com/101

하루 정리