js 前端密码强度检测zxcvbn的使用(含react示例)

1,559 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

前言

平时开发网站时,为了用户的账号安全,我们大多数时候需要在用户注册时,对用户的密码强度加以限制或者提示,让用户知道自己的密码是否合理。

于是本文就介绍一个非常好用的zxcvbn包,可以得到一个密码字符串的安全程度得分,赶快来学会它吧。

下载包

yarn add zxcvbn

npm i zxcvbn -S

在页面引入并使用

import zxcvbn from 'zxcvbn';

zxcvbn是个函数,入参是字符串也就是用于检测的密码。

zxcvbn('123456abc!!!')

函数返回一个对象:

  1. 该对象中其中与密码强度相关的属性有guesses、guesses_log10、score。

那么我们该用哪个呢?

  1. 首先,guesses的数据比较大,则会不好判断。

  2. 然后,score得分只有0~4,且只有整数范围并没有小数,如果将它作为强度进度,变化不够丰富,只能在特定需求的情况下使用,没办法满足大多数场景。

  3. 所以推荐使用guesses_log10,我们可以将密码强度的弱、中、强分为0 ~ 4 4 ~ 88~12及以上guesses_log10的数值可以比较合理的占据这些强度位置。 在这里插入图片描述

结合h5的meter标签

以react中使用为例:

  1. onchange监听密码框内容,在输入密码时保存状态,将密码串传入zxcvbn函数,再将得到的结果属性guesses_log10保存到value。

  2. 该value值正好作为得分传入meter,meter可以设置强度值,根据value得到相应的强度进度条。

  3. 如果你有使用其他的进度组件,同样也可以将value值用在其他组件上,也非常容易。

import React, { Component } from 'react';
import zxcvbn from 'zxcvbn';

export default class index extends Component {
  state = {
    value: 0,
    msg: '',
  };
  render() {
    return (
      <div>
        <div>密码:</div>
        <input
          value={this.state.msg}
          onChange={e => {
            this.setState({
              msg: e.target.value,
              value: zxcvbn(e.target.value).guesses_log10,
            });
          }}
        ></input>
        <div>强度:</div>
        <meter min="0" max="12" low="4" high="8" optimum="10" value={this.state.value}></meter>
      </div>
    );
  }
}

在这里插入图片描述

在这里插入图片描述

尾言

如果觉得文章还不错的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~