소셜 로그인: Authorization Code 과정

Updated: 2025-04-17

cover image

소셜 로그인: Authorization Code 과정

소셜 로그인의 필요성

소셜 로그인을 구현하면 사용자에게는 편리한 로그인 경험을, 개발자에게는 보안 관리 부담 감소와 사용자 정보 획득의 이점을 제공합니다.

그중에서도 구글 로그인은 광범위한 사용자 기반과 안정적인 인증 인프라로 인해 많은 서비스에서 채택하고 있습니다.

OAuth 2.0과 OpenID Connect

구글 소셜 로그인은 OAuth 2.0 프로토콜과 그 확장인 OpenID Connect를 기반으로 합니다.

OAuth 2.0: 사용자 데이터에 대한 접근 권한을 부여하는 프로토콜
OpenID Connect: OAuth 2.0 위에 구축된 인증 레이어로, 사용자 신원 확인 기능 추가

과정:

로그인 클릭: 사용자가 웹사이트나 앱에서 "구글 로그인" 버튼을 클릭 (사용자 프론트)
인증 요청: 사용자 브라우저를 구글의 인증 서버로 리디렉트 (프론트 → 브라우저 → 구글)

1https://accounts.google.com/o/oauth2/v2/auth?
2  client_id=YOUR_CLIENT_ID&
3  redirect_uri=https://your-app.com/callback&
4  response_type=code&
5  scope=openid profile email&
6  state=random_security_token&
7  access_type=offline&
8  prompt=consent

인증 및 동의: 사용자는 구글 로그인 페이지로 리디렉트 되고 앱이 요청하는 권한(scope)에 대한 동의 확인 (사용자 → 구글)
Authorization Code 발급: 사용자 브라우저를 지정된 redirect_uri로 리디렉트시키며, URL에 Authorization Code를 포함 (구글 → 브라우저 → 프론트)

1https://your-app.com/callback?
2  code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
3  state=random_security_token

Authorization Code 전달 (프론트 → 백엔드)

1POST /api/auth/google
2Content-Type: application/json
3
4{
5  "code": "4/P7q7W91a-oMsCeLvIaQm6bTrgtp7"
6}

토큰 교환: 백엔드 서버는 Authorization Code를 이용해 구글 토큰 엔드포인트에 접근 토큰과 ID 토큰을 요청 (백엔드 → 구글)

1POST https://oauth2.googleapis.com/token
2Content-Type: application/x-www-form-urlencoded
3
4code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
5client_id=YOUR_CLIENT_ID&
6client_secret=YOUR_CLIENT_SECRET&
7redirect_uri=https://your-app.com/callback&
8grant_type=authorization_code

토큰 응답 (구글 → 백엔드)

1{
2  "access_token": "ya29.a0AfH6SMBx-...",
3  "expires_in": 3599,
4  "refresh_token": "1//0eHSuhN-...",
5  "scope": "openid profile email",
6  "token_type": "Bearer",
7  "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6..."
8}

사용자 정보 검증 및 획득 (백엔드 → 구글)
사용자 인증 처리 (백엔드): 휙득한 구글 사용자 정보를 바탕으로

기존 사용자인지 확인
신규 사용자면 DB에 저장
자체 인증 토큰(JWT 등) 생성

인증 완료 및 응답 (백엔드 → 프론트엔드): 백엔드는 자체 인증 토큰을 프론트엔드에 전달합니다:

1{
2  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
3  "user": {
4    "id": "user_123",
5    "name": "John Doe",
6    "email": "john.doe@example.com",
7    "avatar": "https://lh3.googleusercontent.com/..."
8  }
9}

로그인 완료 (프론트엔드): 프론트엔드는 받은 토큰을 저장(로컬 스토리지, 쿠키 등)하고 사용자를 로그인 상태로 전환합니다.