본문 바로가기
Develop/Web

MERN (MongoDB Express React NodeJS) - 구글 로그인과 토큰 관리에 대하여

by 라이프레이서 2021. 4. 30.

목차

    반응형

    MERN 프로젝트를 진행하며 구글 소셜 로그인에 대해 다루어보았다.

    소셜 로그인에 대해 어떻게 토큰을 관리해야 하는건지에 대해 알아보는데에 많은 시간이 들었는데, 큰 그림이 머릿속에 그려져 있었다면, 보다 빠르게 문제를 해결할 수 있지 않았을까 생각이 들었다.

    이 포스팅에서는 큰 그림에 해당하는 부분을 기록해두고자 한다.

     

    0. 역할

    소셜로그인을 구현하며, 다양한 방법들을 접했다.

    웹에서 소셜로그인을 하고, 해당 결과를 서버에 보내주는 방식,

    웹에서는 서버에 요청을 하고, 서버에서 소셜로그인을 인지하여 구글과 데이터를 주고받는 방식

    크게 위와 같이 두 가지 방법이 존재 했으나, 필자는 전자의 방식대로 진행하였다.

    클라이언트 (웹 페이지)에서 구글에 로그인하여, 인증을 진행한다.
    구글 로그인 성공시 받은 데이터를 서버에 전달하고, 이를 성공했다는 표시와 함께 토큰을 전달

    이 과정에서 자연스레 '토큰'이라는 녀석에 대해 궁금증이 생겼다.

     

    1. 토큰이란 무엇인가?

    애플리케이션을 이용하다보면, 회원가입을 해야 이용 가능한 서비스를 찾아볼 수 있다.

    한 가지 예로, 로그인 된 유저만 상품을 구매 가능한 경우를 살펴보자.

    위와 같이, 토큰이라는 녀석이 있는 사람만 특정 행동을 가능하도록 허용해준다.

    토큰은 일종의 권한을 갖고 있다는 증표라는 말이다.

     

    왜 토큰을 사용하는걸까?

    아이디 비밀번호 주고 받는 방식이 아니라 왜 토큰을 주고 받는것인가?

    이는 보안 문제 때문이다.

    매번 아이디와 비밀번호를 주고받다 보면, 해킹의 위험에 노출되기도 쉽고, 이렇게 한 번 털린 계정은 다른 사이트들에서도 비슷하게 털리기 쉽기 때문이다. (대부분의 사람이 여러 사이트에서 유사한 아이디, 비밀번호를 이용하기 때문)

    때문에 아이디 비밀번호가 아닌 토큰이라는 인증서를 발급해주고 이를 주고받게 된다.

     

    문제는 이 토큰이라는 것에 유효 기간이 있다는 점이다.

    서비스마다 설정한 토큰의 유효 기간이 다르다.

    이 토큰이 만료가 되면, 다시 토큰을 발급받아야 한다. (다시 로그인을 하는 서비스를 떠올려보자)

     

    그렇다면 소셜로그인에서 이야기하는 토큰을 어떻게 처리할지가 의문.

     

    2. 구글에서 받은 토큰

    그렇다면 구글에서 받은 토큰을 서버에 전달하고 해당 토큰을 이용하여 권한을 인정받는다는 흐름인가? 하는 생각이 들 수 있다.

    결론부터 말하자면, 아니다.

    구글에서 받은 토큰은 "너가 인증한 구글 계정이 맞아"라는 인증서일 뿐, 우리가 이용해야 할 서버에서는 따로 토큰을 발급해주어야 한다.

    구글 계정 로그인을 이용하는 이유는 해당 사용자의 정보 (이메일, 이름, 닉네임, 프로필 사진 등)를 받아오기 위함일 뿐이다.

    때문에 서버에서 새로 토큰을 만들어주고, 관리를 할 필요가 있다는 것이다.

    이 때 JSONWEBTOKEN 이라는 것을 이용하여 토큰을 주고 받는데, 이에 대해서는 다음에 알아보도록 하겠다.

     

    3. 그래서 토큰의 전체 흐름이 어떻게 되는가?

    구글로그인 이후 토큰을 발급받는 흐름은 다음과 같다.

    1. 받은 데이터를 서버에 전달

    2. DB에 사용자 정보 저장

    3. 토큰 생성

    4. DB에 저장이 성공하면 클라이언트로 토큰 전달

    5. 클라이언트에서 받은 토큰을 저장

    6. 해당 토큰을 이용하여 권한 인증하면서 통신

     

    반응형