[BE] Passport.js를 활용한 간단한 회원인증 구현

1. 필요한 모듈 설치

npm install express passport passport-local express-session mongoose

• passport, passport-local : 회원가입과 로그인 세션관리를 도와주는 모듈
• express-session : 세션관리를 위한 모듈

 

2. app.js 기본 세팅

const express = require("express");
const app = express();
const passport = require("passport");
var Strategy = require("passport-local");
const session = require("express-session");
const mongoose = require("mongoose");
const User = require("./models/user");

// DB 연결
mongoose
  .connect("mongodb+srv://<username>:<password>@cluster0.p1xn6.mongodb.net/test")
  .then(async () => {
    console.log("DB 연결 성공");
  })
  .catch((e) => {
    console.log("DB 연결 실패");
  });

// POST 요청 시 Body를 사용하기 위한 코드
app.use(
  express.urlencoded({
    extended: true,
  })
);

// passport 모듈을 사용하기 위한 기본 세팅 코드들
app.use(express.json());
app.use(
  session({
    secret: "secret",
    resave: true,
    saveUninitialized: true,
  })
);
app.use(passport.initialize());
app.use(passport.session());

app.listen(3000, () => {
  console.log("3000 port listen");
});

 

3. Schema와 Model 생성 (models/user.js)

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  username: { type: String, unique: true, required: true },
  password: { type: String, required: true },
});

module.exports = mongoose.model("User", userSchema);

 

4. passport 인증 전략, serializeUser, deserializeUser 작성

passport.use( // 어떤 strategy를 쓸지, 그 strategy는 어떻게 인증을 처리할지 정의
  new Strategy(function (username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      //DB 연결 실패 등의 에러
      if (err) {
        return done(err);
      }
      //username 자체가 DB에 없을 때
      if (!user) {
        return done(null, false, { message: "Incorrect username." });
      }
      //username은 맞지만 비밀번호가 틀릴 때
      if (user.password !== password) {
        // !user.validPassword(password)
        return done(null, false, { message: "Incorrect password." });
      }
      //인증 성공
      console.log("success");
      return done(null, user);
    });
  })
);

passport.serializeUser((user, done) => { // 로그인 성공 시 사용자의 정보를 Session에 저장
  done(null, user);
});

passport.deserializeUser((id, done) => { 
  // 로그인 정보를 유지하는 역할
  // 인증 후 페이지 접근할 때 마다 사용자 정보를 Session에서 읽어온다.
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

 

5. router 생성

5-1. index.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  console.log(req.user);
  if (req.user) { // 인증된 유저가 있을 경우
    res.send(`
          <h1>환영합니다 ${req.user.username}님!</h1>
          <p><button><a href="/logout">로그아웃</a></button></p>
      `);
  } else { // 그 외
    res.redirect("/login");
  }
});

module.exports = router;

5-2. join.js

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

router.get("/", (req, res) => {
  res.send(`
        <h1>회원가입</h1>
        <form action="/join" method="POST">
            <div>
                <label>Username:</label>
                <input type="text" name="username"/>
            </div>
            <div>
                <label>Password:</label>
                <input type="password" name="password"/>
            </div>
            <div>
                <input type="submit" value="회원가입"/>
            </div>
        </form>
    `);
});

router.post("/", async (req, res) => {
  const { username, password } = req.body;

  try {
    const findData = await User.findOne({ username });
    if (findData) { // 이미 존재하는 유저인 경우
      return res.status(400).json({ errors: [{ msg: "User already exists" }] });
    }

    newUser = new User({
      username,
      password,
    });

    await newUser.save(); // DB에 저장

    res.send(`
      <h1>회원가입 성공!</h1>
      <button><a href='/login'>로그인 하러가기</a></button>
    `);
  } catch (err) { // 서버 에러
    console.error(err.message);
    res.status(500).send("Server Error");
  }
});

module.exports = router;

5-3. login.js

const express = require("express");
const router = express.Router();
const passport = require("passport");
const bcrypt = require("bcryptjs");

router.get("/", (req, res) => {
  res.send(`
        <h1>로그인</h1>
        <form action="/login" method="POST">
            <div>
                <label>Username:</label>
                <input type="text" name="username"/>
            </div>
            <div>
                <label>Password:</label>
                <input type="password" name="password"/>
            </div>
            <br />
            <div>
                <input type="submit" value="로그인"/>
            </div>
        </form>
      <button><a href='/join'>회원가입</a></button>
    `);
});

router.post( // 앞서 작성한 strategy를 통해 인증의 성공/실패 여부에 따라 redirect할 경로 지정
  "/",
  passport.authenticate("local", {
    failureRedirect: "/login",
    failureMessage: true,
  }),
  function (req, res) {
    res.redirect("/");
  }
);

module.exports = router;

5-4. logout.js

const express = require("express");
const router = express.Router();
const session = require("express-session");

router.get("/", (req, res) => {
  req.logout();
  req.session.destroy(); // 로그아웃 후 세션 삭제
  res.redirect("/");
});

module.exports = router;

 

6. Router 연결

const express = require("express");
const app = express();
const passport = require("passport");
var Strategy = require("passport-local");
const session = require("express-session");
const mongoose = require("mongoose");
const User = require("./models/user");

const indexRouter = require("./routes/index");
const loginRouter = require("./routes/login");
const joinRouter = require("./routes/join");
const logoutRouter = require("./routes/logout");

mongoose
  .connect("mongodb+srv://admin:1234@cluster0.p1xn6.mongodb.net/test")
  .then(async () => {
    console.log("DB 연결 성공");
  })
  .catch((e) => {
    console.log("DB 연결 실패");
  });

app.use(
  express.urlencoded({
    extended: true,
  })
);
app.use(express.json());
app.use(
  session({
    secret: "secret",
    resave: true,
    saveUninitialized: true,
  })
);
app.use(passport.initialize());
app.use(passport.session());

app.use("/", indexRouter);
app.use("/login", loginRouter);
app.use("/join", joinRouter);
app.use("/logout", logoutRouter);

passport.use(
  new Strategy(function (username, password, done) {
    User.findOne({ username: username }, function (err, user) {
      //DB 연결 실패 등의 에러
      if (err) {
        return done(err);
      }
      //username 자체가 DB에 없을 때
      if (!user) {
        return done(null, false, { message: "Incorrect username." });
      }
      //username은 맞지만 비밀번호가 틀릴 때
      if (user.password !== password) {
        // !user.validPassword(password)
        return done(null, false, { message: "Incorrect password." });
      }
      //인증 성공
      console.log("success");
      return done(null, user);
    });
  })
);

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

app.listen(3000, () => {
  console.log("3000 port listen");
});

 

7. 동작 확인

7-1. 초기 화면

사용자가 로그인 하지 않았으므로, '/login' 페이지로 redirect 된다.

7-2. 회원가입

회원가입 후의 화면과 DB

7-3. 로그인

if (req.user) 조건에 의해 인증된 유저의 화면 생성

7-4. 로그아웃