[Login & Register authentication with Node js] (8) 로그인 시 auth 인증 후, dashboard 띄우기 by passport

👩‍💻 백엔드(Back-End)/Node js

[Login & Register authentication with Node js] (8) 로그인 시 auth 인증 후, dashboard 띄우기 by passport

징징알파카 2023. 3. 20. 00:48

728x90

<본 블로그는 Traversy Media 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> Node.js With Passport Authentication | Full Project

=> authentication app with login, register and access control using Node.js, Express, Passport, Mongoose

🥕 로그인을 도와주는 passpoart

이름처럼 자신의 웹사이트에 방문할 때 여권같은 역할

로그인을 쉽게 할 수 있게 도와줌

  // login이 최초로 성공했을 때만 호출되는 함수
  // done(null, user.id)로 세션을 초기화
  passport.serializeUser(function (user, cb) {
    process.nextTick(function () {
      return cb(null, user);
    });
  });

  // 사용자가 페이지를 방문할 때마다 호출되는 함수
  // done(null, id)로 사용자의 정보를 각 request의 user 변수에 넣음  
  passport.deserializeUser(function (user, cb) {
    process.nextTick(function () {
      return cb(null, user);
    });
  });

serializeUser : function(user, cb) 을 이용해서 session에 저장할 정보 cb(null, user) 를 넘김
(원래 사용자 정보가 크면 메모리 많이 소모해서, 사용자 id와 같은 키 정보만 저장하는데 뒤에서 name이 필요한데 id만 넘어와서 쩔 수없이 사용자 정보 모두 저장함)
LocalStrategy : 객체의 인증함수에서 cb(null, user) 에 의해 리턴된 값이 넘어 옴
deserializeUser : node.js의 모든 페이지에 접근할때, 로그인이 되어 있을 경우 모든 사용자 페이지를 접근할 경우, deserilizeUser가 발생
session에 저장된 값을 이용해서 사용자 정보를 찾은 후 HTTP request의 리턴
실제 서버로 들어오는 요청마다 세션 정보(serializeUser에서 저장됨)를 실제 DB의 데이터와 비교

🐧 middlewares/passport.js

// 인증 요청을 처리해주는 Node.js의 인증 미들웨어

const LocalStrategy = require("passport-local").Strategy;
const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");

// Load user model
const User = require("../models/User");

module.exports = (passport) => {
  passport.use(
    new LocalStrategy({ usernameField: "email" }, (email, password, done) => {
      // Match User
      User.findOne({ email: email })
        .then(user => {
          // user 가 없다면 done
          if (!user) {
            return done(null, false, { message: "That email is not registered!" });
          }
          // Match password (기존 비밀번호와 입력한 비밀번호 체크)
          bcrypt.compare(password, user.password, (err, isMatch) => {
            if (err) throw err;

            if (isMatch) {
              return done(null, user);
            } else {
              return done(null, false, { message: "Password is incorrect!" });
            }
          });
        })
        .catch(err => console.log(err));
    })
  );

  // login이 최초로 성공했을 때만 호출되는 함수
  // done(null, user.id)로 세션을 초기화
  passport.serializeUser(function (user, cb) {
    process.nextTick(function () {
      return cb(null, user);
    });
  });

  // 사용자가 페이지를 방문할 때마다 호출되는 함수
  // done(null, id)로 사용자의 정보를 각 request의 user 변수에 넣음  
  passport.deserializeUser(function (user, cb) {
    process.nextTick(function () {
      return cb(null, user);
    });
  });
}

🐧 middlewares/auth.js

module.exports = {
  ensureAuthenticated: (req, res, next) => {
    if (req.isAuthenticated()) {
      return next();
    }
    req.flash("error_msg", "Plz, log in to view this resource!");
    res.redirect("/users/login");
  }
}

🐧 routes/index.js

const express = require("express");
const router = express.Router();
const { ensureAuthenticated } = require("../middlewares/auth");

// Main page
router.get("/", (req, res) => {
  // rednering 할 때 view의 파일 이름 써야됨
  res.render("welcome");
});

// dashboard
router.get("/dashboard", ensureAuthenticated, (req, res) => {
  // rendering 할 때 view의 파일 이름 써야됨
  res.render("dashboard", {
    name : req.user.name
  });
});

module.exports = router;

🐧 routes/user.js

const express = require("express");
const router = express.Router();
const bcrypt = require("bcryptjs");
const passport = require("passport");
// user model
const User = require("../models/User");

// Login Page
router.get("/login", (req, res) => {
  res.render("login");
});

// Register Page
router.get("/register", (req, res) => {
  res.render("register");
});

