ブラウザでグーグル認証システム互換の2FAトークンを生成

ブラウザのJavaScriptで二段階認証(Two-factor Authentication = 2FA)の時間ベースワンタイムトークン(パスコード)を生成する方法です。 npmモジュールのotplibのブラウザ対応版を利用するととても簡単に実装できます。

利用モジュール

otplib - GitHubのブラウザ対応版

サンプルコード

<div>
  秘密キー:
  <input type="text" id="secret">
  トークン:
  <span id="token"></span>
  残り時間:
  <span id="remaining"></span>秒
</div>

<script src="https://cdn.jsdelivr.net/npm/otplib@11.0.1/otplib-browser.js" integrity="sha256-UdpRnlwCkTLWjh9uf3+MU/OvuD8Xz5jAIi4QERLNpmY=" crossorigin="anonymous"></script>
<script>
const authenticator = otplib.authenticator;

setInterval(() => {
  refreshToken();
  document.querySelector("#remaining").textContent = authenticator.timeRemaining();
}, 1000);

function refreshToken() {
  const secret = document.querySelector("#secret").value;
  if (!secret || !secret.trim()) return;
  document.querySelector("#token").textContent = authenticator.generate(secret);
}
</script>

NOTE: otplib-browserをインポートするとグローバルにotplibがセットされます

実行

サンプルコードを実行してみましょう。「秘密キー」の所に2FAシステムで最初に提供されるシークレットを入力します。

秘密キー: トークン: 残り時間: 秒

TIP: シークレットはQRコード画像で提供されることがしばしばあります。シークレット文字列を取得するには、QRコードツールで中身のデータを解析すると良いでしょう。例えばGoogleの場合ですと、以下のようなフォーマットの文字列データが入っています。<シークレット>の部分がシークレットです:

otpauth://totp/Google%3A<アカウント名>%40gmail.com?secret=<シークレット>&issuer=Google

ひとこと

紹介したコードは芽萌丸ツールズの2FAトークン生成ツールでも利用されています。システム導入時に最初に提供されるシークレット(またはQRコード画像)さえ保管しておけば、当ツールを使うことでワンタイムトークンを生成できます。スマホを機種変更した時などに2FAの設定をインポートが出来なくて困るというのは割りとよくある話だと思いますが、普段からQRコード画像をスクショなどで保存しておけば、当ツールを使うことでイザという時に助かるかもしれません。

以上です。