Eatory 프로젝트를 진행하며 구글 소셜 로그인을 구현하였다.
내가 헤매었던 부분을 공유하고, 이를 정리해 기록하고자 한다.
들어가기에 앞서,
- Google Cloud 에서 클라이언트 등록을 해야 한다.
- 등록 방법은 아래 블로그를 참고했다.
https://velog.io/@bdd14club/백엔드-2.-구글-소셜-로그인-구현하기- ⚠️ 위 블로그 글과 다르게 Redirect URI는 localhost:5173(프론트)로 설정해야 한다.
- 개발환경은 다음과 같다.
백: SpringBoot
프론트: Vue3
구글 소셜 로그인은 다음과 같은 과정을 통해 이루어진다.
1. Google 로그인 시작
1️⃣ 사용자 요청: 사용자가 구글 로그인 버튼을 클릭한다.
2️⃣ 클릭 시, 아래 URL로 이동하게끔 Vue를 구현한다.
https://accounts.google.com/o/oauth2/v2/auth?client_id=[내 ClientId]&redirect_uri=[http://localhost:5173/oauth2/callback]&response_type=code&scope=openid%20email%20profile
Point! Google Cloud에서 redirect URI는 프론트엔드 http://localhost:5173/oauth2/callback 로 설정한다.
Why?
- SPA의 비동기적 특성
- Vue와 같은 SPA에서는 로그인 상태와 UI 상태를 즉시 반영해야 한다.
- Redirect URI를 백엔드로 설정할 경우, 클라이언트와 서버 간의 추가 요청이 필요해 성능 저하와 사용자 경험 저하를 초래할 수 있다.
- UI와 상태의 불일치 방지
- 백엔드가 Redirect URI일 경우, 로그인 상태를 전달받기 위해 추가 요청이 필요하며, 이 과정에서 UI와 실제 인증 상태 간 불일치가 발생할 가능성이 있다.
3️⃣ Google 인증 서버에서 Authorization Code 발급 후 Redirect URI로 리다이렉트 한다.
- OAuth2 프로토콜의 핵심 요소, Authorization Code의 역할
- 일회용 코드
- Authorization Code는 짧은 시간 동안만 유효하며, '한 번 사용'되면 만료된다.
- 이를 통해 중간 공격(Man-in-the-Middle)을 방지할 수 있다.
- 민감한 데이터 보호
- Authorization Code 자체는 민감 정보를 포함하지 않는다
- Access Token 교환 과정에서만 사용되며, 이를 통해 클라이언트 보안이 강화된다.
- 일회용 코드
2. Redirect URL 처리 (Vue)
redirect uri에 따라 OAuth2CallbackView.vue 페이지로 가게 된다.
1️⃣ Authorization Code 추출: window.location.search를 통해 code 값 파싱
2️⃣ 백엔드 요청: code를 socialLogin(authCode)로 백엔드에 전달
- 왜? - google access Token 얻어야 하기 때문
3. Authorization Code 처리 (Spring Boot)
1️⃣ Google API에 Authorization Code를 사용해 사용자 Google Access Token 요청
- 여기서 사용자 Access Token의 역할은?
- 사용자가 Google API에 접근할 수 있는 권한을 나타내는 임시 자격증명이다.
- 서버 내 Access Token과는 구별된다.
- 이를 통해 애플리케이션은 Google 서비스와 데이터를 사용할 수 있다. 사용자의 이름, 이메일, 프로필 사진 등의 정보를 가져오기 위해 Access Token이 필요하다.
- 토큰을 얻기 위해 필요한 정보는?
- Authorization Code
- Client ID 및 Secret (애플리케이션의 인증 정보. ID, PW 개념)
- Redirect URI (Authorization Code 발급 시 사용한 것과 동일해야 함)
2️⃣ Google Access Token 반환: 클라이언트(Vue)에 Google Access Token 전달
4. Access Token 처리 및 사용자 정보 요청 (Vue)
1️⃣ Access Token 저장: 받은 토큰을 sessionStorage에 저장
2️⃣ 사용자 정보 요청
- Access Token을 사용해 /user-info 엔드포인트 호출. (5. 사용자 정보 관리 _ Spring Boot)
- Google에서 사용자 정보(Fetch User Info) 획득 후 상태 저장.
3️⃣ 라우팅: 내가 원하는 경로로 리다이렉션
5. 사용자 정보 관리 (Spring Boot)
구글로부터 사용자 정보 가져오기
6. 회원 등록 및 서버 Access Token 생성 (Spring Boot)
애플리케이션 자체 사용자 인증 및 인가 처리하기
1️⃣ 회원 등록
- 사용자 정보로 DB 확인 -> 신규 사용자라면 회원 등록 진행
- Google ID, 이메일, 이름, 프로필 사진 등 사용자 정보 저장
2️⃣ 서버 Access Token, Refresh Token 생성
- JWT를 생성하여 사용자 인증 및 인가 처리
3️⃣ 클라이언트에 Access Token 반환
- 생성된 서버 Access Token과 사용자 정보를 클라이언트로 반환
구글 소셜 로그인으로부터 얻을 수 있는 이점은 세 가지이다.
- 소셜 로그인 편리성: 별도 계정 생성 없이 간편하게 로그인 가능. 사용자 경험(UX) 향상
- 보안 강화(OAtuth2.0의 장점): Authorization Code 사용하여 미간 정보 노출되지 않도록 보장
- 프로세스 속도: 일반 로그인에 비해 약 30~40% 빠른 로그인 속도(일반 로그인: 6~8초, 소셜 로그인: 3~5초)
구현을 위해서는 클라이언트와의 데이터 교환에서 전체적인 프로세스를 정확히 이해해야 한다.
특히, Google과 애플리케이션에서 이뤄져야 하는 과정을 명확히 구분할 수 있다면 수월하게 구현할 수 있을 것이다.
