HTML/CSS로 프론트 작업을 할 때 주의사항

axios, fetch 등 프론트엔드와의 API 통신 없이 프로젝트를 진행할 때 필요한 진행과정이다.

 

미들웨어 설치할 것들 목록

 

• session 설치 npm install -s express-session
• session-file-store 설치 npm install -s session-file-store
• helmet, compression설치 npm install -s compression helmet
• passport 설치 npm install --save passport
• shortid 설치 npm install -s shortid (프론트)
• bcrypt 설치 npm install -s bcrypt
• passport-local 설치 npm install -s passport-local
• mysql 설치 npm install -s mysql

 

 

DB 생성

예시 참고

 

 

passport.js 관련 사항들

passport.js에서 passport.use를 한 것을 통해 user.js에서 req.user를 통해 회원정보 객체에 접근이 가능

 

< passport.js >

var db = require('./db');

module.exports = function(app){
    const passport = require('passport')
    , LocalStrategy = require('passport-local').Strategy;

    app.use(passport.initialize());
    app.use(passport.session());

    passport.serializeUser((user, done) => {
        done(null, user.id);
    });

    passport.deserializeUser((id, done) => {
        var userInfo;
        var sqlQuery = 'SELECT * FROM user WHERE id=?';
        db.query(sqlQuery, [id],
            (err, result) => {
                if(err) throw err;
                var json = JSON.stringify(result[0]);
                userInfo = JSON.parse(json);
                done(null, userInfo);
            });
    });
    
    passport.use(new LocalStrategy(
        {
            usernameField: 'id',
            passwordField: 'pwd'
        },
        (username, password, done) => {
            const sqlQuery = 'SELECT * FROM user WHERE id=? AND password=?';
            db.query(sqlQuery, [username, password],
                (err, result)=>{
                    if(err) throw err;
                    if(result.length === 0) { // 입력한 id, password와 일치하는 회원정보가 없는 경우
                        return done(null, fasle, { message: 'Incorrect'});
                    } else{
                        var json = JSON.stringify(result[0]);
                        var userInfo = JSON.parse(json);
                        return done(null, userInfo);
                    }
                });
        }
        ));

    return passport;
}

 

passport.js의 전체적인 흐름 / 출처: https://kosaf04pyh.tistory.com/23 

 

router.post('/login_process',
  passport.authenticate('local', {
    failureRedirect: '/user/login',
    failureFlash: true 
  }), function(request, response){
    request.session.save(function(err){
    response.redirect('/');
  }
);
}
    );

로그인 과정에서 req.session.save > req.login > res.send 이 순서여야 함, 순서가 다르면 작동 안할수도!

 

로그아웃 시 session파일을 삭제하는 방법을 사용하자.

 

serializeUser에는 회원을 구분할 정보를 넣으면 된다. id 대신 count(회원 식별 문자열)를 넣었다.

 

bcrypt 적용

 

router.post('/register_process', function(request, response){
  var post = request.body;
  var id = post.id;
  var pwd = post.pwd;
  var pwd2 = post.pwd2;
  var nickname = post.nickname;

  if(pwd !== pwd2){
  request.flash('error', 'Password must be same!');
  response.redirect('/user/register');
  } else{
  bcrypt.hash(pwd, 10, (err, hash)=>{
  if(err) throw err;
  var user = {
  userId: shortid.generate(),
  id: id,
  password: hash,
  nickname: nickname
  };
  db.query(`
  INSERT INTO user SET ?`, user, function(error, result){
  if(error) throw error;
  	}
  );
  request.login(user, function(err){
  return response.redirect(`/`);
  		});
  	});
  }
});

 

---

참고

https://kosaf04pyh.tistory.com/23

[Node.js] passport를 이용한 로그인

https://opentutorials.org/course/3402/21878