📝 오늘 한 것

1. user authentication - join, login

2. bcrypt.hash() / form validation / status code / bcrypt.compare()

📚 배운 것

User Authentication

1. 계정(accout) 생성

+시작하기 전에 globalRouter를 rootRouter로 모두 수정해주었다.

1) userSchema & User 모델 만들기

• models 폴더 안에 User.js 파일을 만든 후 userScheama와 User 모델을 만든다.

• init.js 파일에서 User.js 파일을 import 한다.

• email과 username은 중복을 방지하기 위해 unique: true 를 추가한다.

2) getjoin 컨트롤러

export const getJoin = (req, res) => {
  return res.render("join", { pageTitle: "Join" });
};

3) join.pug 파일 생성

이메일과 비밀번호는 type 속성 값을 각각 email과 password로 지정해준다.

extends base

block content 
  form(method="POST")
    input(name="name", type="text", placeholder="Name", required)
    input(name="email", type="email", placeholder="Email", required)
    input(name="username", type="text", placeholder="Username", required)
    input(name="password", type="password", placeholder="Password", required)
    input(name="location", type="text", placeholder="Location")
    input(value="Join", type="submit")

4) userRouter에 route 추가

userRouter.route("/join").get(getJoin).post(postJoin);

5) postJoin 컨트롤러

join(회원가입)을 완료하면 login 페이지로 이동하도록 한다.

import User from "../modules/User";

export const postJoin = async (req, res) => {
  const { email, username, password, name, location } = req.body;
  await User.create({
    eamil,
    username,
    password,
    name,
    location
  });
  return res.redirect("/login");
};

6) password hashing(패스워드 해싱)

지금은 데이터베이스에 패스워드가 그대로 노출되어 있다.
보안을 위해 패스워드를 봐도 해석할 수 없도록 처리해야 한다.
패스워드 해싱(password hashing)을 이용하면, user가 입력한 정확한 패스워드를 모르더라도 패스워드 일치 여부를 확인할 수 있다.

(1) 해시 함수

'노마드 코더' 유튜브 中 비밀번호 털렸다고? 암호화. 해시함수. 5분 설명. 참고

입력값(비밀번호) -> 해시 함수(hashing) -> 출력값(해싱된 비밀번호)

• 동일한 입력값 -> 동일한 출력값
• 일방향 함수 : 입력값 -> 출력값 (o) / 출력값 -> 입력값 (x)

그러나, 결과값을 알면 레인보우 테이블을 이용해 입력값을 알아낼 수 있다.
레인보우 테이블이란 입력값과 출력값을 연결해놓은 것을 말한다.

이를 방지하기 위해 salting 과정을 거쳐야 한다.
salt란 랜덤 텍스트를 말한다.

입력값(비밀번호+salt) -> 해시 함수(hashing) -> 출력값(해싱된 비밀번호)

이제 결과값을 알아도 레인보우 테이블을 이용해 입력값을 알아낼 수 없다.

(2) bcrypt.hash()

bcrypt란 솔트가 포함된 암호화 해싱 함수이다.
이를 이용하면 레인보우 테이블 공격으로 비밀번호가 해킹당하는 것을 방지할 수 있다.

사용 방법

bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {
    // Store hash in your password DB.
});

• myPlaintextPassword : user가 입력한 password
• saltRouds : 해싱 횟수

User.js

userSchema.pre("save", async function() {
  this.password = await bcrypt.hash(this.password, 5);
});

여기서 this는 저장하려는 user document를 말한다.
async & await을 사용했으므로 콜백 함수는 적어줄 필요 없다.

7) 폼 유효성 검사(form validation)

(1) username, email 중복 검사

• from에서 email과 username에 unique 속성을 주었기 때문에 이미 데이터베이스에 저장되어 있는 email과 username을 저장하려고 하면 에러가 뜬다.

• 코드 차원에서 user가 입력한 값이 데이터베이스에 저장된 값과 중복되는지 체크한 후 알맞은 응답을 보내도록 수정하여 앱 실행에 문제가 없도록 해야 한다.

• 코드 중복을 피하기 위해 $or을 사용했다.

(2) password 확인

• 패스워드를 한 번 더 확인하는 input을 만든다.

