글 작성자: 망고좋아
반응형

🎯 회원가입 구현하기

  • 회원가입 시 다양한 정보를 받기보다는 절차를 간단하게 만들어서 사용자들이 부담 없이 가입할 수 있도록 해야 된다.

 

📝 회원 정보를 데이터베이스에 저장하기

  • 회원의 비밀번호를 그대로 저장한다면 관리자가 모든 회원의 비밀번호를 알 수 있다. → 보안 취약점 발생

 

📕 비밀번호 저장방법 - Hash

  • Hash는 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법이다.
  • hash 출력 값을 이용해 사용자의 비밀번호를 알아낼 수 없다.
  • hash 함수는 단방향 암호화 함수로, hash 값을 알더라도 원본 문자열을 알아낼 수 없다.
  • 비밀번호의 Hash 값을 데이터베이스에 저장하고, 로그인 시 전달된 비밀번호를 Hash 하여 저장된 값과 비교해 로그인을 처리한다.

 

📕 SHA1

const hash = crypto.createHash('sha1');
hash.update(password);
hash.digest("hex");
  • Node.js의 기본 제공 모듈인 crypto 모듈을 사용하여 hash 값을 얻을 수 있다.
  • 간단하게 sha1 알고리즘을 사용하거나 보다 강력한 sha224, sha256 등의 알고리즘도 사용할 수 있다.

 

📝회원가입 구현하기

📕 회원가입 flow

  • 회원가입 페이지 구현
  • script를 이용해 이메일 형식, 비밀번호 확인 문자 확인 ⇒ validation
  • form을 이용해 post 요청 전송
  • 회원가입 처리 및 redirect

 

📕 회원가입 페이지

...
form(action="/join" method="post" onsubmit="return check()") // check()를 통해 form validation
    table
        tbody
            tr
                td 아이디
                td: input(type="text" name="email")
            tr
                td 이름
                td: input(type="name" name="name")
            tr
                td 비밀번호
                td: input(type="password" name="password")
            tr
                td 비밀번호 확인
                td: input(type="password" name="password_confirm")
            tr
                td(colspan="2")
                input(type="submit" value="가입하기")
...

...
script.
    function check() {
      const email = document.querySelector('[name="email"]').value;
      if (!/^\\S+@\\S+\\.\\S+$/.test(email)) {
        alert("이메일 형식이 올바르지 않습니다.");
        return false;
      }

      const password = document.querySelector('[name="password"]').value;
      if (password.length < 8) {
        alert("최소 8자리 이상의 비밀번호를 설정 해 주세요");
        return false;
      }

      const passwordConfirm = document.querySelector('[name="password_confirm"]').value;
      if (password != passwordConfirm) {
        alert("비밀번호 확인이 일치하지 않습니다");
        return false;
      }
      return true;
}

 

📕 회원가입 요청 처리

router.post(... => {
  const { email, name, password } = req.body;

  // 1. 비밀번호 hash 값 저장 
  const pwHash = getHash(password);
  const exists = await User.findOne({
    email,
  });

  // 2. 이미 존재하는 회원인지 체크
  if (exists) {
    throw new Error("이미 가입 된 메일입니다");
  }

    // 회원가입
  await User.create({
    email,
    name,
    password: pwHash, // hash값을 저장!!!
  });

    // 3. 가입 후 메인화면으로 redirect
  res.redirect("/");
});
  • 비밀번호 hash 값 저장 → 이미 존재하는 회원인지 체크 → 가입 후 메인화면으로 redirect
반응형