如何计算密码强度？

---

平时我们在浏览各种网站和 APP 的时候，都接触过密码这个东西。

密码设置的好不好，关乎到你的账号安全性，越复杂的密码越安全，所以密码强度很重要，而我们在做注册功能的时候，也有责任去帮协助用户设置一个高密码强度的密码。

那么密码强度怎么计算呢？ 且应该如何实现以下这样的密码强度动画展示效果呢？

思路

其实思路很简单：

1. 监听密码输入框的变化

2. 密码变化时，获取密码文本，并通过某种方式计算这个密码的强度分数

3. 根据强度分数，改变下方块的颜色和宽度：

(a) 0分：强度低，红色，宽度 20%

(b) 1分：强度低，红色，宽度 40%

(c) 2分：强度中，橙色，宽度 60%

(d) 3分：强度高，绿色，宽度 80%

(e) 4分：强度高，绿色，宽度 100%

计算密码强度分数

用什么方式去计算密码强度方式呢？我们可以用 @zxcvbn-ts/core这个库来计算。

@zxcvbn-ts/core 是 zxcvbn 密码强度估计器的 TypeScript 实现版本，用于帮助开发者评估用户设置密码的复杂度和安全性，计算的依据有：

• 密码长度： 越长分数越高

• 字符类型： 数字、字母、符号

• 词典攻击检测： 内置词典列表，检测密码强度

• 评分系统： 0-4分，分数越高越安全

• 熵计算： 评测密码所需尝试次数，熵越高，分数越高

pnpm i @zxcvbn-ts/core

密码强度动画展示效果

计算了分数之后，我们需要根据分数去展示

• 不同的颜色

• 不同的宽度

我们可以使用属性选择器的方式，去完成这一个效果，看以下代码：

当密码改变的时候，会实时计算密码强度分数，这也就是意味着 data-score 这个属性会一直变，接着我们可以在样式中，去根据属性选择器去设置不同的颜色和宽度

现在可以看到这样的效果

完善动画效果

但是我们如果想实现分格的效果，可以借助伪元素去做。

现在可以达到我们期望的效果。

完整代码

import { Input } from 'antd'  
import { useMemo, useState } from 'react'  
import { zxcvbn } from '@zxcvbn-ts/core'  
import './Index.less'  
  
const Index = () => {  
   const [password, setPassword] = useState('')  
   const passwordStrength = useMemo(() => {  
        return zxcvbn(password).score  
   }, [password])  
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {  
        setPassword(e.target.value)  
   }  
  
   return <>  
        <Input.Password value={password} onChange={onChange} />  
        <div className='strength-meter-bar'>  
            <div className='strength-meter-bar--fill' data-score={passwordStrength}></div>  
        </div>  
    </>  
}  
  
export default Index

// Index.less  
  
.strength-meter-bar {  
    position: relative;  
    height: 6px;  
    margin: 10px auto 6px;  
    border-radius: 6px;  
    background-color: rgb(0 0 0 / 25%);  
    
    // 增加的伪元素样式代码  
    &::before,  
    &::after {  
      content: '';  
      display: block;  
      position: absolute;  
      z-index: 10;  
      width: 20%;  
      height: inherit;  
      border-width: 0 5px;  
      border-style: solid;  
      border-color: #fff;  
      background-color: transparent;  
    }  
    &::before {  
      left: 20%;  
    }  
    &::after {  
      right: 20%;  
    }  
    // 增加的伪元素样式代码  
    
    &--fill {  
      position: absolute;  
      width: 0;  
      height: inherit;  
      transition:  
        width 0.5s ease-in-out,  
        background 0.25s;  
      border-radius: inherit;  
      background-color: transparent;  
    
      &[data-score='0'] {  
        width: 20%;  
        background-color: darken(#e74242, 10%);  
      }  
    
      &[data-score='1'] {  
        width: 40%;  
        background-color: #e74242;  
      }  
    
      &[data-score='2'] {  
        width: 60%;  
        background-color: #efbd47;  
      }  
    
      &[data-score='3'] {  
        width: 80%;  
        background-color: fade(#55d187, 50%);  
      }  
    
      &[data-score='4'] {  
        width: 100%;  
        background-color: #55d187;  
      }  
    }  
  }

本文转自 https://mp.weixin.qq.com/s/8uR-LCTF2tuXY44sNF7vqQ，如有侵权，请联系删除。