// Register Handle
router.post('/register', (req, res) => {
  const { name, email, password, password2 } = req.body;
  let errors = [];

  if (!name || !email || !password || !password2) {
    errors.push({ msg: 'Please enter all fields' });
  }

  if (password != password2) {
    errors.push({ msg: 'Passwords do not match' });
  }

  if (password.length < 6) {
    errors.push({ msg: 'Password must be at least 6 characters' });
  }

  if (errors.length > 0) {
    res.render('register', {
      errors,
      name,
      email,
      password,
      password2
    });
  } else {
    // validation pass
    User.findOne({ email: email })
      .then(user => {
        // email을 찾았는데 만약에 user가 있다면
        if (user) {
          errors.push({ msg: "Email is already registered!" });
          res.render('register', {
            errors,
            name,
            email,
            password,
            password2
          });
        } else {
          // 회원가입된 email이 없다면
          const newUser = new User({
            name,
            email,
            password
          });

          console.log(newUser);

          // hash password
          bcrypt.genSalt(10, (err, salt) =>
            bcrypt.hash(newUser.password, salt, (err, hash) => {
              if (err) throw err;
              // Set password to hased
              newUser.password = hash;
              // save user
              newUser.save()
                .then(user => {
                  req.flash("success_msg", "You are now registered and can log in!!");
                  res.redirect('/users/login');
                })
                .catch(err => console.log(err));
            }))
        }
      });
  }
});

// Login handle
router.post("/login", (req, res, next) => {
  passport.authenticate("local", {
    // 성공하면 메인으로
    successRedirect : "/dashboard",
    // 실패하면 다시 로그인
    failureRedirect : "/users/login",
    failureFlash : true
  }) (req, res, next);
});

// Logout handle
router.get('/logout', (req, res, next) => {
  req.logOut(err => {
    if (err) {
      return next(err);
    } else {
      console.log('로그아웃됨.');
      req.flash("success-msg", "You are logged out!");
      res.redirect("/users/login");
    }
  });
});

module.exports = router;

🐧 app.js

const express = require("express");
const expressLayouts = require("express-ejs-layouts");
const mongoose = require("mongoose");
const flash = require("connect-flash");
const session = require("express-session");
const passport = require("passport");
const app = express();

require("dotenv").config();
require("./middlewares/passport")(passport);

// DB config
const db = process.env.MONGODB_URI;

// connect to Mongo
mongoose.connect(db, {
  useNewUrlParser: true,    // useNewUrlParser : 에러 방지
  useUnifiedTopology: true
})
  .then(() => console.log("💚MongoDB Connected..."))
  .catch(err => console.log(err));

// ejs 미들웨어
app.use(expressLayouts);
// express 의 view 엔진을 ejs 로 세팅
app.set("view engine", "ejs");

// Bodyparser
// express서버로 POST요청을 할 때 input태그의 value를 전달
// URL-encoded 형식의 문자열로 넘어오기 때문에 객체로의 변환 필요
app.use(express.urlencoded({ extended: false }));

// Express session
// Express 프레임워크에서 세션을 관리하기 위한 미들웨어
// Server에서 Client에게 쿠키로 sessionID를 발급해주고,
// 이 쿠키를 통해 Server에 접속하면 sessionID값을 활용해 어떤 Client인지 식별하고 관련 정보를 제공
app.use(session({
  secret: 'secret',
  resave: true,
  saveUninitialized: true,
}));

// passport 초기화 및 session 연결 미들웨어
app.use(passport.authenticate('session'));
app.use(passport.initialize());
app.use(passport.session());

// Connect flash
// 한 번 출력되고 사라지는 메시지
// session 보다 아래쪽에서 미들웨어를 설치
// flash 메시지는 Queue처럼 데이터를 꺼내는 즉시, session에서 삭제
app.use(flash());

// Global Vars
app.use((req, res, next) => {
  // res.locals : 뷰를 렌더링하는 기본 콘텍스트를 포함하는 객체
  res.locals.success_msg = req.flash("success_msg");
  res.locals.error_msg = req.flash("error_msg");
  res.locals.error = req.flash("error");
  next();
});

// uploads 폴더의 사진 html에 보이게 하기g
app.use(express.static('public'));

// Routes
app.use("/", require("./routes/index"));
app.use("/users", require("./routes/user"));

const PORT = process.env.PORT || 8000;

app.listen(PORT, console.log(`🚀Server started on port http://localhost:${PORT}`));

🐧 views/dashboard.ejs

<h1 class="mt-4">Dashboard</h1>
<p class="lead mb-3">Welcome User! <%= name %></p>
<a href="/users/logout" class="btn btn-secondary">Logout</a>

728x90

저작자표시