Bcrypt 비밀번호 암호화

holang-i·2021년 5월 29일
0

Node & React

목록 보기
8/11

암호화 작업이 왜 필요한가?

보안성이 너무 떨어지기 때문!

Bcrypt라는 라이브러리를 이용해서 비밀번호를 암호화처리 할 것이다.

현재 가입을 진행했을 때 데이터베이스를 살펴보면, 저장된 비밀번호가 가입할 때 적었던 비밀번호로 등록되어있기 때문에 너무 안전하지 않다.

그래서 Bcrypt를 사용해서 비밀번호를 암호화처리를 한 뒤 데이터베이스에 저장할 것이다.

Postman을 이용해서 회원가입을 할 때 요렇게 입력한 비밀번호가 너무 적나라하게 다 보여서 보안성이 떨어진다.
그래서 암호화를 한 다음에 DB에 저장해서 관리하는 사람도 비밀번호를 모르게 처리해야 된다.


Bcrypt 라이브러리

$ npm install bcrypt --save


Bcrypt 암호화

register route로 가기

user 정보들(Account, password 등등)을 데이터베이스에 저장하기 전에 암호화해야된다.

// user model에 user 정보를 저장하기 전에 작업, 여기서 작업을 한 뒤 다 끝나면 index.js의 user.save로 들어간다.
userSchema.pre('save', (next) => {
  // 비밀번호 암호화하기: bcrypt

  // 작업이 다 끝나면 next()을 실행해서 user.save로 보내기
});

salt를 이용해서 비밀번호 암호화

  1. 먼저 salt를 생성
  2. 생성된 salt로 비밀번호를 암호화 시키는 작업을 해줘야 된다.

saltRounds: salt가 몇 글자인지
몇 자리인지를 정해서 비밀번호를 암호화한다.

bcrypt 홈페이지에 가서 사용법 확인하기

https://www.npmjs.com/package/bcrypt

  1. 위의 코드에서 hash함수의 첫 번재 인자 값인 myPlaintextPassword는

Postman으로 보낼 때 암호화가 되지 않은 password를 나타낸다.


  1. hash의 두 번째 인자 값에는 salt를 넣어줘야 되는데 bcrypt.genSalt에서 err가 발생하지 않았다면 salt가 잘 생성되었다는 의미니까, 여기서 salt를 두번재 인자값으로 넣어줄 수 있다.

  1. 그리고 세 번째 인자의 hash는 암호화 된 비밀번호이다.
    이 hash값을 기존에 모델에 있던 패스워드 값에 재할당 해줘서 암호화가 된 비밀번호를 적용시켜줘야된다.

암호화를 언제 진행할 지 고려하기

위에서 정리한 내용대로 코드를 작성하면 아래와 같다.

// user model에 user 정보를 저장하기 전에 작업, 여기서 작업을 한 뒤 다 끝나면 index.js의 user.save로 들어간다.
userSchema.pre('save', function(next) => {
  // userSchema의 값 가져오기
  let user = this;
  // 비밀번호 암호화하기: bcrypt (비밀번호를 변경할 때만 진행)
  if(user.isModified('password')) {
    bcrypt.genSalt(saltRounds, function(err, salt) => {
      if(err) return next(err); // err가 발생하면 바로 user.save로 보냄

      // salt를 제대로 생성했을 경우
      bcrypt.hash(user.password, salt, function(err, hash) => {
        // hash: 암호화 된 비밀번호
        if(err) return next(err);
        // hash를 만드는 데 성공 했을 경우 - model에 들어있던 plain password를 hash된 password로 변경
        user.password = hash;
        next(); // 작업이 다 끝나면 next()을 실행해서 user.save로 보내기
      });
    });
  } else { // 다른 정보를 바꿀 때
    next();
  }
});

arrow function으로 사용했다가 오류 발생

userSchema.save를 해주기 전에 userSchema.pre부분에서 암호화를 진행하면서 암호화가 잘 되고 있는지 확인하기 위해 Postman으로 가입을 진행해보았다.

success: false가 나오는데 status(200)이 나와서 user의 정보를 받아오는 부분부터 값을 찍어보았는데 계속해서 undefined가 찍혔다.

새로운 사용자 객체를 생성할 때 암호화를 진행하려는 부분에서 this로 받아왔기 때문에 arrow function이 이 this를 찾지 못해서 계속해서 값을 다룰 수 없었다. 🥶

그래서 function으로 바꿔서 진행해보니 이 함수가 호출 할 때의 this를 잘 찾아서 오류를 해결할 수 있었다.

아래는 암호화가 잘 되어서 값이 들어간 모습이다.



arrow function & function

정말 this는 너무 어렵다. this에 대한 개념을 제대로 활용해야된다.


화살표 함수는 함수가 만들어 지는 시점에서 this를 찾는다.

function 일반 함수 --> this는 호출하는 시점에서 this가 결정된다.






따라하며 배우는 노드, 리액트 시리즈를 통해 개념을 익히면서 실습하고 있습니다.
https://bit.ly/3wGxKGC

profile
🌿 주니어 프론트엔드 개발자입니다! 부족하거나 잘못된 정보가 있다면 알려주세요:)

0개의 댓글