express-session 이용하여 로그인 기능 구현하기

express middleware인 express-session 을 이용해서 로그인 기능을 구현한다.

 

---

세션을 이용한 로그인의 순서는 다음과 같다. 

1. 로그인을 하면 세션 ID 발행

2. 사용자는 세션 ID를 받아서 쿠키에 저장하고, 필요한 요청에는 쿠키를 헤더에 넣어서 보낸다. 

3. 쿠키받으면 세션 저장소에서 인증하고 데이터 보내준다. 

 

중요한 포인트는

세션은 서버에서 저장한다는 것!

쿠키는 사실 세션을 열기 위한 열쇠같은 것이며, 중요한 정보는 세션 저장소에 서버가 저장한다.  

 

사용하면서 더 알아보자..ㅋㅋ

 

---

session 미들웨어를 사용하면, req.session 객체가 생긴다!

정말 신기한 미들웨어의 세계..

 

const express = require("express");
const session = require('express-session');

const app = express();

// session 미들웨어를 사용한다. req.session 객체를 사용할 수 있게 해준다. 
app.use(session({
  secret: 'blah blah',
  resave: false,
  saveUninitialized: true,
  store: new FileStore()
}));

app.get("/", (req, res) => {
  console.log(req.session) // session 생긴다!
  res.send("hello world");
});

app.listen(5000, () => {
  console.log("listening on 5000 port");
});

 

session이 만들어지는 것을 확인했으니까, 본격적으로 로그인을 구현해본다. 

 

router.js

 

router.post('/signin', function (req, res) {
    console.log("router 들어왔니?");
    controllers.signin(req, res)
});

 

controllers.js

 

const signin = function (req, res) { // id, password

    var id = req.body.id;
    var password = req.body.password;
    var sess = req.session;

    signin_model.signin(id, password, sess, (data) => {

        if (data) {
            res.status(200).send(data);
        } else {
            res.status(500).send("아이디 / 패스워드 오류");
        }

    })
}

 

models/signin.js

 

로그인을 하면 

session.isLogined = true 로 바꿔준다! 

다른 페이지에서 이걸 통해서 로그인한 사용자인지 아닌지를 확인한다.

 

var db = require("../../models/index");
const crypto = require('crypto');

const signin = function (id, password, session, callback) {

    const secret = 'travel';
    const pass = crypto.createHmac('sha256', secret)
        .update(password)
        .digest('hex');

// db에서 회원가입한 유저인지 확인한다.
    db.Userinfo.findOne({ where: { username: id, password: pass } })
        .then(data => {
        
        // data 를 가져왔으면, 로그인되었다고 인증해준다! session에 필요한 사용자 정보를 저장한다. 
            session.isLogined = true;
            session.userid = data.dataValues.username;
            session.keyword = data.dataValues.keyword;
            session.age = data.dataValues.age;
            session.gender = data.dataValues.gender;

            callback(session)
        }).catch(err => {
            callback(false);
        })

}

 

로그인이 필요한 기능에서는 session을 확인한다. 

여행 계산기 어플에서는 mypage 에서 검색 히스토리를 볼 수 있었는데,

이 페이지는 session 이 있어야 들어갈 수 있다. 

(로그인하지 않으면 아예 mypage 로 가는 버튼 자체가 뜨지 않게 구현했다.) 

 

const getUserHistory = function (req, res) {

    let sess = req.session;

	// 세션이 있으면 username 으로 db가서 데이터 찾아온다. (여기서는 일단 model로 보냈음)
    if (req.session.userid) {
        let username = sess.userid;
        mypage_model.mypage(username, (data) => {
            res.status(200).send(data);
        })
    } else {
    // 로그인 안되어있으면, 접근불가
        res.status(500).send("로그인이 필요한 페이지입니다.");
    }
}

로그인 하지 않았을 경우, MYPAGE 버튼이 보이지 않음.

로그인한 경우, MYPAGE 버튼 생김

 

로그아웃 

const signout = function (req, res) {

    let session = req.session;

    if (session.isLogined) {
    // 로그인되어있으면, session.destroy 한다. 
        session.destroy((err) => {
            if (err) {
                res.sendStatus(500);
            } else {
                console.log("로그아웃 성공")
                res.sendStatus(200);
            }
        })

    } else {
        res.sendStatus(200);
    }

}

 

블로깅하면서 알게 된 점

 

session-file-store 사용하기 : store를 따로 사용하지 않으면 기본 memory 에 저장되지만,

기본 메모리는 서버를 끄면 날아가버리기 때문에 다른 저장소를 사용하면 좋다. 

// 사실 file-store 시도는했는데, 뭔가 안 돼서 그냥 기본 메모리를 사용한 것 같다. 

 

세션 미들웨어를 이용하면, 

request.session.username 등 여기에 있는 거를 세션 저장소에 저장해야 하는데, 

request.session.save(); 를 사용하면, 세션 저장소에 저장되기 전에 redirect 되는 것을 막아준다. 

 

보안을 위해서 https에서만 세션을 사용하도록 할 수 있다. 

app.use(session({
secure : true
})
)

 

passport 를 이용해서 oauth 구현하기를 다음에 시도해보고 포스팅할 것!

 

 

reference 

https://cjh5414.github.io/cookie-and-session/

쿠키(Cookie)와 세션(Session) & 로그인 동작 방법

 

https://opentutorials.org/course/3400/21831

미들웨어 express session의 구동 - 생활코딩

https://opentutorials.org/course/3387

Node.js - 쿠키와 인증 - 생활코딩

https://tansfil.tistory.com/58

쉽게 알아보는 서버 인증 1편(세션/쿠키 , JWT)