工具在线使用 直接食用地址(https://2fa.moyefu.cn , https://otp.moyefu.cn)
html代码 基于TOTP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双重验证码/二步验证码获取工具</title>
<script src="https://cdn.bootcdn.net/ajax/libs/otpauth/9.1.4/otpauth.umd.js"></script>
<style>
body {
text-align: center;
width: 100%;
}
#progress {
color: red;
background-color: #ff0000;
width: 100%;
height: 2px;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<progress id="progress" max="0" value="0" style="display: none;"></progress>
<p><input type="text" id="secret" placeholder="请输入秘钥" value=""></p>
<p>当前验证码：<span id="code">请输入秘钥</span></p>
<p>双重密钥为：<span id="secret2">请输入秘钥</span></p>
<p>剩余的时间：<span id="remainingTime"></span></p>
<p> (请在倒计时结束前输入验证码完成登录或者验证)</p>
</body>
<script>
const refreshTime = 30; // 刷新时间
// 监听#secret 变化
document.getElementById('secret').addEventListener('input', function (e) {
let secret = e.target.value;
refreshCode(secret);
});
// 定时器 每秒触发
setInterval(function () {
let secret = document.getElementById('secret').value;
if (!secret) {
document.getElementById('code').innerText = '请输入秘钥';
document.getElementById('secret2').innerText = '请输入秘钥';
document.getElementById('remainingTime').innerText = '请输入秘钥';
document.getElementById('code').style.color = 'black';
document.getElementById('remainingTime').style.color = 'black';
document.getElementById('progress').style.display = 'none';
return;
}
document.getElementById('progress').style.display = 'inline-block';
// 获取当前的秒数 与refreshTime取余数
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
seconds = refreshTime - seconds;
document.getElementById('remainingTime').innerText = seconds;
if (seconds > 15) {
// 设置code的颜色
document.getElementById('code').style.color = 'green';
} else if (seconds > 10) {
// 设置code的颜色
document.getElementById('code').style.color = 'blue';
} else {
if (seconds % 2 === 0) {
// 设置code的颜色
document.getElementById('code').style.color = 'red';
document.getElementById('remainingTime').style.color = 'red';
} else {
// 设置code的颜色
document.getElementById('code').style.color = 'black';
document.getElementById('remainingTime').style.color = 'black';
}
}
if (seconds === refreshTime) {
document.getElementById('code').innerText = '';
refreshCode(secret);
return;
}
}, 1000)
setInterval(function () {
let flo = Date.now()
// 提取后三位
flo = flo.toString().substring(flo.toString().length - 3) / 1000;
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
document.getElementById('progress').value = seconds + flo
}, 50);
/**
* 刷新验证码
*/
function refreshCode(secret) {
// 如果secret为空
if (!secret) return;
try {
var otpauth = new OTPAuth.TOTP({ secret: secret, encoding: 'base32' });
} catch (error) {
document.getElementById('code').innerText = '无效的秘钥';
document.getElementById('secret2').innerText = '无效的秘钥';
return;
}
let code = otpauth.generate();
document.getElementById('code').innerText = code;
document.getElementById('secret2').innerText = secret;
document.cookie = secret;
}
// 网页加载完成
window.onload = function () {
let secret = document.cookie;
if (secret) {
document.getElementById('secret').value = secret;
// 设置progress的max
document.getElementById('progress').max = refreshTime;
refreshCode(secret)
}
}
</script>
</html>一个文件即可搞定(此方法使用的是外部链接js 需要联网)
PS：内容没有美化只能简单使用 而且刷新周期是30s如果需要 自己在代码中修改refreshTime
发表评论 取消回复