有的是给的账号密钥 如果转成二维码 给APP扫描呢?
假设账号为: account, 密钥为: password
如果是基于时间(大部分采用)的认证方式, 其scheme格式为:
otpauth://totp/account?secret=password
如果是基于计数器的认证方式,其scheme格式为:
otpauth://hotp/account?secret=password&counter=0
按照上述的格式拼接自己的账号和密钥, 然后将字符串转为二维码, 手机APP即可扫描添加.
或者使用以下链接: OTP 认证二维码生成器
如果不方便使用可采用以下代码:
<!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>