OTP/2FA 二要素認証コード取得ツール JS実装 オンラインツール＋ソースコード
ツールのオンライン利用
直接アクセス先：https://2fa.moyefu.cn 、 https://otp.moyefu.cn
HTML コード（TOTP ベース）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二要素認証コード取得ツール</title>
<script src="https://cdn.bootcdn.net/ajax/libs/otpauth/9.1.4/otpauth.umd.js"></script>
<style>
body {
text-align: center;
width: 100%;
}
#progress {
color: red;
background-color: #ff0000;
width: 100%;
height: 2px;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<progress id="progress" max="0" value="0" style="display: none;"></progress>
<p><input type="text" id="secret" placeholder="シークレットキーを入力してください" value=""></p>
<p>現在の認証コード：<span id="code">シークレットキーを入力してください</span></p>
<p>二要素認証キー：<span id="secret2">シークレットキーを入力してください</span></p>
<p>残り時間：<span id="remainingTime"></span></p>
<p> (カウントダウン終了前に認証コードを入力してログインまたは認証を完了してください)</p>
</body>
<script>
const refreshTime = 30; // 更新間隔
// #secret の変更を監視
document.getElementById('secret').addEventListener('input', function (e) {
let secret = e.target.value;
refreshCode(secret);
});
// タイマー 1秒ごとに実行
setInterval(function () {
let secret = document.getElementById('secret').value;
if (!secret) {
document.getElementById('code').innerText = 'シークレットキーを入力してください';
document.getElementById('secret2').innerText = 'シークレットキーを入力してください';
document.getElementById('remainingTime').innerText = 'シークレットキーを入力してください';
document.getElementById('code').style.color = 'black';
document.getElementById('remainingTime').style.color = 'black';
document.getElementById('progress').style.display = 'none';
return;
}
document.getElementById('progress').style.display = 'inline-block';
// 現在の秒数を取得し、refreshTime で剰余を求める
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
seconds = refreshTime - seconds;
document.getElementById('remainingTime').innerText = seconds;
if (seconds > 15) {
// code の色を設定
document.getElementById('code').style.color = 'green';
} else if (seconds > 10) {
// code の色を設定
document.getElementById('code').style.color = 'blue';
} else {
if (seconds % 2 === 0) {
// code の色を設定
document.getElementById('code').style.color = 'red';
document.getElementById('remainingTime').style.color = 'red';
} else {
// code の色を設定
document.getElementById('code').style.color = 'black';
document.getElementById('remainingTime').style.color = 'black';
}
}
if (seconds === refreshTime) {
document.getElementById('code').innerText = '';
refreshCode(secret);
return;
}
}, 1000)
setInterval(function () {
let flo = Date.now()
// 下3桁を抽出
flo = flo.toString().substring(flo.toString().length - 3) / 1000;
let seconds = Math.floor(Date.now() / 1000) % refreshTime;
document.getElementById('progress').value = seconds + flo
}, 50);
/**
* 認証コードを更新
*/
function refreshCode(secret) {
// secret が空の場合
if (!secret) return;
try {
var otpauth = new OTPAuth.TOTP({ secret: secret, encoding: 'base32' });
} catch (error) {
document.getElementById('code').innerText = '無効なシークレットキーです';
document.getElementById('secret2').innerText = '無効なシークレットキーです';
return;
}
let code = otpauth.generate();
document.getElementById('code').innerText = code;
document.getElementById('secret2').innerText = secret;
document.cookie = secret;
}
// ウェブページの読み込み完了
window.onload = function () {
let secret = document.cookie;
if (secret) {
document.getElementById('secret').value = secret;
// progress の max を設定
document.getElementById('progress').max = refreshTime;
refreshCode(secret)
}
}
</script>
</html>説明
- ファイル1つで完結します（この方法は外部リンクの JS を使用しているため、インターネット接続が必要です）
オフライン用 JS ダウンロード
補足
コンテンツは装飾されておらず、簡易的な使用のみ可能です。また、更新周期は 30 秒です。必要に応じて、コード内で refreshTime を変更してください。