#노드 로그인 #기본 세션 로그인기능

회원 인증 방법 3가지 

1. session-based 

: 로그인 할경우 쿠키 발행 (session id 포함해서 보냄)
=> 마이페이지 접속시 그거 보내서 확인함

2. token -based(JWT :JSON Web Token)

: 로그인 할경우 JWT 발행해줌, 브라우저는 이 토큰을 쿠키나 로컬 스토리지에 저장함
=> 마이페이지 접속시 헤더에 해당 토큰을 포함해서 전송함 
.. 웹토큰 검사하고 올바를 경우 페이지 전달해줌
~ 유저 로그인 상태를 저장할 필요가 없음 (REST stateless 한 방식)

3. Open Authentication (OAuth)

: 구글이나 다른 곳의 프로필 정보를 가져와서 활용, 접근 권한 주고
=> 이름 아이디 성별등을 받아와서 계정, 세선 JWT 등 가져와서 해줌

 

---

세션 로그인 기능 구현해보기

세션 방법으로 로그인 기능 구현할거임 

npm install passport passport-local express-session

 

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');

app.use(session({secret : '비밀코드', resave : true, saveUninitialized: false}));
app.use(passport.initialize());
app.use(passport.session());

app.use 는 또 뭐야?

미들웨어임 

 = 요청과 응답 중간에서 실행시키는 코드

자세한거 궁금하면 아래 링크 ㄱ

( 아직 안작성함 )

server.js

 

app.get('/login', (req, res) => {
  res.render('login.ejs')
})

app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), function(요청, 응답){
  응답.redirect('/')
});

passport  = 검사하세요

passport 라이브러리가 제공하는 아이디와 비번 인증을 도와주는 코드임, 그냥 나중에 복붙하셈

( authenticate = 응답 전에 local 방식으로 아이디와 비번을 인증해라  ) 

(failureRedirect = 로그인 인증 실패 시 이동시킬 경로 ) 

 

인증 세부코드 

로그인 할때만, 즉 pasport 쓸 때만 실행됨 

passport.use(new LocalStrategy({
  usernameField: 'id',	// 필드명
  passwordField: 'pw',
  session: true,		// 세션정보 저장할건지
  passReqToCallback: false,
}, function (입력한아이디, 입력한비번, done) {
  //console.log(입력한아이디, 입력한비번);
  db.collection('login').findOne({ id: 입력한아이디 }, function (에러, 결과) {
    if (에러) return done(에러)

    if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
    if (입력한비번 == 결과.pw) {
      return done(null, 결과)
    } else {
      return done(null, false, { message: '비번틀렸어요' })
    }
  })
}));

done() 은 또 뭐야..

done : 응답을 뱉어주세요

done( 서버에러, 맞으면 보낼 result , 에러메시지)

 

세션 저장하기

// 세션 저장코드, 로그인 성공 시 실행댐
passport.serializeUser((user, done)=>{
  done(null, user.id)
})

// 나중에, 세셔녀 데이터 활용해서 마이페이지에서 접속시 발생
passport.deserializeUser((아이디, done)=>{
  done(null, {})
})

세션저장해서 쿠키에 저장함

 

위와같이 코드를 작성하면 로그인 했을 때 아래와 같이

개발자 모드에서 쿠키가 부여된 걸 확인할 수 있음

 

마이페이지(세션있어야 접속가능) 만들기

app.get('/mypage', 로그인했니, function (요청, 응답) { 
  console.log(요청.user); 
  응답.render('mypage.ejs', {}) 
}) 
//  마이페이지 처리할 미들웨어, 함수
function 로그인했니(요청, 응답, next) { 
  if (요청.user) { // 이게 뭔데? .. 아래 글 보셈
    next() // 통과
  } 
  else { 
    응답.send('로그인안하셨는데요?') 
  } 
}

 

요청.user 가 뭔데? 

= 로그인 후 세션이 있으면 요청.user 가 있음

이걸 사용할려면 desrializeUser 수정해야 함

 

-desrializeUser 

= 세션이 있는지 없는지 찾을 때 수행되는 함수 

.. 아까 만든거 수정 

passport.deserializeUser(function (아이디, done) {
  db.collection('login').findOne({ id: 아이디 }, function (에러, 결과) {
    done(null, 결과)
  })
});

DB 에서 세션에 숨겨진 유저 아이디에 맞는 게시물을 select 해서 

찾은 DB 결과를 done 함 => 그러면 결과가 요청.user 에 들어감 

이렇게 하면 아래와 같이 실제로 콘솔에 요청.user 가 사용자의 정보로써 출력이됨

{ _id: 63f215f0ae8a919411520827, id: 'test', pw: 'test' }

 

=> 요청.user 에 사용자의 정보를 담아서 가져올수 있으니 이거를 req 에 담아서 보내면 사용할 수있겠네?

app.get('/mypage', 로그인했니, function (요청, 응답) { 
  // console.log(요청.user); 
  응답.render('mypage.ejs', {사용자 : 요청.user}) 
}) 

... 
받는쪽 = 사용자.id

 

빡대가리식 내용 정리 (틀릴수도 있음)

 

1. app.use 로 세션과 passport 미들웨어를 쓰도록 설치하고 설정하고 시작

2. post 요청으로 login 이 오면 passport 미들웨어를 실행하고 응답을 보낼거야

3. passport 는 대충 검사한다는 라이브러리임 

4. 여튼 이렇게 검사를 진행하면서 필드명도 입력하고 세션도 부여한다고 하고

결과에 따라서 if 문을 돌리는데 이게 성공하면 "결과" 를 보낼거야 
( 이때 done 을 쓰는데 이거는 그냥 응답 뱉는거라고 생각하면 돼 )

6. done 으로 뱉은 '결과' 는 serializeUser 의 "user" 값으로 가게 돼 
(serializeUser : 사용자 정보 객체를 세션에 아이디로 저장하는 거 = 쿠키에 담기게 됨 )

7.serializeUser 에서는 성공시 done 으로 "user.id" 를 뱉는데 이거는 deserializeUser 의 "아이디"로 감

8. 그럼 이걸   이용해서 맞는걸 select 해서 결과를 done 으로 뱉어 "결과"
(deserializeUser :  session에 저장된 값을 이용해서, 사용자 정보를 찾은 후  리턴)

9. 이 "결과" 가 바로 "요청.user" 가 되는거고 이 사용자의 정보를 res 에 담아서 보낼 수 있어 

 

 

 

.. 추가로 공부할 내용

.env 파일 만들어서 민감한 부분 관리하기