주요 내용으로 건너뛰기

Passport.js 완벽 가이드

passport.js 쉽게 도입하기

Passport.js 를 설명하는 블로그 글은 굉장히 많으니 전체적인 과정보다는 원리/가장 시간이 많이 드는 세부적인 문제 위주로 글을 작성하려고 한다.

이전 포스트에서도 지적했듯이 Passport.js 튜토리얼을 따라가다 보면 얼마 안 돼서 문제점이 생기기 마련이다. 

그럴때마다 Stackoverflow를 해매보지만 정작 원하는 답변은 안 나오는 경우가 많다. 물론 언어의 장벽 또한 에러 해결을 어렵게 한다.

그렇다면 어떤 부분이 Passport.js 를 우리의 어플리케이션으로 가져오는데 방해가 될까?


1. Session

 가장 잦은 실수가 일어나는 부분은 Session 관리 부분이다. 

보통 Mongodb 의 uri가 잘못 입력된다거나 혹은 Redis store의 포트를 잘못 입력한다든가 하는 식으로 저장소 관련된 문제가 발생할 경우,

deserialize user, 즉 req.user 객체에 user 정보가 제대로 전달되지 않는 문제가 발생한다. 만약 이런 문제가 발생할 경우 db 설정을 잘 살펴보자.

혹은 CORS, 즉 서로 다른 호스트 혹은 포트에서 api 요청을 할 때도 이런 문제가 발생한다.

이 경우 cors 모듈(https://www.npmjs.com/package/cors)을 사용할 수 있다.

다만 보안 취약점이 될 수 있으므로 되도록이면 개발환경에서만 사용하도록 하자.


2. No User

다음으로는 유저가 디비에 제대로 저장이 안 되는 경우다.

이 경우 유저 스키마를 잘 살펴보자. 대부분 디비 구조에 맞지 않게 유저를 저장하려고 할 때 이런 문제가 잘 발생한다.



3. Naver, Facebook 등 소셜 로그인이 안 되요 ..ㅜ

아마 해매기 시작하면 가장 많은 시간을 헤맬 구간이 아닐까 싶다.

로컬 로그인은 꽤나 단조로운 패턴으로 구현이 가능하기 때문에 좀만 신경쓰면 금방 할 수 있지만

소셜 로그인의 경우 체크해줘야 할 것이 꽤 많다.

1. 네이버

가장 흔한 에러는 아마 XX에 로그인할 수 없습니다. 일 것이다.


부들부들 ..
부들부들 ..

내가 무슨 잘못을 한 것일까 싶겠지만 진정하자. 

아마 대부분 localhost를 서비스 URL로 입력했기 때문에 생기는 문제일 것이다.

혹은 callbackURL을 잘못 적는 경우도 있다.

서비스 URL의 경우 http://127.0.0.1:포트번호 로 입력해주자. 

포트번호를 잘못 적는 경우에도 위의 메세지를 볼 수 있다. 조심하자;;

그리고 맞는 주소로 수정하더라도 바로바로 적용이 안 되는듯 하니 조금 인내심을 가지고 기다려보자..

그래도 삽질만 안 하면 금방 할 수 있으니 거기에 만족하자. 


2. 페이스북

어렵지는 않다. 다만 헷갈린다. 많이 ..

초기 설정
초기 설정

여기서는 좌측의 설정 - 기본설정을 들어가서 아랫쪽의 플랫폼 추가를 통해 웹 환경을 추가하고 http://localhost를 추가한 뒤 앱 도메인에는 localhost를 준다.


하단의 유효한 OAuth 리디렉션 URI
하단의 유효한 OAuth 리디렉션 URI

그 다음 Facebook 로그인의 클라이언트 oauth 설정 부분에서,

유효한 OAuth redirect URI 부분에 우리의 callbackURL을 추가해주면 끝!


마무리:

Passport.js 쉽게 사용할 수 있다. 

제발 해매지 말고 하나 하나 차근 차근 살펴보자. 

많은 실수는 위의 것들에서 일어난다. 한 번씩 점검해보자

시간 없는 바쁜 현대 개발자들을 위해 es6/babel/passport-local/passport-social(naver, facebook)/redis/csrf를 적용해서 인증 boilerplate를 마련했다.

완성품은 링크(https://github.com/leejh3224/Complete-Guide-Passport.js) 를 가면 볼 수 있다.


이준형 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.