JavaScript로 간단한 암호 강도 표시기 만들기

웹에서 비밀번호 강도 표시기의 예를 많이 보셨을 것입니다. 사용자에게 사용 중인 암호가 약하다는 사실을 알리고 암호가 수정될 때 강도가 어떻게 변하는지 나타냅니다. 이 튜토리얼에서는 다음과 같은 비밀번호 강도 표시기를 만들 것입니다.



암호 입력 필드와 암호 강도를 시각적으로 표현하기 위해 나중에 스타일을 지정할 수 있는 암호 강도<div>를 생성하는 HTML부터 시작하겠습니다.

<div id="password">
  <label for="password-input">Password</label>
  <input
    id="password-input"
    name="password-input"
    type="password"          
    required
  />
  <div id="password-strength"><span></span></div> 
</div>

비밀번호 강도를 결정하기 위해 CDN을 통해 포함시킨 zxcvbn JavaScript 라이브러리를 사용할 것입니다. 독립 실행형 다운로드 및 NPM 패키지로도 사용할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

이제 JavaScript의 경우 먼저 비밀번호 입력 및 비밀번호 강도에 대한 변수를 정의하겠습니다.

const pwd = document.getElementById("password-input");
const pwdStrength = document.getElementById("password-strength");

그런 다음 이벤트 리스너를 사용하여 암호 입력 필드에서 문자가 추가되거나 제거될 때마다 암호 강도를 확인합니다.

pwd.addEventListener("input", function () {
  const pwdVal = pwd.value;
  let result = zxcvbn(pwdVal);  
  pwdStrength.className += "strength-" + result.score;  
});

zxcvbn()에서 반환된 점수는 0에서 4 사이의 척도입니다. 그런 다음 이 점수를 비밀번호 강도<div>에 클래스로 추가하여 반환된 점수에 따라 다른 CSS 스타일을 적용할 수 있습니다.

이제 암호 레이블과 입력 필드로 시작하는 CSS에 대한 JavaScript가 완성되었습니다.

#password {
  width: 250px;
}
#password label {
  display: block;
}
#password-input {
  width: 230px;
  padding: 10px;
  margin: 10px 0 5px 0;
}

이제 강도 표시기의 경우 사용자가 비밀번호 입력을 시작할 때까지 밝은 회색 스트립으로 나타납니다.

#password-strength {
  height: 5px;
  width: 100%;
  display: block;
  background-color: #ccc;
}
#password-strength span {
  display: block;
  height: 5px;
  border-radius: 2px;
  transition: all 500ms ease;
}

강도 점수에 따라 색상과 너비를 설정하기만 하면 됩니다.

.strength-0 span {
  background-color: red;
  width: 5%;
}
.strength-1 span {
  background-color: orangered;
  width: 25%;
}
.strength-2 span {
  background-color: orange;
  width: 50%;
}
.strength-3 span {
  background-color: yellowgreen;
  width: 75%;
}
.strength-4 span {
  background-color: green;
  width: 100%;
}