본 글에서는 인증 정보를 외부 저장소에서 받아와서 인증하는 방법을 알아봅니다. 1편에서는 개방형 인가 표준인 OAuth를 알아보고, 구글의 OAuth 서비스를 사용하기 위한 준비 방법을 알아보겠습니다.
학습 코스
OAuth 소개
OAuth는 Open Authorization의 약자로서 2006년에 구글과 트위터가 만든 개방형 인가의 표준입니다. 최근의 웹사이트들은 네이버, 구글, 페이스북, 카카오톡 로그인을 지원하는 경우가 많습니다. 바로 소셜 로그인 기능입니다. 소셜 로그인은 유저가 해당 웹사이트에 가입한 ID와 패스워드 대신 다른 사이트에 있는 유저 정보를 사용해 인증하는 기능입니다.
▼ 소셜 로그인을 지원하는 서비스 예시
인증을 구현하기 위해 OAuth를 많이 사용하긴 합니다만, OAuth는 인증이 아니라 인가의 관점에서 보아야 합니다. 소셜 로그인 후 팝업이 뜨면서 권한을 요청하는 화면을 보신 적이 있을 겁니다. 이때 인증에 필요한 정보인 이름, 이메일 정보 등을 다른 사이트에 요청합니다.
▼ 인증 요청 예시
OAuth는 1.0, 2.0, 2.1 버전이 있으며 현재 2.0 버전을 가장 많이 사용합니다. 별도의 언급이 없다면 이 책에서 OAuth는 OAuth 2.0을 말합니다. OAuth 2.0 OAuth2로 표기해 사용하기도 합니다. 정확한 사양은 RFC 67491에 정리되어 있습니다.
OAuth2를 본격적으로 알아보기 전에 인증, 인가, 액세스 토큰(access token), 리프레시 토큰(refresh token) 등의 주요 용어부터 알아봅시다.
- 인증: 리소스에 접근 자격이 있는지 검증하는 과정입니다. OAuth에서 리소스는 보호된 정보를 의미합니다.
- 인가: 자원에 접근할 권한을 부여하는 과정입니다. 인가가 완료되면 리소스의 접근 권한 정보가 있는 액세스 토큰을 클라이언트에게 보내줍니다.
- 액세스토큰: 리소스 서버에서 리소스 소유자의 보호된 정보를 획득할 때 사용하는 만료 기간이 있는 토큰입니다.
- 리프레시 토큰: 액세스 토큰이 만료되었을 때 갱신하는 용도로 사용하는 토큰입니다. 액세스 토큰보다 만료 기간을 길게 가져갑니다.
- 리소스소유자(resource owner): 리소스는 사용자의 보호된 정보를 말하며 이런 정보에 접근하도록 자격을 부여하는 사람을 말합니다. 즉 ‘OAuth에서는 사용자가 리소스 소유자다’라고 생각하면 됩니다.
- 클라이언트: 리소스를 사용하려고 접근을 요청하는 애플리케이션을 의미합니다.
- 리소스 서버(resource server): 사용자의 보호된 자원을 가지고 있는 서버입니다.
- 인가 서버(authorization server): 인증/인가를 수행하는 서버로 클라이언트의 접근 자격을 확인하고 액세스 토큰을 발급해 권한을 부여합니다.
인가 서버와 리소스 서버의 조합을 OAuth2 프로바이더라고 부르기도 합니다.
OAuth 프로토콜 흐름
용어를 살펴봤으니 OAuth 프로토콜의 흐름을 알아보겠습니다.
▼ OAuth 프로토콜의 흐름
❶ 클라이언트가 리소스 소유자에게 권한 부여를 요청합니다. ❷ 클라이언트는 권한을 부여받습니다. 권한 부여 유형은 다음과 같이 4가지입니다.
- 인증 코드(Authorization Code) 사용하기
- 암묵적인(Implicit) 방법
- 리소스 소유자의 암호 자격증명(Resource Owner Password Credentials)
- 클라이언트 자격증명(Client Credentials)
구글 인증에는 인증 코드 방법을 사용합니다. ❸ 클라이언트는 ❷에서 받은 정보를 통해 액세스 토큰을 인가 서버에 요구합니다. ❹ 인가 서버에서는 클라이언트를 인증하고 유효성 검사를 합니다. 유효한 경우 액세스 토큰을 발급합니다. ❺ 클라이언트가 리소스 서버에 보호된 리소스를 요청합니다. 요청 시에는 액세스 토큰을 사용합니다. ❻ 리소스 서버는 액세스 토큰의 유효성을 검사하고유효한 경우 보호된 자원 정보를 보내줍니다.
액세스 토큰을 재발행하는 흐름
다음으로 액세스 토큰 만료 시 리프레시 토큰을 사용해 액세스 토큰을 재발행하는 흐름을 알아보겠습니다.
▼ 액세스 토큰 만료 시 리프레시 토큰을 사용한 액세스 토큰 재발행 흐름
❶ 클라이언트는 인가 서버에 인증을 하고 액세스 토큰을 요청합니다. ❷ 인가 서버는 클라이언트를 인증하고 유효성 검증을 한 후에 문제가 없으면 액세스 토큰과 리프레시 토큰을 발급합니다. ❸ 클라이언트가 리소스 서버에 액세스 토큰을 보내면서 보호된 리소스를 요청합니다. ❹ 리소스 서버가 액세스 토큰의 유효성을 검증하고 유효한 경우 리소스를 내려줍니다. ❸ 과 ❹ 단계는 액세스토큰이 만료될 때까지 반복됩니다. ❺ 액세스 토큰 만료 시에도 클라이언트는 액세스 토큰을 리소스서버에전달하기도합니다.클라이언트가액세스토큰이만료된것을알고있다면 ❼로 가게 되고, 모른다면 만료된 액세스 토큰을 전달합니다. ❻ 리소스 서버에서는 액세스 토큰이 만료되었으므로 잘못된 토큰 에러를 발생시킵니다.
❼ 클라이언트에서는 액세스 토큰이 만료되어 에러가 발생했으므로 리프레시 토큰을 인가 서버로전달해 새 액세스 토큰을 요청합니다. ❽ 인가 서버는 리프레시 토큰이 유효한 경우 새로운 액세스토큰을 발급해줍니다. 선택적으로 리프레시 토큰도 재발급합니다.
OAuth의 프로토콜의 흐름을 알아보았습니다. 이어서 Nest.js에서 OAuth를 사용해 어떻게 인증을 구현하는지 알아봅시다.
구글 OAuth를 사용하기 위한 준비하기
클라이언트에서 구글의 OAuth 인가 서버에 접속하려면 OAuth 클라이언트 ID와 비밀번호가 필요합니다. 이를 위해서는 ❶ 구글 클라우드에서 프로젝트를 생성하고, ❷ OAuth 동의 화면을 생성하고, ❸ 클라이언트 ID를 생성해야 됩니다.
구글 클라우드에서 프로젝트 생성하기
Todo
01 브라우저로 구글 클라우드(console.cloud.google.com/)에 접속해 로그인합니다. 가입하지 않은 분들은 안내에 따라 가입을 진행하고 나서 로그인해주세요.
02 ❶ [프로젝트 선택] → ❷ [새 프로젝트]를 클릭합니다.
03 프로젝트명을 ❶ 에 입력하고 ❷ [만들기]를 클릭합니다. 그러면 프로젝트가 생성됩니다.
OAuth 동의 화면을 만들기
Todo
01 프로젝트명을 ❶ 에 입력하고 ❷ [만들기]를 클릭합니다. 그러면 프로젝트가 생성됩니다.
02 OAuth 동의 화면에서 1 ‘외부’를 선택하고 2 [만들기]를 클릭합시다.
03 필수값인 ❶ 앱 이름, ❷ 사용자 지원 이메일, ❸ 개발자 연락처 정보만 입력하고 ➍[저장후계속]버튼을 클릭합시다.
04 ‘범위’에서는 설정 없이 [저장 후 계속] 버튼을 눌러주세요.
05 ‘테스트 사용자’에서도 설정 없이 [저장 후 계속]을 눌러서 진행해줍니다.
06 OAuth 동의 화면 설정에 대한 ‘요약’ 화면이 보이면 완성입니다. [대시보드로 돌아가기] 버튼을 눌러주세요.
OAuth 클라이언트의 ID와 비밀번호 만들기
Todo
01 왼쪽 메뉴에서 ❶ [사용자 인증 정보] → ❷ [사용자 인증정보 만들기] → [OAuth 클라이언트 ID]를 눌러서 인증 정보 설정 화면으로 이동합니다.
02 OAuth 클라이언트 ID 만들기입니다. ❶ ‘애플리케이션 유형’을 ‘웹 애플리케이션’으로 선택해주세요. ❷ ‘승인된 자바스크립트 원본’에는 서버 주소를 입력합니다(여기서는 https://localhost:3000으로 했습니다). ❸ ‘승인된 리디렉션 URI’에는 구글 인증 후 리디렉션할 URL을 입력해줍니다(여기서는 http://localhost:3000/auth/google로 했습니다). ❹ [만들기] 버튼을 클릭해서 OAuth 클라이언트를 생성합니다.
OAuth 클라언트가 생성됐다는 팝업이 뜹니다. 클라이언트 보안 비밀번호는 절대로 유출되면 안 되니 주의해야 합니다.
이제 구글 OAuth를 사용할 수 있는 준비가 되었습니다.
2편에서는 본격적으로 구글 OAuth 구현하고, 테스트해 봅시다.
2편을 진행하기에 앞서 《[되기] Node.js 백엔드 개발자 되기》의 9장과 10장을 참고하면 더 쉽게 학습 코스를 따라오실 수 있습니다.
