[Node.js/React] bcrypt로 비밀번호 암호화

·2023년 6월 29일
0

node-react 기초 공부

목록 보기
7/12
post-thumbnail

bcrypt 암호화를 사용하여 내부적으로 랜덤의 salt가 생성되고, 이에 따른 결과 해시값이 매번 바뀌기 때문에 비밀번호를 외부에서 찾아내기 어렵다. 즉, 보안성이 좋다는 것이다.

현재 DB에 저장된 비밀번호를 보면 너무 안전하지 않기 때문에, bcrypt를 이용하여 비밀번호를 암호화 해줘서 DB에 저장해줄 것이다.


아래 사이트를 참고하여 작성하였다.
https://www.npmjs.com/package/bcrypt

✏️bcrypt 설치

npm install bcrypt --save

를 입력해서 bcrypt 설치한다.
그리고 이를 이용하기 위해 User.js파일에

const bcrypt = require('bcrypt');
const saltRounds = 10;

를 추가한다.
여기서 salt는 랜덤 문자열을 의미하는데, 이는 비밀번호에 salt값을 추가하여 해시된 값이 다르게 만들어지도록 하는것이다.
간단히 예를 보자면, 아래와 같다.


✏️bcrypt 이용해 비밀번호 암호화

나는 비밀번호를 암호화하여 DB에 저장할 것이기 때문에, save하기 전에 이뤄져야 하는 동작이다. 그래서 mongoosepre라는 미들웨어를 이용하였다.

pre 미들웨어는 쿼리가 실행되기 전에 모두 실행되는 함수들이다.
(mongoose 미들웨어가 너무 많아서 나중에 한번 정리해서 올려야겠다,,😩)

User.js에 추가한 코드는 아래와 같다.

//User.js

userSchema.pre('save', function (next) {
    var user = this;

    // isModified - mongoose 모듈 내장함수
    if (user.isModified('password')) {
        // 비밀번호 암호화 - Salt 이용
        bcrypt.genSalt(saltRounds, function (err, salt) {
            // 에러 경우 - save의 err 처리로 넘겨줌
            if (err) return next(err)
          
            //해시 처리
            bcrypt.hash(user.password, salt, function (err, hash) {
                if (err) return next(err)
                user.password = hash
                next()
            })
        })
    } else {
        next()
    }
})

✏️ 추가된 코드 설명

  1. this: 사용자가 입력한 값을 의미
  • 즉, this.name이라고 한다면 사용자가 입력한 userSchema에서의 name값을 의미한다.
  • 나는 이 this값을 user 변수에 넣어주었다. 이제 this.name이 아닌, user.name의 형태로 입력하는것이다.
var user = this;
  1. Salt를 이용하여 비밀번호 암호화
  • genSalt 부분은 위에 작성한 사이트를 참고하였다.
  • 쉽게 말하면 위에서 설명했듯이 랜덤 문자열로 이뤄지는 salt값을 생성하는 코드라고 보면 된다.
  • hash의 경우, 사용자가 입력한 비밀번호 + salt값 으로 이뤄지므로 bcrypthash함수를 이용하여 처리해준다.
  • 이렇게 바뀐 password값은 mongoose의 내장함수인 isModified에 의해 변경되고, save가 이루어진다.
if (user.isModified('password')) {
	// 비밀번호 암호화 - Salt 이용
	bcrypt.genSalt(saltRounds, function (err, salt) {
		// 에러 경우 - save의 err 처리로 넘겨줌
		if (err) return next(err)
		//해시 처리
		bcrypt.hash(user.password, salt, function (err, hash) {
			if (err) return next(err)
			user.password = hash
            next()
        })
    })
} else {
	next()
}

✏️ 회원가입 해보기

이렇게 email값과 password값을 입력하여 회원가입을 시도하면
아래와 같이 password값은 보호되어 DB에 저장된다.

이 다음 작업은 이렇게 DB에 저장된 password가, 로그인할때 사용자가 입력한 값과 비교하여 맞는지 확인하여 성공적으로 로그인 할 수 있도록 하는 것이다.


👩‍💻 깃허브 주소

node-react

0개의 댓글