Google Authenticator用のQRコードを生成するツール

Google Authenticator用のQRコードを生成するツールをJavaScriptとGoogle Chart APIで作ってみた。

ツール
ソースコード

ツール

issuer
username
secret

結果

ソースコード

<table>
    <tr>
        <td>issuer</td>
        <td><input type="text" id="issuer" placeholder="〇〇システム用"/></td>
    </tr>
    <tr>
        <td>username</td>
        <td><input type="text" id="username" placeholder="user000001"/></td>
    </tr>
    <tr>
        <td>secret</td>
        <td><input type="password" id="secret" placeholder="ABCDEF0123456789ABCDEF0123456789"/></td>
    </tr>
</table>
<input type="button" value="QRコード生成" onclick="generateQR()"/>
<div style="background-color: aliceblue; padding: 5px">
結果
    <ul>
        <li id="issuer_v"></li>
        <li id="username_v"></li>
        <li id="secret_v"></li>
    </ul>
    <img id="qrcode" width="180" height="180"/>
</div>
<script>
    function generateQR() {
        const issuer = document.querySelector('#issuer').value;
        const username = document.querySelector('#username').value;
        const secret = document.querySelector('#secret').value;
        document.querySelector("#issuer_v").innerHTML = "issuer: " + issuer;
        document.querySelector("#username_v").innerHTML = "username: " + username;
        document.querySelector("#secret_v").innerHTML = "secret: （秘密の" + secret.length + "文字）";
        const otpURI = "otpauth://totp/" + encodeURIComponent(username) + "/?" +
                "issuer=" + encodeURIComponent(issuer) + "&" +
                "secret=" + encodeURIComponent(secret) + "&" +
                "digits=6&period=30&algorithm=SHA1".replaceAll('+', );
        const imageURL = "https://chart.googleapis.com/chart?" +
                "cht=qr&chs=180x180&chld=L|0&chl=" + encodeURIComponent(otpURI);
        document.querySelector('#qrcode').setAttribute("src", imageURL);
    }
</script>

【参考サイト】