Moostock(11) - Next.js bcrypt 비밀번호 암호화

이제 차트를 보여주는 곳은 1차적으로 완성한거 같아서 

 

자산평가 페이지를 만들어보려 한다

 

내가 무슨 종목을 가지고 있는지 직접 가져올수는 없기때문에

 

종목, 평단가, 수량등을 수동으로 입력해서

 

현재가와 비교하여 지금 자산이 얼마가 되는지 보여주려 한다

 

나중에 최종적으로는 배포하는게 목적인데

 

창피한 나의 포폴은 보여줄수 없으므로 비밀번호를 설정하려 한다

 

회원가입까지는 만들기도 귀찮고 굳이 필요 없을거 같아서

비밀번호를 db에 저장하고 그것과 비교하여 비밀번호가 일치하면 페이지에 접근할 수 있도록 하려고 한다

 

근데 비밀번호를 그대로 저장하는건 아무래도 찝찝하고 

보안상에도 문제가 있을거같아 암호화 해서 저장하는 방법을 찾아봤다

 

검색을 해보니 bcrypt를 많이 쓰고 있는거 같다

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

bcrypt

사용 방법은 생각보다 간단해서 찾아보면 금방 할수 있을것이다

 

회원가입을 하지 않기때문에 수동으로 비밀번호를 암호화해서 db에 저장했다

 

그리고 내가 입력한 비밀번호와 일치하면 페이지를 보여주도록 설계했다

 

근데 여기서 에러가 발생할 수도 있는데

https://velog.io/@js43o/bcrypt%EC%99%80-bcrypt.js%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

bcrypt와 bcrypt.js의 차이점

bcrypt는 서버에서만 사용할수 있다는 점이였다

 

원래 처음에는 별 생각없으 프론트단에서 db에서 비밀번호 데이터를 가져오고 비교하려 했는데

 

프론트에서 db에 직접 접근하는건 좋지 않아보이기도 하고 암호화는 백엔드에서 수행하는게 좋다고하여

 

암호를 가져와 비교해서 결과를 리턴해주는 api를 하나 만들었다

 

근데 또 동기 비동기 문제로 결과값을 제대로 리턴해주지 못하여 await를 사용하여 해결했다

 

공식문서에서는

// Load hash from your password DB.
bcrypt.compare(myPlaintextPassword, hash, function(err, result) {
    // result == true
});
bcrypt.compare(someOtherPlaintextPassword, hash, function(err, result) {
    // result == false
});

이런식으로 함수형태로 결과를 확인하는데

const check = await bcrypt.compare(myPlaintextPassword, hash)

이렇게 await를 사용해주면 동기 비동기 문제를 해결해 줄 수 있었다

쨌든 이제 자산평가 페이지로 이동하면 처음에 이런 화면이 보이고

 

비밀번호가 일치해야 페이지에 접근할 수 있다

 

이제 다음엔 자산평가 페이지를 대략 완성해서 돌아오겠다!!