[Next.js] Authorization Code

기술면접 예상 질문: 

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

 

구글 소셜 로그인을 OpenID Connect (OIDC)와 Authorization Code Flow를 사용하여 구현하는 과정은 다음과 같은 단계로 이루어집니다. 이 과정에는 유저, 프론트엔드, 백엔드, 그리고 OpenID Connect 프로바이더(Google)가 서로 상호작용합니다.

 

1. 유저가 로그인 버튼 클릭

유저가 프론트엔드 애플리케이션에서 "구글로 로그인" 버튼을 클릭합니다.

2. Authorization Request

프론트엔드 애플리케이션은 구글의 Authorization Endpoint로 리디렉션합니다. 이 요청에는 다음과 같은 정보가 포함됩니다:

• 클라이언트 ID (애플리케이션 식별자)
• 리디렉션 URI (구글이 인증 후 리디렉션할 URI)
• 응답 타입 (code)
• 스코프 (요청하는 권한 범위, 예: email, profile)
• 상태 (CSRF 공격 방지를 위한 임의의 값)

예시 URL:

perl코드 복사
<https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=openid%20email%20profile&state=RANDOM_STATE>

3. 유저 인증 및 동의

구글 로그인 페이지가 나타나며, 유저는 구글 계정으로 로그인하고 애플리케이션이 요청한 권한을 허용합니다.

4. Authorization Code 발급

유저가 인증하고 권한을 허용하면, 구글은 지정된 리디렉션 URI로 Authorization Code를 포함하여 리디렉션합니다.

예시:

css코드 복사
YOUR_REDIRECT_URI?code=AUTHORIZATION_CODE&state=RANDOM_STATE

5. Authorization Code 수신

프론트엔드 애플리케이션은 리디렉션된 URI를 통해 Authorization Code를 수신합니다.

6. Authorization Code를 백엔드로 전달

프론트엔드 애플리케이션은 이 Authorization Code를 백엔드 서버로 전달합니다.

7. 토큰 요청

백엔드 서버는 Authorization Code를 사용하여 구글의 Token Endpoint로 Access Token 및 ID Token을 요청합니다. 이 요청에는 다음 정보가 포함됩니다:

• 클라이언트 ID
• 클라이언트 시크릿 (비밀키)
• Authorization Code
• 리디렉션 URI
• grant_type (authorization_code)

예시 요청:

bash코드 복사
POST <https://oauth2.googleapis.com/token>
Content-Type: application/x-www-form-urlencoded

code=AUTHORIZATION_CODE
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
&redirect_uri=YOUR_REDIRECT_URI
&grant_type=authorization_code

8. 토큰 응답

구글은 백엔드 서버에 Access Token, ID Token, Refresh Token 등을 포함한 응답을 보냅니다.

예시 응답:

json코드 복사
{
  "access_token": "ACCESS_TOKEN",
  "expires_in": 3599,
  "refresh_token": "REFRESH_TOKEN",
  "scope": "openid email profile",
  "token_type": "Bearer",
  "id_token": "ID_TOKEN"
}

9. 유저 정보 확인

백엔드 서버는 ID Token을 검증하고, 디코딩하여 유저의 정보를 확인합니다. 이 과정에서 유저의 구글 프로필 정보를 추출할 수 있습니다.

10. 세션 생성 및 응답

백엔드 서버는 유저 정보를 바탕으로 세션을 생성하고, 유저가 로그인된 상태로 프론트엔드에 응답합니다.

11. 유저에게 로그인 상태 반영

프론트엔드 애플리케이션은 백엔드로부터 받은 세션 정보나 토큰을 저장하고, 유저에게 로그인 상태를 반영합니다. 유저는 이제 애플리케이션에 로그인된 상태로 다양한 기능을 사용할 수 있습니다.

이와 같이, Authorization Code Flow를 통한 구글 소셜 로그인 과정은 유저, 프론트엔드, 백엔드, 그리고 구글 서버 간의 일련의 요청과 응답을 통해 이루어집니다. 이 과정에서 보안과 유저의 편의를 모두 고려한 설계가 필요합니다.