• 위에서 입력한 패스워드와 같은 값을 가지는지 확인해야 한다.

(3) postJoin 컨트롤러 수정

위 내용을 반영해 코드를 수정했다.

user 데이터를 생성하고 저장하는 부분에 try ~ catch 구문을 추가했다.
코드 차원에서 미리 처리한 에러 말고도 다른 에러를 대비하기 위함이다.

export const postJoin = async (req, res) => {
  const { email, username, password, password2, name, location } = req.body;
  // password 확인
  if (password !== password2) {
    return res.render("join", { pageTitle: "Join", errorMessage: "Password confirmation does not match." });
  }
  // username, email 중복 검사
  const exists = await User.exists({ $or : [{username}, {email}] });
  if (exists) {
    return res.render("join", { pageTitle: "Join", errorMessage: "This username/email is already taken."});
  }
  // user 데이터 생성 및 저장 (try ~ catch 구문 추가)
  try {
    await User.create({
      email,
      username,
      password,
      name,
      location,
    });
    return res.redirect("/login");
  } catch(error) {
    return render("join", { pageTitle: "Join", errorMessage: error._message});
  }
}; 

8) 상태 코드(status code)

처음 계정을 생성할 때 설정한 에러 문구가 떴더라도 브라우저는 username과 password를 저장할 것인지를 묻는다.

브라우저는 username과 password를 가지고 요청을 보낸 후 응답으로 200을 받으면 계정이 성공적으로 만들어졌다고 판단하여 이를 저장할 것인지 묻는 것이다.

따라서, 브라우저에게 렌더링은 잘 됐지만 에러가 있었다고 알려줘야 한다.
즉, 브라우저에게 200(성공)이 아니라 400(잘못된 요청)을 응답으로 보내야 한다.

res.status(400).render();

username, email 중복 검사와 password 확인 부분을 위와 같이 수정한다.
더불어 videoController.js 파일에서도 각각의 에러 부분에 400(서버가 요청의 구문을 인식하지 못함) 또는 404(찾을 수 없음)를 추가한다.

브라우저가 웹 사이트를 방문해 상태 코드 2xx을 받으면 해당 url을 히스토리에 남기지만, 상태 코드 4xx을 받으면 해당 url을 히스토리에 남기지 않는다.
그러므로 user를 위해 브라우저에게 알맞은 상태 코드를 보내는 일은 중요하다.

2. 로그인(Login)

1) getLogin 컨트롤러

export const getLogin = (req, res) => {
  return res.render("login", { pageTitle: "Login" });
};

2) postLogin 컨트롤러

먼저, user가 입력한 username이 데이터베이스에 있는지 확인한다. (밑에서 해당 user object를 가져와야 하므로 여기서 아예 exists()가 아니라 findOne()을 사용한다.)
없다면 에러 메시지와 함께 다시 login 페이지를 render 한다.

있다면 user가 입력한 password를 해싱하여 얻은 값이 데이터베이스에 있는지 확인한다.
없다면 에러 메시지와 함께 다시 login 페이지를 render 한다.
있다면 home으로 redirect 한다.

(1) bcrypt.compare()

bcrypt.compare(myPlaintextPassword, hash, function(err, result) {
    // result == true
});

myPlaintextPassword : user가 입력한 password
hash : 데이터베이스에 있는 password 해시 값

(2) 코드 작성

import bcrypt from "bcrypt"; // bcrypt를 import 해줘야 한다!

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  // user(username)가 존재하는지 확인
  const user = await User.findOne({ username });
  if (!user) {
    return res.status(400).render("login", {
      pageTitle: "Login",
      errorMessage: "An accout with this username does not exist.",
    });
  }
  // user가 입력한 password가 password의 해시 값과 일치하는지 확인
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.status(400).render("login", {
      pageTitle: "Login",
      errorMessage: "Wrong password",
    });
  }
  // user에게 로그인에 성공했음을 알려야 한다
  // ...
  return res.redirect("/");
};

이제 적어도 로그인을 시도한 user가 누구인지는 알고 있다.
실제로 로그인을 구현하기 위해선 쿠키와 세션에 대해 알아야 한다.

✨ 내일 할 것

1. 강의 계속 듣기