92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>OTP 认证二维码生成器</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #f4f4f4;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
text-align: center;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
#qrcode {
|
||
|
|
margin: 20px auto 0; /* 上下左右居中 */
|
||
|
|
display: inline-block; /* 保证生成的二维码容器大小适应内容 */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>OTP 认证二维码生成器</h1>
|
||
|
|
|
||
|
|
<form id="otpForm">
|
||
|
|
<label for="account">账号:</label>
|
||
|
|
<input type="text" id="account" name="account" value="account" required><br><br>
|
||
|
|
|
||
|
|
<label for="password">密钥:</label>
|
||
|
|
<input type="text" id="password" name="password" value="password" required><br><br>
|
||
|
|
|
||
|
|
<label for="authType">认证方式:</label>
|
||
|
|
<select id="authType" name="authType">
|
||
|
|
<option value="totp">基于时间(TOTP)</option>
|
||
|
|
<option value="hotp">基于计数器(HOTP)</option>
|
||
|
|
</select><br><br>
|
||
|
|
|
||
|
|
<label for="counter" id="counterLabel" style="display:none;">计数器 (仅HOTP):</label>
|
||
|
|
<input type="number" id="counter" name="counter" value="0" min="0" style="display:none;"><br><br>
|
||
|
|
|
||
|
|
<button type="submit">生成二维码</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="qrcode"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('authType').addEventListener('change', function() {
|
||
|
|
const counterLabel = document.getElementById('counterLabel');
|
||
|
|
const counterInput = document.getElementById('counter');
|
||
|
|
if (this.value === 'hotp') {
|
||
|
|
counterLabel.style.display = 'inline';
|
||
|
|
counterInput.style.display = 'inline';
|
||
|
|
} else {
|
||
|
|
counterLabel.style.display = 'none';
|
||
|
|
counterInput.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('otpForm').addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const account = document.getElementById('account').value;
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
const authType = document.getElementById('authType').value;
|
||
|
|
let otpAuthUrl;
|
||
|
|
|
||
|
|
if (authType === 'totp') {
|
||
|
|
otpAuthUrl = `otpauth://totp/${account}?secret=${password}`;
|
||
|
|
} else if (authType === 'hotp') {
|
||
|
|
const counter = document.getElementById('counter').value;
|
||
|
|
otpAuthUrl = `otpauth://hotp/${account}?secret=${password}&counter=${counter}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
const qrCodeContainer = document.getElementById('qrcode');
|
||
|
|
qrCodeContainer.innerHTML = ""; // 清空之前的二维码
|
||
|
|
new QRCode(qrCodeContainer, otpAuthUrl);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|