JS,C# : 비밀번호 PASSWORD 안전도(강도; Strength) 표기하기

 

 

 

 

로그인 화면이나 회원가입을 할 때, 입력한 비밀번호 패턴에 따라, 약~강으로 보여줄 수 있습니다. 숫자, 문자, 특수문자가 결합될 경우 '강' strong 으로 보여지게 될겁니다. 즉, 정규식을 사용하여 숫자, 대소문자 혼합, 특수문자 포함 여부를 확인하고, 주어진 암호의 길이와 조건을 만족하는지 여부에 따라 암호의 강도를 계산합니다.

 

C#

using System;
using System.Text.RegularExpressions;

public class Program
{
    public static bool HasNumber(string number)
    {
        return new Regex(@"[0-9]").IsMatch(number);
    }

    public static bool HasMixed(string number)
    {
        return new Regex(@"[a-z]").IsMatch(number) && new Regex(@"[A-Z]").IsMatch(number);
    }

    public static bool HasSpecial(string number)
    {
        return new Regex(@"[!#@$%^&*)(+=._-]").IsMatch(number);
    }

    public static dynamic StrengthColor(int count)
    {
        if (count < 2)
            return new { label = "Poor", color = "error.main" };
        else if (count < 3)
            return new { label = "Weak", color = "warning.main" };
        else if (count < 4)
            return new { label = "Normal", color = "warning.dark" };
        else if (count < 5)
            return new { label = "Good", color = "success.main" };
        else if (count < 6)
            return new { label = "Strong", color = "success.dark" };
        else
            return new { label = "Poor", color = "error.main" };
    }

    public static int StrengthIndicator(string number)
    {
        int strengths = 0;
        if (number.Length > 5)
            strengths += 1;
        if (number.Length > 7)
            strengths += 1;
        if (HasNumber(number))
            strengths += 1;
        if (HasSpecial(number))
            strengths += 1;
        if (HasMixed(number))
            strengths += 1;
        return strengths;
    }

    public static void Main()
    {
        // Test the converted code
        string password = "Abc123!";

        int strength = StrengthIndicator(password);
        var color = StrengthColor(strength);

        Console.WriteLine($"Password Strength: {color.label}");
        Console.WriteLine($"Color: {color.color}");
    }
}

 

 

아래는 JavaScript 코드이며, 유틸리티 함수로 사용할 수 있도록 함수로 구성되어 있으며, 주어진 암호의 강도를 계산하고 레이블과 색상을 출력합니다.

아래 코드는 위의 C# 코드와 기능적으로 동일하게 작동합니다. 암호 강도에 따라 적절한 레이블과 색상을 반환하고 출력합니다.

JavaScript 프로젝트에서 해당 함수를 가져와 암호 강도를 쉽게 계산하고, 강도에 맞는 레이블과 색상을 활용할 수 있습니다.

 

 

JavaScript

function hasNumber(number) {
  return /[0-9]/.test(number);
}

function hasMixed(number) {
  return /[a-z]/.test(number) && /[A-Z]/.test(number);
}

function hasSpecial(number) {
  return /[!#@$%^&*)(+=._-]/.test(number);
}

function strengthColor(count) {
  if (count < 2) {
    return { label: 'Poor', color: 'error.main' };
  } else if (count < 3) {
    return { label: 'Weak', color: 'warning.main' };
  } else if (count < 4) {
    return { label: 'Normal', color: 'warning.dark' };
  } else if (count < 5) {
    return { label: 'Good', color: 'success.main' };
  } else if (count < 6) {
    return { label: 'Strong', color: 'success.dark' };
  } else {
    return { label: 'Poor', color: 'error.main' };
  }
}

function strengthIndicator(number) {
  let strengths = 0;
  if (number.length > 5) {
    strengths += 1;
  }
  if (number.length > 7) {
    strengths += 1;
  }
  if (hasNumber(number)) {
    strengths += 1;
  }
  if (hasSpecial(number)) {
    strengths += 1;
  }
  if (hasMixed(number)) {
    strengths += 1;
  }
  return strengths;
}

// 테스트 예제
const password = 'Abc123!';

const strength = strengthIndicator(password);
const color = strengthColor(strength);

console.log(`Password Strength: ${color.label}`);
console.log(`Color: ${color.color}`);

 

 

활용하기

 

위의 코드를 실제 HTML 에 적용하여 PROCESS 를 활용해서 사용해 봅시다.

// HTML 요소 가져오기
const passwordInput = document.getElementById('password');
const meter = document.getElementById('meter');
const textbox = document.querySelector('.textbox');

// 암호 입력 이벤트 핸들러
passwordInput.addEventListener('input', handlePasswordInput);

function handlePasswordInput() {
  const password = passwordInput.value;
  
  // 암호 강도 계산
  const strength = strengthIndicator(password);
  
  // 암호 강도에 따라 progress 바 업데이트
  meter.value = strength;
  
  // 암호 강도에 따라 메시지 표시
  const color = strengthColor(strength);
  textbox.textContent = `Password Strength: ${color.label}`;
  textbox.style.color = color.color;
}

 

<body>
    <form>
        <input type="password" id="password" autocomplete="off">
        <progress max="4" value="0" id="meter"></progress>
    </form>
    <div class="textbox"></div>
    ....
</body>