session으로 로그인 구현하기 (Sequelize DB 활용)

글의 제목을 session으로 하였는데 session은 쿠키에서 약간 변형된? 혹은 개선된 방법 중 하나입니다.

쿠키와 세션에 대해 쓰는 이유와 간단한 소개를 하겠습니다.

- 쿠키와 세션을 쓰는 이유는?

: Http 프로토콜의 특징 중 하나인 비연결성(connectionless)과 상태를 유지하지않는(stateless) 특징 때문입니다.

쿠키와 세션을 사용했을 경우, 한 번 로그인을 하면 어떠한 방식에 의해서 그 사용자에 대한 인증을 유지하게 됩니다.

쇼핑몰 카트 기능같은 경우 장바구니 정보를 계속해서 지니고 있어야 하기 때문에 사용자 브라우저에 이러한 정보를 저장하고 있어야 하죠.

** 쿠키 **

 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를통해 인터넷 사용자의 컴퓨터에 설치 되는 작은 기록 정보 파일을 일컫습니다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀝니다.

위에서 말했던 것 처럼 쿠키 정보는 사용자의 컴퓨터에 모두 저장됩니다. 보안에 관계없는 정보들이면 관계없겠지만 로그인 정보와 같은 정보들은 쿠키로 사용하는건 옳지 않겠죠

** 세션 **

쿠키와 기능은 유사하지만 세션은 서버 메모리에 저장되는 정보입니다. 서버에 저장되기 때문에 쿠키와는 달리 사용자 정보가 노출되지 않는다는 점이 차이점입니다. 

사용자 측에서 모든 정보를 저장하는 것이 아니라 마치 인덱스와 같은 개념으로 id값만 저장합니다. id 값을 통해 원본 데이터의 정보들을 참조할 수 있게 되는 것이죠. session id 값이 중복될 일은 없으며 한 명의 사용자(웹브라우저)에 하나의 세션이 있다고 생각하면 됩니다. 

일단 npm에서 모듈을 깔아야합니다. 설치가 완료 됐으면,

$ npm install express-session

require를 통해 불러와야겠죠? 모두 npm 공식 홈페이지에 있는 내용입니다.

var session = require('express-session')

그리고 이와같이  

app.use(session({

secret:'keyboard cat',

resave:false,

saveUninitialize:true

}));

이런 형식을 아래에 복사해주세요. secret이라고 하는 부분은 session id 를 사용자의 웹브라우저에 심을 때 덧붙여서 들어가는? 그런 개념인데 다른 문자나 숫자로 쓰셔도 됩니다. 나머지 속성들은 다 권장 값이라고 하니 일단 넘어가겠습니다.

이러한 로그인 폼이 있다고 가정해봅시다. 주소를 보니 login이라는 라우터에서 렌더링하는 페이지네요 저는 사용자가 로그인을 성공했을 때 session 정보에 현재 로그인 되어있는 사용자의 상태 값을 session으로 갖게하고 싶습니다. 

그럼 이런 순서를 가져야 하겠죠

로그인이 성공했다면 세션 값을 가질 것이고, 로그인 후에 로그아웃을 한다면 세션값을 삭제하거나 혹은 변경해야 할 것입니다.

첫 화면이 로딩될 때 session값을 초기화 시켜줍니다. 물론 세션 값이 이미 설정되어있다면 바꿔선 안되기때문에 if문을 통해 세션 값이 설정되도록 합니다. login이라는 값은 현재 사용자가 로그인 상태인 것을 알려주기 위한 값이며 idx는 User 테이블의 기본키 값 입니다. 기본키 값을 알고있으면 테이블의 모든 정보를 다 알 수 있겠죠

app.get('/index',function(req,res){
    if(!req.session.login){
        req.session.login = false
        req.session.idx = -1
    }
    res.render('index');
});

