내가 사이드 프로젝트로 진행하던 웹에서 일명 "구글로 로그인하기" 기능을 개발 하였고, 해당 로직을 어떻게 구현 하였고 어떻게 흘러가는지 정리 해 보려고 한다.
이렇게 로그인 기능만 따로 정리하는 이유는 우리같은 주니어 개발자에겐 로그인 기능의 개발은 상당히 어렵기 때문이다.
또한 로그인 기능은 웬만한 서비스에서 빠질 수 없는 기능이기 때문에 중요한 기능의 일부 이기도 하다.
구글로 로그인 하기
대부분의 서비스에서는 다른 플랫폼의 계정(google, kakao 등)을 사용하여 로그인 할 수 있는 편의기능을 제공한다. 이것은 사용자에게 쉽고 빠르게 로그인할 수 있는 효율적인 방법이다.
이러한 기능을 Oauth라고 한다. 정의를 살펴보면 다음과 같다.
OAuth
인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.
나는 이 글을 작성할 당시에는 Google OAuth만 구현해 봤고, 다음으로는 Kakao Oauth를 구현해 볼 계획에 있다.
인증 구현은 어렵다
인증 기능을 구현하기 위해 상당히 많은 개념을 같이 알아야 한다. jwt와 세션 방식, 쿠키, local storage, http 통신, 상태 코드, 쿠키 설정, Authorization 요청 헤더, 암호화, 복호화 등 단순히 하나만 배워서 구현할 수 있는 부분이 아니다.
구글이 대신 인증해주는 방법
구글 OAuth를 express에서 구현하는 방법에 대해서는 많은 게시글들이 있을 것이고, 나 또한 포스팅을 할 계획이 있다. 따라서 코드 대신 간단한 이론적인 흐름만 알아보겠다.
구글 OAuth를 사용했을 때, 구글에서 해주는 기본적인 것은 다음과 같다.
- 구글 로그인 폼을 응답해 준다.
- 사용자가 구글 폼으로 로그인을 성공했다면, 개발자가 설정한 도메인과
code라는 키 값의 쿼리 스트링이 담긴 URL로 리다이렉트 해준다. - 개발자는
code키 값의 쿼리 스트링을 추출하여 구글 api를 통해 구글의 계정 정보를 받는다.
응답받는 구글 계정 정보는 이메일 주소, 이름 등이 포함되며, 당연히도 비밀번호 같은건 담겨있지 않는다. 이 모든 것은 구글 라이브러리 또는 api로 다 제공 된다.
※ redirect
쉽게 말해 특정 URL로 이동시켜 준다는 의미이다.
전체적인 로그인 흐름
이제 본격적으로 "구글로 로그인 하기" 기능을 사용했을 경우의 전체적인 흐름도를 살펴보자.
로그인 인증 흐름(Google OAuth 포함):
- Client: 구글로 로그인하기 요청 (구글 버튼 누르기)
- Server: 구글 로그인 폼 URL 응답
- Client: 구글 계정 로그인 (구글에 요청)
- Google Server: 개발자가 지정한 URL로 Redirect 응답
- Client: Redirect된 URL로 이동, 해당 URL에서는
code라는 키 값의 쿼리 스트링도 받음 - Client: Redirect된 URL에
code라는 키의 쿼리 스트링를 갖고 서버에 요청 - Server: Google Api를 통해
code를 사용하여 구글 계정 정보를 획득 - Server: 구글 계정 정보를 통해 DB에 계정이 있는지 확인 후, 회원가입 or 로그인을 결정
- Server: 회원가입 및 로그인 성공 후,
accessToken과refreshToken을 발급하여 클라이언트에 쿠키의 형태로 전송 - Client: 응답받은 쿠키를 통해 페이지를 이동할 때마다 인증 (즉, 서버에게 클라이언트가 누군지 계속 알려줌)
※ 토큰 만료와 재발급
accessToken이 만료될 시, accessToken을 재발급한다. refreshToken이 만료될 시, 로그인 해제하여 재로그인을 유도한다.
추가적으로 알게된 것
쿠키, jwt, express 구축 등 여러가지를 배운 후에 구현에 들어가고, 인증에 대해 아는척 할 정도 됐다고 생각했을 때 에러 및 불편함 겪고 새롭게 알게된 것 들이다.
- 쿠키 credential
- axios interceptor
나는 독학으로 인증의 전체적인 풀스택 흐름을 공부했기 때문에, 나의 방식이 정확히 올바른 방식이라고 확신을 줄 수 없다. 따라서 여러가지의 자료를 찾고, 좋은 코드를 찾는 것이 중요할 것 같다.
