101 lines
4.3 KiB
HTML
101 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>JWT Token 测试工具</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||
.container { max-width: 800px; margin: 0 auto; }
|
||
textarea { width: 100%; height: 100px; margin: 10px 0; }
|
||
.result { background: #f5f5f5; padding: 15px; margin: 10px 0; border-radius: 5px; }
|
||
.error { background: #ffebee; color: #c62828; }
|
||
.success { background: #e8f5e8; color: #2e7d2e; }
|
||
button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
||
button:hover { background: #0056b3; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>JWT Token 验证工具</h1>
|
||
|
||
<h3>步骤1: 从浏览器获取Token</h3>
|
||
<p>1. 登录你的应用</p>
|
||
<p>2. 打开开发者工具 → Application → Local Storage → 找到 'iMeetingUser'</p>
|
||
<p>3. 复制其中的 token 值到下面的文本框</p>
|
||
|
||
<textarea id="tokenInput" placeholder="在此粘贴JWT token..."></textarea>
|
||
<button onclick="decodeToken()">解码 JWT Token</button>
|
||
|
||
<div id="result"></div>
|
||
|
||
<h3>预期的JWT payload应该包含：</h3>
|
||
<ul>
|
||
<li><code>user_id</code>: 用户ID</li>
|
||
<li><code>username</code>: 用户名</li>
|
||
<li><code>caption</code>: 用户显示名</li>
|
||
<li><code>exp</code>: 过期时间戳</li>
|
||
<li><code>type</code>: "access"</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<script>
|
||
function decodeToken() {
|
||
const token = document.getElementById('tokenInput').value.trim();
|
||
const resultDiv = document.getElementById('result');
|
||
|
||
if (!token) {
|
||
resultDiv.innerHTML = '<div class="result error">请输入JWT token</div>';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// JWT 由三部分组成，用 . 分隔
|
||
const parts = token.split('.');
|
||
if (parts.length !== 3) {
|
||
throw new Error('无效的JWT格式');
|
||
}
|
||
|
||
// 解码 header
|
||
const header = JSON.parse(atob(parts[0]));
|
||
|
||
// 解码 payload
|
||
const payload = JSON.parse(atob(parts[1]));
|
||
|
||
// 检查是否是我们的JWT
|
||
const isValidJWT = payload.type === 'access' &&
|
||
payload.user_id &&
|
||
payload.username &&
|
||
payload.exp;
|
||
|
||
const now = Math.floor(Date.now() / 1000);
|
||
const isExpired = payload.exp < now;
|
||
|
||
let resultHTML = '<div class="result ' + (isValidJWT ? 'success' : 'error') + '">';
|
||
resultHTML += '<h4>JWT 解码结果:</h4>';
|
||
resultHTML += '<p><strong>Header:</strong></p>';
|
||
resultHTML += '<pre>' + JSON.stringify(header, null, 2) + '</pre>';
|
||
resultHTML += '<p><strong>Payload:</strong></p>';
|
||
resultHTML += '<pre>' + JSON.stringify(payload, null, 2) + '</pre>';
|
||
|
||
if (isExpired) {
|
||
resultHTML += '<p style="color: red;"><strong>⚠️ Token已过期!</strong></p>';
|
||
} else {
|
||
const expireDate = new Date(payload.exp * 1000);
|
||
resultHTML += '<p style="color: green;"><strong>✅ Token有效，过期时间: ' + expireDate.toLocaleString() + '</strong></p>';
|
||
}
|
||
|
||
if (isValidJWT) {
|
||
resultHTML += '<p style="color: green;"><strong>✅ 这是有效的iMeeting JWT token!</strong></p>';
|
||
} else {
|
||
resultHTML += '<p style="color: red;"><strong>❌ 这不是有效的iMeeting JWT token</strong></p>';
|
||
}
|
||
|
||
resultHTML += '</div>';
|
||
resultDiv.innerHTML = resultHTML;
|
||
|
||
} catch (error) {
|
||
resultDiv.innerHTML = '<div class="result error">解码失败: ' + error.message + '</div>';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |