手势密码设置和解锁的实现
这是第三届360前端星计划的在线作业的参考实现。
在线例子
安装和使用
直接在浏览器里引用:
<script src="https://s2.ssl.qhres.com/!9f2db498/HandLock-0.2.1.min.js"></script>
API
Locker
创建一个可以设置密码和验证密码的实例
var password = '11121323';
var locker = new HandLock.Locker({
container: document.querySelector('#handlock'),
check: {
checked: function(res){
if(res.err){
console.error(res.err); //密码错误或长度太短
}else{
console.log(`正确,密码是:${res.records}`);
}
},
},
update:{
beforeRepeat: function(res){
if(res.err){
console.error(res.err); //密码长度太短
}else{
console.log(`密码初次输入完成,等待重复输入`);
}
},
afterRepeat: function(res){
if(res.err){
console.error(res.err); //密码长度太短或者两次密码输入不一致
}else{
console.log(`密码更新完成,新密码是:${res.records}`);
}
},
}
});
locker.check(password);
几种 err 状态
- ERR_NOT_ENOUGH_POINTS 绘制的点数量不足,默认为最少4个点
- ERR_PASSWORD_MISMATCH 密码不一致,check时密码不对或者update时两次输入密码不一致
- ERR_USER_CANCELED 用户切换验证或设置操作时,取消当前的状态
可配置的参数
//recorder.js
const defaultOptions = {
container: null, //创建canvas的容器,如果不填,自动在 body 上创建覆盖全屏的层
focusColor: '#e06555', //当前选中的圆的颜色
fgColor: '#d6dae5', //未选中的圆的颜色
bgColor: '#fff', //canvas背景颜色
n: 3, //圆点的数量: n x n
innerRadius: 10, //圆点的内半径
outerRadius: 25, //圆点的外半径,focus 的时候显示
touchRadius: 35, //判定touch事件的圆半径
render: true, //自动渲染
customStyle: false, //自定义样式
minPoints: 4, //最小允许的点数
};
//locker.js
const defaultOptions = {
update: {
beforeRepeat: function(){}, //更新密码第一次输入后的事件
afterRepeat: function(){} //更新密码重复输入后的事件
},
check: {
checked: function(){} //校验密码之后的事件
}
}
clearPath()
清除 canvas 上选中的圆。
cancel()
取消当前状态,用于update/check状态切换。
修改和发布代码
下载仓库并安装依赖:
npm install
启动服务:
npm start
发布代码:
npm run deploy
License
MIT