本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
平时开发网站时,为了用户的账号安全,我们大多数时候需要在用户注册时,对用户的密码强度加以限制或者提示,让用户知道自己的密码是否合理。
于是本文就介绍一个非常好用的zxcvbn包,可以得到一个密码字符串的安全程度得分,赶快来学会它吧。
下载包
yarn add zxcvbn
或
npm i zxcvbn -S
在页面引入并使用
import zxcvbn from 'zxcvbn';
zxcvbn是个函数,入参是字符串也就是用于检测的密码。
zxcvbn('123456abc!!!')
函数返回一个对象:
- 该对象中其中与密码强度相关的属性有guesses、guesses_log10、score。
那么我们该用哪个呢?
-
首先,guesses的数据比较大,则会不好判断。
-
然后,score得分只有0~4,且只有整数范围并没有小数,如果将它作为强度进度,变化不够丰富,只能在特定需求的情况下使用,没办法满足大多数场景。
-
所以推荐使用
guesses_log10
,我们可以将密码强度的弱、中、强
分为0 ~ 4
、4 ~ 8
、8~12及以上
。guesses_log10
的数值可以比较合理的占据这些强度位置。
结合h5的meter标签
以react中使用为例:
-
onchange监听密码框内容,在输入密码时保存状态,将密码串传入zxcvbn函数,再将得到的结果属性guesses_log10保存到value。
-
该value值正好作为得分传入meter,meter可以设置强度值,根据value得到相应的强度进度条。
-
如果你有使用其他的进度组件,同样也可以将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>
);
}
}
尾言
如果觉得文章还不错的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~