[6주차] Passport.js와 로그인 구현하기

2월 23일 자 학습 내용 정리입니다.

 

 

✅ Passport.js

Passport.js는 Express.js 어플리케이션에 간단하게 사용자 인증 기능을 구현하게 도와주는 패키지이다.
유저 세션 관리 및 다양한 로그인 방식 추가 기능을 지원한다.

 

Passport.js는 다양한 로그인 방식을 구현하기 위해 strategy라는 인터페이스를 제공한다.
strategy 인터페이스에 맞게 설계된 구현체를 그대로 passport에 붙이면 passport는 로그인 구현을 도와준다.
passport-google-oauth, passport-facebook, passport-twitter, passport-kakao, passport-naver 같이 SNS 계정을 통해서 바로 로그인할 수 있는 패키지 등 다양한 구현체들이 이미 존재하는데 그중 passport-local은 username, password를 사용하는 로그인의 구현체이다.

 

 

✏️ 예제 - 로그인 구현하기

로그인을 구현하는 방식은 다음과 같다.

• 로그인 화면 구성
• passport-local strategy로 로그인 구현
• passport.js 설정
• passport로 요청 처리

 

✔️ 로그인 화면 구성

...
form(action="/auth" method="post" onsubmit="return check()")
  table
    tbody
      tr
        td 이메일
        td: input(type="text" name="email")
      tr
        td 비밀번호
        td: input(type="password" name="password")
      tr
        td(colspan="2")
        td: input(type="submit" name="로그인")
...

 

로그인 페이지를 구현한 코드이다.

POST 요청을 보내기 위해 form을 사용했고 입력받을 이메일, 비밀번호 칸을 생성했다.

 

✔️ 유효 값 체크

...
script.
  function check() {
    const email = document.querySelector('[name="email"]').value;
    if (!email) {
        alert("이메일을 입력해 주세요.");
        return false;
    }
    
    const password = document.querySelector('[name="password"]').value;
    if (!password) {
        alert("비밀번호를 입력해 주세요.");
        return false;
    }
    return true;
 }

 

로그인 시에는 이메일과 비밀번호의 입력이 꼭 필요하기 때문에 이메일과 비밀번호를 둘 다 입력받았는지 확인한다.

 

✔️ strategy 생성

const config = {
  usernameField: "email",
  passwordField: "password",
};

const local = new LocalStrategy(config, async (email, password, done) => {
  try {
    const user = await User.findOne({ email });
    if (!user) {
      throw new Error("회원을 찾을 수 없습니다.");
    }
    if (user.password !== password) {
      throw new Error("비밀번호가 일치하지 않습니다.");
    }
    
    done(null, {
      shortId: user.shortId,
      email: user.email,
      name: user.name,
    });
  } catch (err) {
    done(err, null);
  }
});

 

passport-local을 사용하기 위해서는 먼저 Strategy를 생성하는데 이때 config 값을 전해준다.

passport-local이 username과 password를 사용해 사용자를 인증하기 때문에 인증할 때 쓰일 username이 email이고 password가 password임을 알려주는 것이다.

 

Strategy 생성 시 콜백함수에는 사용자로부터 받은 email, password 그리고 콜백함수인 done이 인자로 주어진다.

유저의 아이디가 있고 해당 유저의 비밀번호도 일치한다면 로그인은 성공한다.
로그인이 성공할 경우 done 함수의 첫 번째 인자는 null, 두 번째 인자는 입력받은 사용자의 정보를 전해준다.
로그인이 실패할 경우 done에 err를 넘겨준다.

 

쉽게 말해 done의 첫 번째 인자는 에러 발생 여부, 두 번째 인자는 사용자 정보의 전달 여부라고 생각하면 된다.

 

✔️ passport.js 설정

const local = require('./strategies/local');
passport.use(local);

 

작성한 strategy를 사용할 수 있도록 passport.use로 선언해야 한다.
passport.use로 strategy를 사용할 수 있게 선언한 뒤 passport.authenticate를 사용해 해당 strategy로 로그인 요청을 처리할 수 있다.

 

이 경우 passport.use 부분과 strategy 생성 부분을 합쳐 작성하기도 한다.

 

passport.use(new LocalStrategy(
  async function(username, password, done) {
    await User.findOne({ username: username }, function (err, user) {
      if (err) { return done(err); }
      if (!user) { return done(null, false); }
      if (!user.verifyPassword(password)) { return done(null, false); }
      return done(null, user);
    });
  }
));

 

✔️ 로그인 요청 처리

--- routes/auth.js ---
router.post("/", passport.authenticate("local"));

--- app.js ---
const session = require("express-session");

app.use(
  session({
    secret: "secret",
    resave: false,
    saveUninitialized: true,
  }),
);
app.use(passport.initialize());
app.use(passport.session());
app.use("/auth", authRouter);

 

passport.authenticate 함수를 http 라우팅에 연결하면 passport가 자동으로 해당 strategy를 사용하는 request handler를 생성한다.
이때 express-session과 passport.session()을 사용하면 passport가 로그인 시 유저 정보를 세션에 저장하고 가져오는 동작을 자동으로 수행해 준다.

 

✔️ session 활용

passport.serializeUser((user, callback) => {
  callback(null, user);
});
passport.deserializeUser((obj, callback) => {
  callback(null, obj);
});

 

session을 이용해 user를 사용할 때에는 serializeUser와 deserializeUser를 설정해 주어야 한다.

serializeUser는 user 객체를 전달받아 세션에 저장한다.

이로 인해 페이지 이동 시에도 로그인 정보가 유지될 수 있다.

deseializeUser는 세션에 저장된 정보를 통해 user 정보를 불러온다.

 

✔️ 로그아웃

router.get('/logout', ... {
    req.logout();
    res.redirect('/');
});

 

로그아웃의 경우 req.logout() 함수를 통해 세션의 로그인 정보를 삭제하여 구현할 수 있다.

 

✔️ 로그인 확인 미들웨어

function loginRequired(req, res, next) {
  if (!req.user) {
    res.redirect("/");
    return;
  }
  next();
}
app.use("/posts", loginRequired, postsRouter);

 

로그인 확인 미들웨어는 특정 구역에 로그인을 필수로 설정하고 싶을 경우 미들웨어를 사용하여 로그인 여부를 체크한다.

 

 

🔍 참조

passport로 로그인하기 https://www.zerocho.com/category/NodeJS/post/57b7101ecfbef617003bf457

passport-local https://www.passportjs.org/packages/passport-local/