[nodeJS] passport kakao 회원가입 후 자동 로그인 구현하기

소면(Somyeon)
3 min readJun 23, 2021

--

nodeJS에서 passport-kakao를 이용하면 카카오 REST API를 이용한 회원가입과 로그인을 구현할 수 있다. passport-kakao가이드에는 카카오 로그인 시도 시 회원가입이 되어있지 않다면 백엔드에서 자동으로 회원가입을 시켜준다. 나는 이 방법 대신 사용자에게 회원가입을 할 수 있는 선택권을 넘겨주고 싶었다.

카카오 로그인 시도 시 가입된 회원 정보가 없다면 카카오에서 전달받은 사용자 정보를 담아 회원가입 페이지로 리다이렉트 한다. 사용자는 카카오 프로필이 디폴트로 설정된 회원가입 페이지에서 직접 프로필 사진이나 닉네임을 설정할 수 있다. 회원가입이 완료되면 자동으로 로그인 한다.

아래와 같은 로직으로 진행되는 것이다.

회원정보 존재 여부 확인하기 (/passport/kakaoStrategy.js)

먼저 사용자가 로그인을 시도하면 passport-kakao 전략의 콜백함수에서 등록된 회원 정보를 찾는다. passport-kakao 전략 가이드에서는 회원 정보가 없을 경우 서버에서 직접 회원가입을 진행한 뒤 done 메소드의 두번째 인자로 사용자 정보를 전달한다. 하지만 우리는 사용자가 직접 회원가입을 하도록 만들기 위해 등록된 회원 정보가 없을 경우에도 클라이언트에 사용자 정보를 전달해줘야 한다. done 메소드의 두번째 인자에는 null을, 세번째 인자에 사용자 정보 객체를 담아 보내준다.

클라이언트에 사용자 정보 전달하기 (/routes/auth.js)

passport-kakao 전략을 거치면 사용자는 카카오 REST API 파라미터에 전달해줬던 redirect_uri 로 리다이렉트 된다. 해당 url의 라우팅 함수에서는 passport-kakao 전략에서 전달한 사용자 정보를 받고, 이 정보를 담은 세션을 생성한다. 세션이 생성되면 클라이언트를 회원가입 페이지로 리다이렉트 시킨다.

그럼 아래와 같이 브라우저에는 세션 쿠키가 생성되고 회원가입 페이지에 사용자 정보가 들어가 있다.

세션 쿠키가 생성되었고
회원가입 페이지. 프로필 이미지, 이메일 주소, 닉네임을 노출시킨다.

회원가입 진행 후 자동 로그인하기 (/routes/user.js)

이제 사용자는 원하는 프로필 이미지와 닉네임을 설정한 뒤 해 회원가입을 진행한다. 회원가입 라우터에서는 회원 정보를 DB에 등록하고, 회원가입한 사용자 정보로 새로운 세션을 생성한다. 먼저 기존 회원가입을 위해 만들었던 세션을 지우고자 req.session.regenerate 메소드를 호출하고, 해당 콜백함수에서 req.login 메소드를 호출해 새로운 세션을 생성한다.

클라이언트는 백엔드서버로부터 성공 응답을 받으면 메인 페이지로 리다이렉트 한다. 이때 클라이언트는 로그인 정보가 담긴 세션 쿠키를 갖고있으므로 백엔드서버로부터 사용자 정보를 전달 받아 로그인 상태가 된다.

끝.

--

--