[ReactJS] crypto 비밀번호 암호화 하기

어떤 식으로 암호화할지 고민을 많이 했다.

 

이전에는 sha256을 사용했는데 sha256은 2의 256승의 경우의 수를 만들 수 있다고 한다.

 

이번에는 salt를 사용해 보기 위해 sha512를 사용했다.

 

대충 찾아보니 sha512가 속도도 더 느리고 용량도 더 먹는다고 한다....ㅋㅋ

 

방법은 아래와 같다.

 

1. 클라이언트에서 임의로 32자리 salt를 만든다.

2. salt와 원본 패스워드를 가지고 hash값을 생성한다.

3. 생성된 hash와 salt를 서버에 저장한다.

4. 로그인시 해당 유저의 hash와 salt를 서버에서 받아와 로그인하는 원본 패스워드와 서버에서 받아온 salt를 가지고 hash를 만들고 서버에서 가져온 hash와 비교 후 맞으면 로그인 아니면 오류가 발생한다.

 

괜히 salt를 쓴다고 헛짓하다가 뭔가 좋지않은 방향으로 와버렸다....

 

그래도 일단 시작한 일이니 마무리를 지어봤다.

 

react에는 nodejs와 같이 cryto를 지원한다.

 

import crypto from 'crypto';

 

그리고 자바스크립트의 지식이 부족해 여기서 많이 헤매었다.

 

자바스크립트의 콜백에서 밖에 있는 변수를 변경해도 변경되지 않는다... 콜백 안에서 해결해야한다.(한 이틀 동안 찾아본 듯ㅠㅠ)

 

cryptoPass.js

return new Promise((resolve, reject) => {
        const salt = crypto.randomBytes(32).toString('base64');
        crypto.pbkdf2(password, salt, 몇번반복할지, 64, 'sha512', (err, hash) => {
            if(err){
                reject(err);
            } else{
                resolve({
                    hash: hash.toString('base64'),
                    salt: salt
                });
            }
        });
    });

 

new Promise((resolve, reject) => {}를 통해 따로 구현한 cryptoPass를 다른 .js에서 사용할 수 있었다.

패스워드와 salt를 여러 번 반복하여 hash를 만들어주는데 만 번 이상 하라고 해서 만 번을 해봤더니 너무 느린 거 같아서 숫자는 좀 줄여서 사용했다.

 

Main.js

function cryptoPass(password).then(result => {
      hash_saltGet(result.hash, result.salt);
    });

 

이렇게 가져온 hash와 salt를 가지고 가입이나 로그인을 할 수 있다.

 

서버에서 하는 작업을 최소한으로 줄이고자 클라이언트에서 많은 동작을 하게 했다.