[JavaScript, Node.js] 유튜브 클론 정리 7장 (3) - Login

머리글

오늘은 로그인 과정에 대해서 알아보자.

Login

우선 로그인 템플릿을 생성해 보자.

extends base


block content
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username", name="username", type="text", required)
        input(placeholder="Password", name="password", type="password", required)
        input(type="submit", value="Login")
    hr
    div
        span Don't have an account? 
        a(href="/join") Create one now →

우선 POST 형식의 form을 생성하고,
username과 password를 입력할 수 있게 한다.

그 밑에는 계정이 없는 유저를 위한 가입 페이지 연결 링크도 준비해 준다.

그리고 상단에 보면 errorMessage를 확인할 수 있는데 로그인 실패 시 에러 메시지를 이 span을 통해 컨트롤한다.

간단하게 템플릿을 만들었으면 이젠 컨트롤러를 생성해 준다.

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username });
  if (!user) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "An account with this username does not exists.",
    });
  }
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "Wrong password",
    });
  }
  return res.redirect("/");
};

앞서 계정 생성과 같은 방식으로,
아이디의 유무를 체크하고
만약 해당 username의 유저가 없다면,
존재하지 않는다는 에러메시지와 함께 로그인창으로 돌려보낸다.

그리고 비밀번호도 체크해줘야 하는데 앞에서 암호화를 위해 사용했던 bcrypt를 사용한다.

유저가 입력한 값과 기존 데이터베이스에 존재하는 값을 비교하여 동일하다면 로그인이 진행되고,
그렇지 않다면 비밀번호가 틀리다는 메시지와 함께 다시 로그인을 요청한다.

이때, 유저가 입력한 패스워드의 평문이 bcrypt를 이용하여 암호화된 문장으로 변경되어 비교한다.

이렇게 간단하게 로그인을 구현할 수 있었다.

마무리

이번 시간에는 username과 password의 유무를 확인하여 로그인을 구현해 보았다.

다음 시간에는 쿠키(Cookie)와 세션(Session)에 대해서 알아보자.