소셜 로그인 단계별 흐름 알아보기

📢 사내에서 oauth를 통해 로그인 기능을 구현한 경험을 정리해봤어요

 

※ 24년 작성한 글 이에요

 

 

😮 소셜 로그인

사이트 이용 시 Google, Kakao 로그인 등이 소셜 로그인이죠

• OAuth 기반으로 동작

 

 

🌊 소셜 로그인 단계 별 흐름

[사용자] → 로그인 버튼 클릭
[Frontend] → Backend에 요청
[Backend] → Google 로그인 페이지로 리디렉션
[사용자] → Google에 로그인 (직접 이메일/비밀번호 입력)
[Google] → Backend로 Authorization Code 전달
[Backend] → Authorization Code로 Access Token 교환
[Backend] → Access Token으로 사용자 정보 요청
[Backend] → DB 저장 + JWT 발급 → Frontend로 전달

 

(1) Frontend

소셜 로그인 버튼 추가

• 소셜 로그인 버튼(Google, Facebook 등)을 제공

 

Backend로 인증 요청

• 소셜 로그인 버튼을 클릭하면, Backend의 /auth/google EndPoint로 인증 요청을 보냄
• Frontend가 직접 OAuth 제공자에게 요청 할 수도 있지만 Backend 통해 하는게 깔끔

 

(2) Backend

OAuth 인증 요청

• 이게 /auth/google EndPoint가 하는 일이에요
• Backend에서 소셜 로그인 제공자(Google, Facebook 등)로 OAuth 인증 요청을 보내죠
• 그러면 Google Login 창으로 Redirection 돼요
• 사용자는 Google Login 창에서 아이디, 비밀번호를 입력하는거죠

 

인증 코드 수신 및 토큰 교환

• 로그인 성공 시 소셜 로그인 제공자로부터 인증 코드 수신 후, 이를 사용해 액세스 토큰 요청

 

사용자 정보 획득

• 발급받은 액세스 토큰으로 소셜 로그인 제공자에게 사용자 정보를 요청

 

DB 저장 및 JWT 발급

• 사용자 정보가 DB에 없으면 새로운 사용자로 등록
• JWT(Json Web Token)를 발급하여 Frontend로 반환

 

(3) Database

사용자 정보 저장

• 소셜 로그인으로 받아온 사용자 정보를 DB에 저장 (예: 이메일, 이름, 소셜 ID 등)

 

사용자 조회 및 업데이트

• 기존 사용자인 경우 해당 사용자의 정보(로그인 횟수, 최근 로그인 시간 등)를 업데이트합니다.

 

(4) Frontend

JWT 저장 및 인증 상태 관리

• Backend에서 받은 JWT를 로컬 스토리지나 쿠키에 저장
• 이후 Backend에 API 요청 시 인증 헤더에 JWT를 포함시켜 사용자를 인증

로그인 완료 처리

• 사용자에게 로그인 성공 UI를 보여줌
• Token 만료 시 로그인 페이지로 리다이렉션 처리

 

 

🛍️ Takeaway

Social Login 처리 시 Frontend/Backend 각각의 역할 이해