[Vue.js] vue3 cryptoJS sha256 비밀번호 암호화, 정규식 조건 설정

비밀번호 변경 팝업을 개발하는 중,

crypto.js 사용법과 함께 암호화 처리 방법에 대해 알아보겠습니다.

(vue 3 버전, typescript 사용, vue-cryptojs 2.4.5 버전 사용)

 

---

 

 

1. vue- cryptojs 공식 문서

GitHub : https://github.com/tpenaranda/vue-cryptojs

GitHub - tpenaranda/vue-cryptojs: A small wrapper for integrating crypto-js into VueJS

 

* download

npm install vue-cryptojs

 

 

 

2. 비밀번호 변경 팝업 내용 (html)

- 새 비밀번호와 비밀번호 확인 입력란에 총 두 번 입력 후 비밀번호를 변경합니다.

<template>
  <div id="password-component">
    <div class="input-area">
      <div class="pwd-input">
        <span>새 비밀번호 입력</span>
        <input id="pwd" type="password" v-model="newPwd" />
      </div>
      <div class="pwd-input">
        <span>비밀번호 확인</span>
        <input type="password" v-model="newPwdChk" />
      </div>
      <div class="info">
        <p>* 영어 대/소문자, 숫자, 특수문자 모두 포함, 8~16자로 입력</p>
        <p>* 사용 가능한 특수문자 : # ? ! @ $ % ^ & * - . /</p>
      </div>
    </div>

    <div class="button-area">
      <button @click="updatePwd()">변경</button>
    </div>
  </div>
</template>

 

- 영어 대문자, 소문자, 숫자, 특수문자(# ? ! @ $ % ^ & * _ . /)를 포함하여 입력하도록 안내를 했습니다.

- 비밀번호 글자 수는 8~16자로 제한했습니다.

 

 

3. TypeScript 내용

<script setup lang="ts">
import { inject, ref } from "vue";
import { removeToken } from "@/util/auth";
import CryptoJS from "crypto-js";
import { useUserStore } from "@/stores/userStore";

const cryptojs = inject("cryptojs") as typeof CryptoJS;
const userStore = useUserStore();
const newPwd = ref("");
const newPwdChk = ref("");

const updatePwd = async () => {
  try {
    if (newPwd.value === newPwdChk.value) {
      let regex = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-./]).{8,16}$/;

      if (regex.test(newPwd.value)) {
        await userStore.updatePwd({
          password_new: cryptojs.SHA256(newPwd.value).toString(),
        });

        if (userStore.userItem) {
          removeToken(); // 쿠키 토큰 삭제
          alert("비밀번호가 변경되었습니다.");
        }
      } else {
        alert("비밀번호 변경 조건을 읽어주세요.");
      }
    } else {
      alert("비밀번호가 일치하지 않습니다.");
    }
  } catch (e) {}
};
</script>

 

- typescript를 사용했고, vue의 inject, ref를 가져옵니다.

- auth.ts 파일을 생성해서 쿠키에 토큰을 저장, 삭제하는 내용을 만들었고, 그중에 토큰을 삭제하는 removeToken을 가져옵니다.

- crypto-js를 가져옵니다.

- userStore.ts 파일을 생성하여 user 정보를 사용할 수 있도록 합니다.

 

 

반응형

 

 

- updatePwd 함수를 보면 먼저 두 입력창에 적은 비밀번호가 같은지 확인합니다.

if (newPwd.value === newPwdChk.value)

 

 

- 만약 올바르게 입력했다면 정규식을 이용하여 비밀번호 조건이 일치하는지 확인합니다.

let regex = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-./]).{8,16}$/;

if (regex.test(newPwd.value))

 

 

- regex.test에 통과했다면 userStore를 가져와서 새로운 비밀번호를 저장합니다.

- 이때 저장할 때 cryptojs.SHA256을 사용하여 암호화 처리합니다.

await userStore.updatePwd({
  password_new: cryptojs.SHA256(newPwd.value).toString(),
});

 

 

- 위의 데이터 처리에 성공했다면 쿠키 토큰을 삭제합니다.

if (userStore.userItem) {
  removeToken(); // 쿠키 토큰 삭제
  alert("비밀번호가 변경되었습니다.");
}

 

 

 

 

이상으로 vue3 typescript 환경에서 비밀번호 암호화 및 정규식 조건 테스트하는 방법에 대해 알아보았습니다.

---