Node.js 생활코딩 정리 – 세션으로 로그인 애플리케이션 만들기

Session 1 : Intro

 

쿠키 방식과는 다르게 사용자의 ID값만 클라이언트 브라우저에 저장한다. 나머지 실제 데이터 서버쪽에 저장된다.

 

요청할 때마다 set-cookie : connect.sid값으로 클라이언트를 식별한다.

 

결국 세션도 쿠키를 이용한다.

 

세션을 이용하기 위해서 npm install express-session –save 를 설치해야한다.

 

express-session은 기본적으로 메모리에 세션 정보를 저장한다. 그래서 애플리케이션을 껏다키면 세션 정보가 날라간다. 그래서 실제 서비스 할 때는 데이터베이스에 세션데이터를 저장해야 한다.

 

 

app_session.js

 

var express = require('express');

var session = require('express-session');

var app = express();

 

//resave 세션아이디를 접속할때마다 발급하지 않는다

app.use(session({

secret: '12312dajfj23rj2po4$#%@#',

resave: false,

saveUninitialized: true

}));

 

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

if(req.session.count){//값이 있을때

req.session.count++;

}else{//처음 접속했을때 즉 값이 없을 때

req.session.count = 1;//세션을 만듬

}

 

res.send('count : ' + req.session.count);

});

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

res.send('result : ' + req.session.count);//값 가져오기

});*/

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

 

실행 화면

이전 쿠키에서 만들었던 count 예제와 동작은 같다.

하지만 쿠키를 보면 다음과 같이 connect.sid가 추가되었음을 볼 수 있다.

 

Session 2 : login 1

 

세션기능을 이용한 로그인 애플리케이션 만들기

 

app_session_login.js

 

var express = require('express');

var session = require('express-session');

var bodyParser = require('body-parser');//POST 방식 전송을 위해서 필요함

var app = express();

app.use(bodyParser.urlencoded({extended: false}));//미들웨어 등록부분

//resave 세션아이디를 접속할때마다 발급하지 않는다

app.use(session({

secret: '12312dajfj23rj2po4$#%@#',

resave: false,

saveUninitialized: true

}));

 

app.post('/auth/login', function(req, res){

var user = {//현재 유저는 한개만 있음

username:'egoing',

password:'111'

};

var uname = req.body.username;//POST방식으로 보낸 값을 가져옴

var pwd = req.body.password;

if(uname === user.username && pwd === user.password){//아이디와 패스워드 둘다 같으면

res.redirect('/welcome');

}else{//비밀번호가 틀리면

res.send('who are you?<a href="/auth/login">login</a>');

}

});

 

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

var output = `

<h1>Login</h1>

<form action="/auth/login" method="post">

<p>

<input type="text" name="username" placeholder="username">

</p>

<p>

<input type="password" name="password" placeholder="password">

</p>

<p>

<input type="submit">

</p>

</form>

`;

res.send(output);

});

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

 

실행 화면

아이디와 패스워드가 맞는 값을 입력하고 제출 버튼을 누르면

/welcome페이지로 redirect가 되고

아니면 "who are you?"가 뜬다

 

다음은 welcome 페이지를 구현하는 부분이다.

 

app_session_login.js

 

var express = require('express');

var session = require('express-session');

var bodyParser = require('body-parser');//POST 방식 전송을 위해서 필요함

var app = express();

app.use(bodyParser.urlencoded({extended: false}));//미들웨어 등록부분

//resave 세션아이디를 접속할때마다 발급하지 않는다

app.use(session({

secret: '12312dajfj23rj2po4$#%@#',

resave: false,

saveUninitialized: true

}));

 

 

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

if(req.session.displayName){//값이 있으면 로그인 성공

res.send(`

<h1>Hello, ${req.session.displayName}</h1>

<a href="/auth/logout">logout</a>

`);

}else{//값이 없으면 로그인에 실패 혹은 로그인 안한사람

res.send(`

<h1>Welcome</h1>

<a href="/auth/login">Login</a>

`);

}

});

 

app.post('/auth/login', function(req, res){

var user = {//현재 유저는 한개만 있음

username:'egoing',

password:'111',

displayName:'kch'

};

var uname = req.body.username;//POST방식으로 보낸 값을 가져옴

var pwd = req.body.password;

if(uname === user.username && pwd === user.password){//아이디와 패스워드 둘다 같으면

req.session.displayName = user.displayName;

res.redirect('/welcome');// welcome 페이지로 이동

}else{//비밀번호가 틀리면

res.send('who are you?<a href="/auth/login">login</a>');

}

});

 

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

var output = `

<h1>Login</h1>

<form action="/auth/login" method="post">

<p>

<input type="text" name="username" placeholder="username">

</p>

<p>

<input type="password" name="password" placeholder="password">

</p>

<p>

<input type="submit">

</p>

</form>

`;

res.send(output);

});

 

app.listen(3003, function(){

console.log('Connected 3003 port!!!');

});

 

 

실행 화면

로그인이 성공하면 다음과 같이 화면이 뜬다.

로그인에 실패하면 이전과 동일한 화면이 뜬다.

 

 

다음은 로그아웃 기능을 구현하는 부분이다.

 

app_session_login.js

 

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

delete req.session.displayName;//세션 삭제

res.redirect('/welcome');

});

 

실행 화면

로그인 한 화면

logout 버튼을 누르면 세션이 삭제되고 로그아웃이 된다.

 

 

 

출처 : https://opentutorials.org/course/2136