리액트에서 cryptoJS 사용하는 법

cryptoJS 사용하는 법

지금부터 plan text를 암호화 하는 방법을 알아보겠습니다.

우선 Work Flow를 읽어보며 흐름을 잡으시고, 예시를 보면서 사용법을 익혀보겠습니다!

 

Work Flow

1. npm i crypto-js 설치

 npm i crypto-js 

 

2. import crypto from 'crypto-js'

 import crypto from 'crypto-js';

 

3. Encrypt

const ciphertext = CryptoJS.AES.encrypt('암호화할 값', 'secret key').toString();

*secret key는 서버개발자와 공유하는 키값이다.

 

4. Decrypt

const bytes = CryptoJS.AES.encrypt(ciphertext, 'secret key').toString();
const originalText = bytes.toString(CryptoJS.enc.Utf8); // output: '암호화할 값'

 

예시코드

export default function Authentication() {
    const [password, setPassword] = useState();
    
    const onChangeInput = (e) => {
      setPassword(crypto.AES.encrypt(e.target.value, process.env.REACT_APP_SECRET_KEY).toString())
    }
    
    const handleSubmit = (e) => {
      e.preventDefault();
      axios.post("api 주소", {pw: password}).then(res => console.log(res.data))
    }
    
   return (
    <form onSubmit={handleSubmit}>
        <label>비밀번호를 입력해주세요!</label>
        <input type="password" placeholder="비밀번호" onChange={onChangeInput}/>
      <button type="submit">Submit</Button>
    </form>
   )
}

Logic

1) 사용자가 비밀번호를 입력하면
2) 암호화된 상태로 상태값에 사용자가 입력한 비밀번호를 저장.
3) 사용자가 Submit버튼을 누르면 암호화된 상태값을 서버로 전달.

4) 이후 서버에서는 전달받은 암호화 값을 Decrypt(복호화)할 수 있다. (Work Flow 4번).