04. OAuth

개요

Jiary 프로젝트는 Google Docs를 사용해서 유저의 서비스를 제공합니다. 이번에 Next.js를 사용해보면서, 프론트엔드에서만 유저가 생성하는 데이터를 저장하고 싶은데, 브라우저 저장소 외 다른 곳은 없을까 생각해보다가 Google Drive API를 사용해 데이터를 저장하기로 했습니다.

Jiary에서 유저의 Google Docs에 접근하기 위해서는, 유저가 Google에 로그인이 되어 인증을 받은 상태여야 했습니다. 따라서, 인가된 서비스인 Google Docs API를 사용하기 위해 OAuth 인증이 필요합니다.

또한 추가적으로 Refresh Token을 도입해, 토큰이 만료되면 Axios Interceptor에서 다시 백엔드로 요청을 보내고, 백엔드에서 인증 서버로 새로운 토큰을 받아올 수 있도록하는 작업이 필요합니다.

용어 설명

1. Resource Owner

리소스 오너는 유저입니다. Jiary 서비스를 사용하는 사람을 말합니다. 용어에서 말하는 Resource란, 예를 들어 Google Drive의 리소스를 말하는데, 유저가 미리 만들어둔 문서일 수도 있고, 앞으로 우리 서비스를 통해 만든 문서일 수도 있습니다.

2. Resouce Server

리소스 서버는 provider의 서버입니다. Google, Facebook, Twitter등 기업에 Jiary 어플리케이션이 접근해서 Resouce를 가져와야 하는 것을 생각하면 됩니다.

3. client

클라이언트는 우리가 만든 어플리케이션입니다. Resouce Owner를 대신해서 Resouce Server에 접근해 리소스를 가져오고 표현할 수 있습니다. 웹 어플리케이션이 될 수도 있고, 데스크톱 어플리케이션일 수 있고, 모바일 어플리케이션이 될 수 있습니다.

4. Authorization Server

인가 서버는 Resouce Server와 마찬가지로 provider의 서버입니다. 단, Resouce Server는 '리소스'를 내려주는 서버이며, Authorization Server는 단순히 인증 및 인가만을 담당합니다. Google Drive, Google Docs, Google Calendar 등의 API의 Resource를 사용할 수 있습니다.

프로세스

로그인 과정

1. 유저가 로그인 페이지에 접속하면 Next.js 백엔드에 Google 로그인 팝업을 띄우기 위한 URL을 요청합니다.
2. 백엔드에는 Google 인증을 위한 인증 어플리케이션 Code와 어떤 서비스를 사용할 것인지에 대한 정보를 담은 scope 데이터가 존재합니다. 이를 토대로 로그인 URL을 보내줍니다.
3. URL을 전송받으면 URL로 Google 로그인 팝업을 띄웁니다.
4. 유저가 Google ID/PW를 입력받고 Google에서 보내준 Redirect URL로 이동합니다.
5. Redirect URL은 팝업에 적용되고, 팝업이 Redirect URL에서 받은 Authorization Code를 Jiary 로그인 화면으로 message를 보냅니다.
6. message를 수신하면, Next.js 백엔드로 Authorization Code를 전송합니다. 그래야 Refresh Token을 받을 수 있습니다.
7. 백엔드에서는 Authorization Code로 Google 인증 서비스에 Access Token을 요청합니다.
8. Access Token을 제공 받습니다.
9. 백엔드에서 플라이언트로 cookie에 전달 받은 Access Token을 제공해줍니다.
10. 이제 인가된 Google 서비스를 이용할 수 있습니다. HTTP 헤더에 Token을 제공하면, 인가된 Google API 서비스에서 사용자를 구분해 사용자의 resource를 내려주게 됩니다.

Refresh Token으로 Token을 얻는 과정

Access Token의 최대 만료 시간은 1시간 입니다. 1시간 마다 새로운 Access Token을 Google에 제공해주어야 Google 서비스를 지속해서 사용할 수 있습니다. 유저가 다시 로그인 하여 Access Token을 얻는 방법이 있고, 백엔드를 통해 Refresh Token으로 Access Token을 갱신하는 방법이 있습니다. Jiary에서는 Refresh Token으로 Access Token을 갱신하는 방법을 사용합니다.

1. Google 인가 서비스에 Access Token을 Header에 포함해 요청합니다.
2. Access Token이 1시간이 지나 만료되어 거부 됩니다.
3. 클라이언트의 Axios Interceptor에서 HTTP Statue Code로 판별하여 백엔드로 새로운 Access Token을 요청합니다.
4. 백엔드에서 Access Token을 통해 유저의 Refresh Token을 검색하고, 찾은 Refresh Token으로 Google 인증 서비스에 새로운 Access Token을 요청합니다.
5. Google에서 새로운 Access Token을 내려줍니다.
6. 백엔드가 Axios Interceptor에게 새로운 Access Token을 제공합니다.
7. Axsios Interceptor가 Google의 인가 서비스에 다시 새로운 Access Token으로 서비스를 요청합니다.
8. 요청이 정상적으로 이루어집니다.