OTP/2FA Two-Factor Authentication Code Generator Tool - JS Implementation, Online Tool + Source Code
Online Usage
Direct link: https://2fa.moyefu.cn 、 https://otp.moyefu.cn
HTML Code (Based on TOTP)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Factor Authentication Code Generator Tool</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="Please enter the secret key" value=""></p>
<p>Current Code: <span id="code">Please enter the secret key</span></p>
<p>Secret Key: <span id="secret2">Please enter the secret key</span></p>
<p>Remaining Time: <span id="remainingTime"></span></p>
<p> (Please enter the code before the countdown ends to complete login or verification)</p>
</body>
<script>
const refreshTime = 30; // Refresh interval
// Listen for changes in #secret
document.getElementById('secret').addEventListener('input', function (e) {
let secret = e.target.value;
refreshCode(secret);
});
// Timer triggers every second
setInterval(function () {
let secret = document.getElementById('secret').value;
if (!secret) {
document.getElementById('code').innerText = 'Please enter the secret key';
document.getElementById('secret2').innerText = 'Please enter the secret key';
document.getElementById('remainingTime').innerText = 'Please enter the secret key';
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';
// Get current seconds and calculate remainder with refreshTime
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
seconds = refreshTime - seconds;
document.getElementById('remainingTime').innerText = seconds;
if (seconds > 15) {
// Set code color
document.getElementById('code').style.color = 'green';
} else if (seconds > 10) {
// Set code color
document.getElementById('code').style.color = 'blue';
} else {
if (seconds % 2 === 0) {
// Set code color
document.getElementById('code').style.color = 'red';
document.getElementById('remainingTime').style.color = 'red';
} else {
// Set code color
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()
// Extract last three digits
flo = flo.toString().substring(flo.toString().length - 3) / 1000;
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
document.getElementById('progress').value = seconds + flo
}, 50);
/**
* Refresh the verification code
*/
function refreshCode(secret) {
// If secret is empty
if (!secret) return;
try {
var otpauth = new OTPAuth.TOTP({ secret: secret, encoding: 'base32' });
} catch (error) {
document.getElementById('code').innerText = 'Invalid secret key';
document.getElementById('secret2').innerText = 'Invalid secret key';
return;
}
let code = otpauth.generate();
document.getElementById('code').innerText = code;
document.getElementById('secret2').innerText = secret;
document.cookie = secret;
}
// Page loaded
window.onload = function () {
let secret = document.cookie;
if (secret) {
document.getElementById('secret').value = secret;
// Set progress max
document.getElementById('progress').max = refreshTime;
refreshCode(secret)
}
}
</script>
</html>Instructions
- A single file is sufficient (this method uses an external JS link, so internet connection is required)
Offline JS Download
PS
The content is not beautified and is only for simple use. The refresh cycle is 30s. If needed, modify refreshTime in the code yourself.