Express - passport JS && Local Authentication

자 이제 사용자 인증을 쉽게 구현해 줄 passport Js를 사용해 봅시다.

 

앞서 포스팅한 쿠키와 세션인증을 도와줄 녀석이다.

자 쿠키와 세션 다시 한번 복기 하자.

유저를 기억하는 방법중 한가지는 유저에게 쿠키를 보내주는 것이다.

세션은~~ 서버와 브라우저간에 어떤 활동을 했는지 기억하는 것을 말한다.

어떤 사이트에 로그인 했다면 현재 사용하고 있는 브라우저와 내가 만든 백엔드 사이에 세션이 존재한다.

세션은 유효기간이 있기 때문에 일정시간이 지나면 사라진다.

http는 stateless이기 때문에 브라우저와 서버가 한번의 요청과 응답이 끝나고나면 session이 종료된다.

유저가 백엔드에 요청을 할때마다 누가 요청했는지 지속적으로 알 수 있어야 하는데

이것을 유지시켜 주기 위해 세션Id를 쿠키에 담아 기억할 수 있게 해주는 것이다~

 

Passport를 통해 브라우저에서 자동으로 쿠키를 가져와서~ 인증하고 인증이 완료되면 인증된 user object를 컨트롤러에 넘겨 준다

뭐랄까 쿠키를 생성하고 브라우저에 저장하고~~ 인증하고 하는 것을 passport가 다 해주는 것이다.

 

표현력을 키워서 차후에 수정하자 ㅠㅠ

 

자 이제 passport를 설치하는 중요한 이유인 user모델을 만들자.

user정보를 db에 저장해야 하니까..

이제 유저 모델을 만들자~

 

mongoose를 import해주고서~ 

유저 스키마를 만들어 준다.

avartarUrl은 소셜계정 로그인을 위한 Url이다 : fileUrl과 가은 방식이다. 그리고 모델 생성후 export

그리고 init에 import 해준다.

이제 여기서 필요한 passport-local-mongoose를 설치하자~~~

passport-local-mongoos모듈은 쉽게 말해 사용자 기능을 추가해준다. 예를들어 기본적인 사용자 인증에 필요한 이를 테면

패스워드 변경, 확인, 생성, 암호화 같은 기능을 가지고 있다.

 

Passport-Local Mongoose is a Mongoose plugin that simplifies building username and password login with Passport.

이름이 길다. 암튼 passport-local-mongoose는 passport와 함께 사용자 이름 및 암호 로그인을 쉽게 구축하는 플러그인 이다~

이름이 기니까 PLM으로 줄여쓰겠다.

 

npm install passport-local-mongoose - 설치

 

자 설치가 완료 되었으면 import 해주고 유저스키마에 플러그인을 해준다. 

PLM은 설정객체가 필요하다 . 여기서는 usernameField라는 설정 객체를 만들어 준다.

이메일을 설정객체로 지정 해주자~ 

 

여기까지 했다면... 아직 인증이 된건 아니다. 기능을 사용할 방법만 가지고 있는 것이다. user모델을 사용해 인증을 해야 한다

 

이제 root폴더에 passport.js파일을 만들어 준다.

이파일에는 strategy와 필요한 것들을 (설정?)을 넣어 줄 예정이다.

 

이제 passport와 passport-local을 설치~!~!

npm install passport passport-local

passport-local이란 username과 password를 쓰는 사용자 인증 방식(strategy)을 의미한다

차후 passport-facebook, passport-github도 설치할 예정.

 

 

t

설치가 끝났으면 passport.js에 import해주고 모델도 함께 import 해준다.

passport.use(User.createStartegy());를 통해 strategy를 설정해준다

createStrategy()는 이미 구성된 passport-local의 localStrategy를 생성

 

해석하면 passport가 이미 구성된 passport-local의 localstrategy를 User모델로 생성하고 이것을 사용하라고 하는 것

아래는 사용자 인증방식의 strategy를 구현한 모습이다. 이걸 createStrategy로 간편히 사용한것

 

 

그리고 두가지를 설정해주는데 serialize와 deserialize이다.

serialize는 어떤 정보를 쿠키에게 줄 것인지, 웹브라우저 (클라이언트)에 있는 사용자에 대해서 어떤 정보를 가져올 것인지이고

deserialize는 그 쿠키의 정보를 어떻게 사용자로 전환하는가를 나타낸다.

 

serialize에는 많은 정보를 담으면 안된다. 최소한의 정보만 담아야 한다고 한다. 누군가 접근할 수 있기 때문에~!

여기서는 serializeUser함수는 user.id만 담으라고 하네요..

deserializeUser함수에서는 어느 사용자인지 어떻게 찾는가 이다.

 

serialize로 passport에게 user.id만 전송시키고 deserializeUser로 식별 해준다.

 

이제 usercontroller로 가서 postJoin 컨트롤러를 수정해서 register & login 기능을 만들어 준다

여기서 postJoin의 매개변수에 next를 넣어서 미들웨어로 만들어 줬다. 회원가입을 하며녀 바로 로그인이 되도록 하기 때문에

postjoin컨트롤러는 미들웨어가 되면 된다~

그리고 바디파서로 받은 name과 email을 User모델로 create해주고  resgister해준다. 완료가 되면

다음으로 넘어가게 해준다.

.

이제 globalRrouter로 가서

postJoin이 성공적으로 실행되면 postlogin컨트롤러가 실행되도록 미들웨어로 만들어 넣어줬다.

 

이제 postlogin을 수정하자. passport를 통해 인증한다.

참고 : authenticate(strategy, {option}) 함수 - 첫번째 인자는 인증방식, 그리고 option을 준다.

인증방식은 사용자 인증방식 (local)이고 

옵션은 실패하면 리다이렉트로 로그인 페이지로 가게 하고 

성공하면 리다이렉트로 홈화면으로 가게 해준다.