Authorization Code를 활용하는 구글 소셜 로그인을 실행하기 까지 유저, 프론트엔드, 백엔드, OpenID Connect 프로바이더 사이에 어떤 과정을 거칠까?

 

구글 소셜 로그인은 OAuth 2.0 프로토콜의 Authorization Code Grant Flow를 사용하며, OpenID Connect(OIDC)를 통해 사용자 인증을 수행합니다. 이 과정에서 유저, 프론트엔드, 백엔드, 그리고 구글(OpenID Connect 프로바이더) 사이에 여러 단계의 상호작용이 이루어집니다. 각 단계를 상세히 설명하겠습니다.

1. 유저가 로그인 요청

1. 유저 행동:
   • 사용자가 웹 애플리케이션의 "구글로 로그인" 버튼을 클릭합니다.

2. 프론트엔드에서 구글로 인증 요청

1. 프론트엔드에서 구글로 리디렉션:
   • 프론트엔드는 사용자를 구글의 인증 서버로 리디렉트합니다. 이때 포함되는 주요 파라미터는 다음과 같습니다:
     • client_id: 구글 개발자 콘솔에서 발급받은 클라이언트 ID.
     • redirect_uri: 인증 후 사용자에게 리디렉션할 URL(보통 백엔드 API).
     • response_type: code로 설정, Authorization Code를 요청함.
     • scope: openid, email, profile 등의 사용자의 정보를 요청할 수 있는 범위.
     • state: CSRF 공격을 방지하기 위해 프론트엔드에서 생성한 임의의 문자열.
2. 유저의 구글 인증:
   • 사용자는 구글 로그인 화면에서 자신의 구글 계정으로 로그인하거나, 이미 로그인되어 있다면 바로 권한 요청 화면으로 이동합니다.
   • 사용자가 애플리케이션에 요청된 권한(예: 이메일, 프로필 정보)을 부여하면, 구글은 인가 코드를 생성합니다.

3. 구글이 프론트엔드로 인가 코드 전달

1. 인가 코드 전달:
   • 사용자가 권한을 부여하면, 구글은 지정된 redirect_uri로 인가 코드(authorization code)를 전달합니다.
   • 이 인가 코드는 프론트엔드로 돌아오지 않고, redirect_uri를 통해 백엔드로 직접 전달됩니다.

4. 백엔드가 인가 코드를 사용해 구글에 토큰 요청

1. 백엔드에서 구글로 토큰 요청:
   • 백엔드는 구글의 토큰 엔드포인트로 인가 코드를 포함한 POST 요청을 보냅니다. 이 요청에는 다음 정보가 포함됩니다:
     • client_id: 프론트엔드와 동일한 클라이언트 ID.
     • client_secret: 구글 개발자 콘솔에서 발급받은 클라이언트 시크릿.
     • code: 프론트엔드에서 받은 인가 코드.
     • redirect_uri: 백엔드에서 사용한 리디렉트 URI.
     • grant_type: authorization_code로 설정.
2. 구글에서 액세스 토큰 및 ID 토큰 발급:
   • 구글은 인가 코드가 유효하고 요청이 올바르면, 백엔드에 액세스 토큰, 리프레시 토큰(선택적), 그리고 ID 토큰을 포함한 응답을 보냅니다.
   • ID 토큰은 JWT 형식이며, 사용자의 인증된 정보를 담고 있습니다.

5. 백엔드에서 토큰 검증 및 사용자 정보 요청

1. ID 토큰 검증:
   • 백엔드는 구글이 제공한 공개 키를 사용해 ID 토큰의 서명을 검증하여 토큰의 유효성을 확인합니다.
   • ID 토큰의 페이로드에는 사용자의 정보(예: 이메일, 이름, 프로필 사진 등)와 함께 토큰의 유효 기간 등이 포함되어 있습니다.
2. 추가 사용자 정보 요청(선택적):
   • 백엔드는 필요에 따라 액세스 토큰을 사용해 구글 API(예: Google People API)를 통해 추가적인 사용자 정보를 요청할 수 있습니다.

6. 백엔드에서 세션 생성 및 프론트엔드로 응답

1. 세션 생성 및 응답:
   • 백엔드는 사용자 정보를 바탕으로 세션을 생성하거나, JWT와 같은 토큰을 발급하여 클라이언트에 전달할 수 있습니다.
   • 백엔드는 로그인 완료를 프론트엔드에 알리고, 필요한 경우 JWT 토큰을 프론트엔드에 전달합니다.

7. 프론트엔드에서 세션 관리 및 이후 요청 처리

1. 프론트엔드에서 세션 관리:
   • 프론트엔드는 서버로부터 받은 토큰을 저장(예: 로컬 스토리지, 세션 스토리지)하고, 이후 사용자가 보호된 리소스에 접근할 때 이를 HTTP 헤더에 포함시켜 백엔드로 요청을 보냅니다.
   • 백엔드는 각 요청에서 이 토큰을 검증하여 사용자의 신원을 확인합니다.

8. 유저가 애플리케이션 사용

1. 사용자 경험:
   • 사용자는 정상적으로 로그인되어 애플리케이션을 사용할 수 있으며, 보호된 리소스에 접근할 때는 백엔드가 사용자 인증 상태를 확인하여 응답합니다.

요약

1. 유저는 프론트엔드에서 "구글로 로그인"을 클릭합니다.
2. 프론트엔드는 구글 인증 서버로 리디렉트합니다.
3. 유저는 구글에서 로그인 및 권한을 부여합니다.
4. 구글은 인가 코드를 백엔드로 전달합니다.
5. 백엔드는 구글에 토큰을 요청하고, 액세스 토큰 및 ID 토큰을 받습니다.
6. 백엔드는 ID 토큰을 검증하고, 세션 또는 JWT 토큰을 생성하여 프론트엔드에 전달합니다.
7. 프론트엔드는 세션이나 JWT 토큰을 관리하여 이후 요청에 사용합니다.

이 과정은 안전하게 사용자 인증을 수행하고, 애플리케이션이 사용자의 정보를 신뢰할 수 있도록 설계되었습니다.