两步认证(2FA)的账号密钥如何转为二维码给APP扫描使用?

Viewed 83
安全

有的是给的账号密钥 如果转成二维码 给APP扫描呢?

DevWiki1
1 Answers

假设账号为: account, 密钥为: password

如果是基于时间(大部分采用)的认证方式, 其scheme格式为:

otpauth://totp/account?secret=password

如果是基于计数器的认证方式,其scheme格式为:

otpauth://hotp/account?secret=password&counter=0

按照上述的格式拼接自己的账号和密钥, 然后将字符串转为二维码, 手机APP即可扫描添加.

或者使用以下链接: OTP 认证二维码生成器

https://devwiki.net/tools/otp.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>
DevWiki1