개요

user 로그인 상태를 관리하기 위해 안전한 방법으로 Server에서 Client에게 쿠키로 sessionID를 발급해주고 이 쿠키를 통해 Server에 접속하면 sessionID값을 활용해 어떤 Client인지 식별하고 관련 정보를 제공하는 방법을 사용한다. 관련 기능을 쉽게 사용할 수 있게 해주는 express-session 모듈을 사용해 보자.

관련 그림

1. express-session 등록

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

app.use(session({
 secret: 'mySecretKey!@#$',
 resave: false,
 saveUninitialized: true
}));

express-session을 미들웨어로 등록한다. sessionID를 발급할 때 username이나 password같은 정보만으로 만들어 발급한다면 외부에서 이 정보를 알아낼 가능성이 있다. 이는 심각한 보안사고이다. 그래서 추가적으로 secret키를 sessionID 생성에 참고해서 이 sessionID를 역으로 해석해서 원래 정보를 알아내기 힘들도록 한다.

이렇게 등록을 하면 Server에 접속했을 때

와 같은 sessionid가 발급된다.

2. Login

로그인을 구현하기 위해서 Client에서 ID와 Password가 Server에 오면 이를 user database에 있는 user정보와 비교해서 제대로 된 유저인지 확인한다. 만약 제대로 된 user라면 sessionId를 발급해주면 된다.

router.post('/login_process', (req, res) => {
  const userData = fs.readFileSync(`${__dirname}/../data/user.json`, (e) => {if(e) console.log(e)});
  let loginSuccess = false;
  let userID;
  JSON.parse(userData.toString()).users.some(x => {
    if(x.id == req.body.id && x.password && req.body.password) {
      loginSuccess = true;
      userID = x.id;
      return true;
    }  
  });

  if(loginSuccess) {
    console.log("로그인 성공!");
    req.session.sessionID = userID;
  } else {
    console.log("로그인 실패");
  }
  res.redirect('/');
})

login이 성공하면 req.session에 원하는 property에 원하는 정보를 담아 보낸다. 위 코드는 userID를 담아 어떤 user가 접속했는지 확인할 수 있도록 했다.

3. sessionID로 Server에서 어떤 Client인지 식별

client에게 고유한 sessionID가 발급되었기 때문에 이 sessionID값으로 Server에 접근하면 서버는 지금 접근한 게 누군지 알 수 있다.

router.get('/rightLoginCheck', (req, res) => {
  if(req.session.sessionID) {
    console.log(req.session.sessionID, "가 접속했습니다");
  } else {
    console.log("잘못된 유저");
  }
  res.redirect("/");
})

4. session삭제, 로그아웃 기능 구현

로그아웃은 Client가 가지고 있는 sessionid쿠키를 삭제하는 것과 server에서 유지하고 있는 session값을 지워주는 것으로 구현할 수 있다.

router.get('/logout_process', (req, res) => {
  if(req.session.sessionID) {

    console.log(`${req.session.sessionID}가 로그아웃했습니다.`);
    req.session.destroy((err) => {
      if(err) {
        console.log(err);
      }
    })
  }

  res.redirect('/');
})

참고

https://velopert.com/406

개요

보통 자주 사용하는 body-parser나 morgan등 예제 코드를 통해

app.use( ... ) 

...에 적용할 미들웨어를 넣으면 이렇게 body-parser나 morgan 같은 라이브러리가 적용되는 마법같은 것으로 알고 있었다. 이번에 공부를 해서 마법이 아니라 기술로 만들어 보고자 한다.
(모르면 마법, 알면 기술 - 이고잉)

미들웨어의 매우 간단한 의미

만약 만든 서버에서 접속을 하면 반드시 A기능과 B기능을 실행해야 한다고 가정하자.

미들웨어를 사용하지 않으면

app.get('/', (req, res) => {
  console.log("A 기능 실행");
  console.log("B 기능 실행");
  console.log("다음 동작");
})

app.get('/hello', (req, res) => {
  console.log("A 기능 실행");
  console.log("B 기능 실행");
  console.log("다음 동작 hello");
})

...

모든 라우터마다 위와 같이 A기능과 B기능을 실행하는 코드를 위에 적어줘야 한다.

미들웨어를 사용하면

app.use((req, res, next) => {
  console.log("A 기능 실행");
  next();
})

app.use((req, res, next) => {
  console.log("B 기능 실행");
  next();
})

app.get('/', (req, res) => {
  console.log("다음 동작");
})

app.get('/hello', (req, res) => {
  console.log("다음 동작 hello");
})

위와 같이 app.use를 통해 app.get ... 라우터 실행 전에 수행해야할 동작을 미리 지정해 두어 훨씬 깔끔하게 코드 작성이 가능해진다.

좀 더 구체적인 미들웨어

참고 : https://expressjs.com/en/guide/using-middleware.html

미들웨어는 총 5가지 타입으로 나뉜다.

• Application-level middleware
• Router-level middleware
• Error-handling middleware
• Built-in middleware
• Third-party middleware

폴더 구조

node.js의 웹 프레임워크인 Express를 Express답게 쓰기 위해 조사했다. Express Reference에서는 Express generator를 사용해서 빠르게 앱 스켈레톤을 구성할 수 있게 해준다. 위의 사진은 Express generator를 통해 생성한 스켈레톤 앱의 구조이다.

npm install -g express-generator

명령어를 통해 설치한 후

express —view=pug myapp (pug는 템플릿 엔진. ejs를 사용할 수도 있다)

를 통해 스켈레톤 앱을 생성한다.

빌드

빌드는 npm start 명령어를 통해 빌드한다.
package.json파일의 "script"키 값으로 "start" 명령시 빌드 명령어가 앱 생성과정에서 함께 들어가있다.

"scripts": {
  "start": "node ./bin/www"
},

bin폴더

// bin/www
const app = require('../app');
const http = require('http');
const port = 3000;
app.set('port', port);

const server = http.createServer(app);
server.listen(port);

www파일을 요약하면 위와 같다. 서버가 실행되는 코드가 들어있다.

app.js

const express = require('express');
const app = express();
const path = require('path');

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

app.set('view engine', 'pug');
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(express.static(path.join(__dirname, 'public')));

module.exports = app;

app.js파일을 요약하면 위와 같다. 미들웨어들을 연결하고 exports해서 www에서 실행시킬 수 있도록 한다.

routes폴더

// index.js
const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

routes폴더 내에 있는 파일들을 요약하면 위와 같다. 해당하는 URL이 들어올 때 처리할 동작을 기술할 수 있다. res.render('index', ... ) 에서 index는 views폴더 내의 index.pug파일을 의미한다.

views폴더

//index.pug
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}

views폴더 내에 있는 파일을 요약하면 위와 같다. 보여질 html파일을 기술한다. 이번엔 템플릿 엔진으로 pug를 사용해서 pug파일이 있고 ejs를 사용할 수도 있다.

public폴더

public폴더에는 정적인 파일을 두고 가져다 쓸 수 있는 폴더이다. app.js 파일에 app.use(express.static(path.join(__dirname, 'public')));
코드를 통해서 정적인 파일을 가져다 쓸 수 있도록 해두어서 사용 가능하다.