본문 바로가기

WebApp/Node.js-passport

Node.js-passport3

1.

로그인 이 후 다시 페이지를 리로드 해보면 main.js의 deserializeUser가 호출되면서 45번쨰 줄의 console.log 

가 터미널에 나타나고 뒤이어 콜백함수인 done()이 실행되면서 두번째 인자로 주입한 authData 즉 저장된 사용자데이터가 request의 user라는 객체로 전달되게 되는 것이다.

*우리가 passport를 사용하지 않으면 request객체는 user라는 객체를 가지고 있지 않는다 

즉 우라가 passport를 사용하게 되면 passport가 우리가 사용할 수 있도록 request에 user라는 객체를 생성해주는 것이다

45번째 줄 수정 'deserializeUSer', authData => 'deserializeUSer', id

 

2.

그러면 우리는 user의 값을 기준으로 해서 사용자가 로그인 했는지 하지 않았는지를 체크할 수있다

 

기존에 만들었던 statuseUI와 관련된 lib/login.js의 모듈을 수정해보자

isOwner 객체의

request.session.is_logined를 request.user로 바꾸고(로그인 되었다면 user객체가 있으니 true, 없으면 false)

statusUI 객체의

request.session.nickname을 request.user.nickname으로 바꾼다

 

 

 

3. 로그아웃 구현

 

passportjs.org 에서 logout을 검색해보면 

 

request.logout()을 사용하라고 나온다 /logout에서 작동하도록 작성 이후

세션까지 지우도록 기존코드를 남겨두고

홈으로 리다이렉션을 넣어주면

 

로그아웃이 되었기때문에 console.log의  request.user는 undefined가 나온다

 

*위처럼하면 에러가 뜨는데 이를 해결하기위해 세션을 지우는 코드를 주석처리하고

request.session.save(function(){

response.redirect('/')}); 코드를 추가한다

save는 현재 세션의 상태를 세션스토어에 저장하고 그 저장작업이 끝나면 리다이렉트를 하는 코드이다

 

4.플래쉬 메세지 구현(1회성 메세지) 원리

 

passportjs.org에서 flash messages 검색

 

1. failureFlash:true 를 주어 메세지를 활용토록 설정하고 이 기능은 request.flash()함수를 구현해야하는데

이를 위해서는 connect-flash라는 미들웨어를 설치해주어야한다 

이기능은 passport와 상관없다 passport가 connect-flash라는 미들웨어를 사용하는 것 뿐이다

 

2.  npm install -s connect-flash 설치

3. var flash = require('connect-flash')로 모듈 가져오기

4. 이 미들웨어는 session을 내부적으로 사용하기 때문에 session 미들웨어 다음 으로 app.use(flash()); 코드 작성 이러면 웹페이지로 들어올때마다 플래쉬 작동

5.  연습을 위해 url이 /flash 로 들어왔으때 와 /flash-display로 들어왔을때를 가정하여 코드 작성

app.use(flash());가 request 객체에 falsh라는 메소드를 추가해주게 되고

/falsh로 들어 왔을때 request.flash('info','Flash is back!')로 인해서 session 스토어에  flash속성의 값(메세지)이 생성되게 된다

즉 flash 메소드를 호출하면 세션스토어에 입력한 정보를 추가하도록 되어 있다

 

6. /flash-display 에서는 request.flash()를 하면 어떻게 되는지 보자

그러면 이전에 추가되었던 flash 메세지값이 사라지면서 그 사라진 flash 메세지 값이 화면에 출력된다

이 후 리로드를 하면 세션스토어에는 flash메세지 값이 사라졌기때문에 아무것도 안나오게 된다

 

 

 

4.플래쉬 메세지 구현(1회성 메세지) 적용

(1) req.flash('key', 'value')를 통해서 session에 데이터를 삽입할 수 있습니다.

(2) req.flash('key')를 통해서 데이터를 추출할 수 있습니다.

(3) req.flash()를 통해서 모든 flash 데이터를 추출할 수 있습니다.

[출처] [Nodejs] [Express] Flash message 사용하기 (휘발성)|작성자 pjok1122

1. 

이미 connect-flash 미들웨어는 설치 했으니 

 failureFlash를 true로 준다

 

 

2. 

아이디 입력을 다르게하고 로그인을 하면 passport.use의 콜백함수에 의해서 토글한 부분의 코드가 return되어

실행되고 done콜백함수에 의해서 세션스토어에 "error" : ["Incorrect username"] 의 형식으로 저장된다.

+(추가)10/29

기존 sessionstore 에서 Lokistore로 변경한 후에는 기존 session store에 flash메세지가 저장되지 않던

오류가 아래처럼 해결되었다.

*session 디렉토리의 flash 객체 메세지 값이 위 콘솔창처럼 error : ['Incorrect username']이라고 생성되야 하는게

정상인데 작동치 않고 콘솔창에도 출력이 안됌 ㅜㅠ 

해결하기위해 session 스토어에 데이터를 저장하지 않도록 설정

(session 설정부분에서 store : new FileStore(), 부분을 주석처리)

하니 콘솔창에는 일단나오기는 함..

session 파일에는 저장안되는건 어쩔 수 업음 ㅠㅠ 잘 모르겠음

3. 

이 후 로그인이 실패하게 되면 /login 페이지로 가도록 했기 때문에 /login페이지에서

var fmsg = request.flash(); 

console.log(fmsg)

를 추가하면 세션스토어에 저장되어 있던 flash 메세지("error" : ["Incorrect username"])가 console.log에 의해서

콘솔창에 발현되고

세션스토어에 있던 위 flash 메세지 정보는 사라지게 되는것이다

이 후 리로드하면 falsh창은 비어 있기때문에 콘솔창에도 비어있는 객체가 출력된다.

 

 

4. error 메세지 출력

feedback에 공백값을 주고 만약 fmsg.error 즉 error가 있을시 feedback을 fmsg.error 객체의 첫번째 원소로 하도록

코드 작성

*정상적으로 플래쉬메세지가 출력되며 console.log창에 fmsg 즉 error메세지도 출력되지만

세션스토어의 flash객체에 error메세지 저장되지는 않는다.. 아마도 저장되자마자 request.flash()에 의해 {}로 바뀌고

앱홈페이지에 출력을 시키는 듯하다

*request.flash() 를 변수에 할당하지 않고 같은 코드를 작성하면 플래시메세지가 뜨지 않음...

변수를 사용해야 하는게 약속인듯하다,

5.success메세지 출력

main.js에서 failureFlash:true 다음으로 successFlash:true 를 추가하고 ,

passport.use의 콜백함수에서 성공시의 메세지내용을 구현하면

로그인 성공시 request.flash()객체에 success라는 속성이 추가된다 이를 이용하여 success메세지 구현

 

참고)

메세지는 아래 코드 때문에 출력됨

(1) done 함수는 3번째 인자를 객체로 받는데, message 라는 property를 사용하면 'error' 라는 key를 갖는 session을 생성합니다.

즉 flash 메시지는 error: 'Incorrect password' 형식으로 저장됩니다.

(2) passport에서 내부적으로 flash 메시지를 사용할 수 있도록 failureFlash : true로 설정합니다. successFlash 라는 옵션도 있습니다.

* 단, 메시지를 출력하는 부분은 직접 구현해야 합니다. passport는 내부적으로 connect-flash를 이용하여 내부적으로 메시지를 세션에 저장해주는 역할만 도와줍니다.

[출처] [Nodejs] [Express] Flash message 사용하기 (휘발성)|작성자 pjok1122