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

이 질문에 대한 답변을 정리해보려고 한다.

소셜 로그인이란?

사용자가 새로운 계정을 만들지 않고도 기존의 소셜 미디어 계정(예: 구글, 페이스북, 트위터 등)을 사용하여 다른 웹사이트나 애플리케이션에 로그인할 수 있게 해주는 인증 방식

용어 정리

OAuth 2.0

• 인증을 위한 산업 표준 프로토콜
• 사용자의 비밀번호를 공유하지 않고도 제3자 애플리케이션에 사용자 데이터에 대한 제한적 접근 권한을 부여할 수 있게 한다.

Authorization Code

• 사용자가 리소스 접근을 승인했다고 증명하는 짧은 수명의 코드
• OAuth2.0 프로토콜 중 가장 안전한 방식이며 웹 애플리케이션에서 주로 사용됨
• 역할
  • 사용자 동의 증명
  • 보안 강화
    • CSRF 방지: state 파라미터와 함께 사용되어 크로스 사이트 요청 위조 공격을 방지

OpenID Connect Provider (인가 서버)

• OpenID: 사용자 인증을 위한 개방형 표준 프로토콜
• 역할
  • 인증 요청 처리
  • 로그인 및 권한 동의 프로세스 관리
  • Authorization Code 발급
  • 토큰(액세스 토큰, ID 토큰*) 발급
• ID 토큰?
  • JWT
  • 사용자 식별 정보를 포함
  • 사용자 인증을 위한 토큰

전체적인 흐름(다이어그램)

1. 사용자는 웹사이트에 로그인하기 위해 소셜 로그인을 클릭한다.
2. 웹사이트(프론트엔드)는 사용자를 인가 서버(구글의 OpenID Connect Provider)로 리디렉션한다.
   • client_id, redirect_uri, scope, response_type 등의 파라미터를 포함한다.
3. 인가 서버는 사용자에게 구글 로그인 화면을 보여주며 로그인, 권한 동의 과정을 거친다.
4. 인가 서버는 인증과 권한을 증명하는 Authorization code를 지정된 redirect_uri로 전달한다.
5. 프론트엔드는 Authorization code를 백엔드로 전달한다.
6. 백엔드는 Authorization code를 다시 인가 서버로(위임 받은 서버임을 증명) 보내면서 토큰을 요청한다.
7. 인가서버는 Authorization code로 증명된 해당 백엔드 서버에 토큰을 발급한다.
8. 백엔드는 토큰을 가지고 리소스 서버에 요청을 보내고 데이터를 받는다.
9. 데이터를 프론트엔드로 보낸다.
10. 프론트엔드는 사용자에게 데이터를 기반으로 서비스를 제공한다.