앞단에서 데이터를 Ajax를 통해 POST로 넘겨줬다고 가정하고 이 함수를 콜 한다고 가정을 해보겠습니다. 사용자가 입력한 계정정보가 DB에 있는 정보와 일치하는지 체크하여 일치한다면 ok사인과 session정보를 업데이트 시켜줍니다. 제가 다시 클라이언트에 세션정보를 넘겨주는 이유는 로그인 여부에 따라 로그인 버튼 혹은 로그아웃 버튼을 보이게 하기 위해서 입니다.

var models = require('../models');
 
function loginFunction(id,pwd,res,req){
    var responseData;
    models.User.findOne({
        where: {user_id: id}
    })
        .then(function(user){
            if(user==null || user.dataValues.password!=pwd){
                responseData = {'result':'no','flag':req.session.login};
                res.json(responseData);
                console.log('로그인 실패');
            } 
            else{
                req.session.login = true
                req.session.idx = user.dataValues.id
                responseData = {'result' : 'ok','session':req.session.login};
                res.json(responseData);
                console.log('로그인 성공');
            }
        });
}
 
exports.loginFunction = loginFunction;

그리고 로그아웃 라우터를 만나게 된다면 이와 같이 세션 값을 다시 바꿔줘야하겠죠

1

2

3

4

5

app.get('/logout',function(req,res){

    req.session.login = false    //login session 변경

    req.session.idx = -1

    res.render('index');

});

Colored by Color Scripter

cs

이런 헤더를 모든 페이지에 넣을 것인데 로그인 상태 값에 따라 보여지는 버튼이 달라져야 할 것 입니다.

헤더를 그리고 있는 파일 스크립트 부분에서 아까 설정했던 세션정보를 사용할 것입니다.  header 라우터에서 session값을 넘깁니다.

app.get('/header',function(req,res){
    res.render('header',{login:req.session.login});
});

script.
    var f = !{login};
    $(document).ready(function(){
        if(f){    //로그인 상태일 때
            $("#login").hide()
            $("#logout").show()
        }
        else{    //로그인 상태가 아닐 때
            $("#logout").hide()
            $("#login").show()
        }
});

제가 아까 로그인 정보 외에도 User 테이블의 기본 키 값 또한 session 정보로 따로 저장해뒀었는데 그렇게 되면 어디에서나 DB 조작을 할 수 있게 됩니다. 예를들면 마이페이지에서 디폴트 값으로 변경하기 전의 일정 정보를 미리 채워두려고 할 때

이와 같이 아에 공백이 아니라 디폴트 값으로 몇몇 값들은 미리 다 채워져있길 바랄 수도 있습니다. 저는 DB가 붙어있기 때문에 굳이 사용자 정보를 로그인과 동시에 싹 다 저장할 필요는 없고 User 테이블의 기본키 값만 알고 있으면 DB 구문을 통하여 사용자 정보에 접근하여 데이터를 뽑아올 수가 있겠죠

app.get('/mypage',function(req,res) {
    if(req.session.login){
        models.User.findOne({
            where: {id: req.session.idx}
        }).then(function(info){
            res.render('mypage',{data: JSON.stringify(info.dataValues)});
        })
    }
    else
        res.send("<script>alert('로그인이 필요합니다.')</script><meta http-equiv='refresh' content='0; url=http://localhost:3000/login'</meta>");
});

마이페이지는 당연히 로그인이 되어있는 상태에서만 접근이 허용되어야 하기 때문에 if문으로 한 번 체크하게 되고 통과가 된다면 DB 구문을 통해서 idx 값을 통해 검색된 유저의 정보를 반환하게 되는데 그 정보를 다시 클라이언트 단으로 넘겨준 후에 사용하며 됩니다.

이렇게 마이페이지 화면에서 유저 정보를 셋팅하면 됩니다. 

script.
 var info = !{data};
 document.getElementById('email').value=info.user_id;
 document.getElementById('name').value=info.name;
 document.getElementById('nickname').value=info.nick;

모든 걸 다 포함하자니 코드가 너무 길어서 화면 구현부분이나 DB 설정에 관련된 부분은 생략하였습니다. 

대략적인 동작 순서로 작성하였으니 양해 부탁드립니다.