Login function using session

• 세션을 이용한 로그인 기능 구현

: 인증을 처리해주는 오픈 소스들을 사용할 예정이다.

• 로그인은 어떻게 동작하는가? 사용자의 ID, PW 데이터를 저장한다. 사용자가 로그인 접속시에 ID,PW가 저장된 DB 정보와 일치한다면 성공적으로 로그인에 접속하게 되고, 이 때 사용자가 접속한 세션 id(sid)에 따른 데이터를 불러올 수 있다. 여기서는 displayName이라는 데이터를 가져와서 보여줄 수 있게 된다.

• 로그아웃은 어떻게 동작하는가? 사용자가 로그아웃을 누르면 displayName이라는 데이터를 삭제하고, 이로써 (displayName이 없는) welcome 페이지로 리다이렉트한다.

한번 로그인하면 (로그아웃하지 않는 이상) 다시 접속해도 로그인 상태가 유지된다.

1. form태그로 ID, PW 입력창을 생성한다.

2. form태그의 입력값을 어디로 보낼지 form태그의 속성 'action'으로 설정해준다.

3. form태그의 전송방식은 post방식으로 한다. - form태그의 속성 method="post"

app.get('/auth/login',(req,res)=>{
    var output = `
    <form action="/auth/login" method="post">
        <p>
            <input typt="text" name="username" placeholder="username">
        </p>
        <p>
            <input typt="password" name="password" placeholder="password">
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    `;
    res.send(output);
});

• post방식으로 받은 정보는 req.body에서 찾을 수 있다! 그런데 express에서는 post방식을 지원하지 않기 때문에 'body-parser'라는 미들웨어를 사용해준다! 1. body-parser 모듈을 들고오고 2. app이 body-parser모듈을 사용할 수 있도록 등록해준다.

var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended:false}));

• session 사용과 셋팅

var session = require('express-session');
var app = express();
app.use(session({
    //secret이란 사용자의 웹 브라우저에 sid(session id)를 심을 때 평문으로 심으면 위험하기 때문에
    //resave-false : 서버에 접속할 때마다 새로운  sid를 발급받지 않겠다.
    //세션을 실제로 사용하기 전까지는 발급하지 말아라.
    secret: 'GOFORHLS!HLS!HLS!',
    resave: false,
    saveUninitialized: true
  }));

• 로그인한 사용자에게 개인화된 페이지를 보여줄 수 있다. (사용자가 로그인했을 때, 세션을 사용하는 방법) 코드 설명 : post방식으로 전달된 ID와 PW가 사용자의 정보와 맞다면 res.redirect('welcome')을 통해 welcome 페이지로 리다이렉트한다. 로그인에 성공하면 그 sid(세션 id)의 displayName으로 user.displayName을 저장한다. sid에 해당하는 정보를 서버에 저장한다.

app.post('/auth/login',(req,res)=>{
    var user = {
        username:'egoing',
        password:'111',
        displayName:'Egoing'
    };
    var uname = req.body.username;
    var pwd = req.body.password;
    if(uname == user.username && pwd == user.password) {
        req.session.displayName = user.displayName;
        res.redirect('/welcome');
    } else {
        res.send('Your ID or Password is wrong. Please check again.<a href="/auth/login">login</a>');
    }
});

• welcome 페이지로 리다이렉트

app.get('/welcome',(req,res)=>{
    if(req.session.displayName) {//displayName이 존재하면(=로그인 성공)
        res.send(`
            <h1>hello, ${req.session.displayName}</h1>
            <a href="/auth/logout">logout</a>
        `);
    } else {//로그인하지 않고 바로 direct로 welcome 페이지 접속했을 때.
        res.send(`
            <h1>Welcome</h1>
            <a href="/auth/login">login</a>
        `);
    }
    res.send(req.session);
});

• logout 구현 : session객체에서 displayName을 삭제하고 welcome페이지로 리다이렉트한다. 이때 displayName을 삭제했기 때문에 welcome페이지 리다이렉트 코드 중 else문이 실행된다.

app.get('/auth/logout',(req,res)=>{
    delete req.session.displayName;
    res.redirect('/welcome');
});