JWT 解码工具
- 页面index.html
- 脚本
- 运行效果如下：
页面index.html
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Keycloak JWT 解码工具</title><scriptsrc="https://cdn.tailwindcss.com"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/8.0.20/jsrsasign-all-min.js"></script></head><bodyclass="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"><divclass="container mx-auto px-4 py-8 max-w-4xl"><headerclass="text-center mb-12"><h1class="text-4xl font-bold text-gray-800 mb-2">Keycloak JWT 解码工具</h1><pclass="text-gray-600">解码和验证 Keycloak 生成的 JWT 令牌</p></header><main><divclass="bg-white rounded-xl shadow-lg p-6 mb-8"><divclass="mb-6"><labelfor="jwt-token"class="block text-sm font-medium text-gray-700 mb-2"><iclass="fas fa-key mr-2"></i>JWT 令牌</label><textareaid="jwt-token"rows="4"class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"placeholder="请输入完整的 JWT 令牌..."></textarea></div><divclass="flex flex-wrap gap-4 mb-6"><buttononclick="decodeJWT()"class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition transform hover:scale-105"><iclass="fas fa-unlock-alt mr-2"></i>解码令牌</button><buttononclick="clearFields()"class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition"><iclass="fas fa-trash-alt mr-2"></i>清空</button></div></div><divid="result-section"class="hidden"><divclass="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"><divclass="bg-white rounded-xl shadow-lg p-6"><h2class="text-xl font-bold text-gray-800 mb-4 flex items-center"><iclass="fas fa-id-card mr-2 text-blue-600"></i>头部信息(Header)</h2><preid="header-output"class="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm"></pre></div><divclass="bg-white rounded-xl shadow-lg p-6"><h2class="text-xl font-bold text-gray-800 mb-4 flex items-center"><iclass="fas fa-user-circle mr-2 text-green-600"></i>负载信息(Payload)</h2><preid="payload-output"class="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm"></pre></div></div><divclass="bg-white rounded-xl shadow-lg p-6 mb-8"><h2class="text-xl font-bold text-gray-800 mb-4 flex items-center"><iclass="fas fa-shield-alt mr-2 text-purple-600"></i>令牌信息</h2><divclass="grid grid-cols-1 md:grid-cols-3 gap-4"><divclass="bg-blue-50 p-4 rounded-lg"><pclass="text-sm text-gray-600">颁发者(iss)</p><pid="issuer"class="font-semibold text-gray-800 truncate"></p></div><divclass="bg-green-50 p-4 rounded-lg"><pclass="text-sm text-gray-600">受众(aud)</p><pid="audience"class="font-semibold text-gray-800 truncate"></p></div><divclass="bg-yellow-50 p-4 rounded-lg"><pclass="text-sm text-gray-600">过期时间(exp)</p><pid="expires-at"class="font-semibold text-gray-800"></p></div></div></div><divclass="bg-white rounded-xl shadow-lg p-6"><h2class="text-xl font-bold text-gray-800 mb-4 flex items-center"><iclass="fas fa-check-circle mr-2 text-red-600"></i>验证状态</h2><divid="validation-result"class="p-4 rounded-lg"><pclass="text-center text-gray-600">请先解码令牌以查看验证结果</p></div></div></div></main><footerclass="mt-12 text-center text-gray-600 text-sm"><p>©2026Keycloak JWT 解码工具 - 专为 Keycloak 令牌调试而设计</p></footer></div><scriptsrc="script.js"></script></body></html>脚本
/** * JWT 解码工具 JavaScript 实现 */// 解码 JWT 令牌functiondecodeJWT(){constjwtToken=document.getElementById('jwt-token').value.trim();if(!jwtToken){alert('请输入有效的 JWT 令牌');return;}try{// 分割 JWT 令牌constparts=jwtToken.split('.');if(parts.length!==3){thrownewError('无效的 JWT 令牌格式');}// 解码头部和负载constheader=JSON.parse(atob(parts[0]));constpayload=JSON.parse(atob(parts[1].replace(/-/g,'+').replace(/_/g,'/')));// 显示解码结果displayDecodedJWT(header,payload);// 验证令牌validateToken(payload);// 显示结果区域document.getElementById('result-section').classList.remove('hidden');}catch(error){alert(`解码失败:${error.message}`);}}// 显示解码后的 JWT 信息functiondisplayDecodedJWT(header,payload){// 显示头部信息document.getElementById('header-output').textContent=JSON.stringify(header,null,2);// 显示负载信息document.getElementById('payload-output').textContent=JSON.stringify(payload,null,2);// 显示令牌信息document.getElementById('issuer').textContent=payload.iss||'N/A';document.getElementById('audience').textContent=Array.isArray(payload.aud)?payload.aud.join(', '):(payload.aud||'N/A');// 格式化过期时间if(payload.exp){constexpDate=newDate(payload.exp*1000);document.getElementById('expires-at').textContent=expDate.toLocaleString('zh-CN');}else{document.getElementById('expires-at').textContent='N/A';}}// 验证令牌functionvalidateToken(payload){constnow=Math.floor(Date.now()/1000);constresultElement=document.getElementById('validation-result');// 检查是否过期if(payload.exp&&payload.exp<now){resultElement.innerHTML=`<div class="text-center"> <i class="fas fa-times-circle text-red-500 text-3xl mb-2"></i> <p class="font-semibold text-red-600">令牌已过期</p> <p class="text-sm text-gray-600 mt-1">过期时间:${newDate(payload.exp*1000).toLocaleString('zh-CN')}</p> </div>`;resultElement.className='bg-red-50 border-l-4 border-red-500 p-4 rounded-lg';return;}// 检查是否生效if(payload.nbf&&payload.nbf>now){resultElement.innerHTML=`<div class="text-center"> <i class="fas fa-clock text-yellow-500 text-3xl mb-2"></i> <p class="font-semibold text-yellow-600">令牌尚未生效</p> <p class="text-sm text-gray-600 mt-1">生效时间:${newDate(payload.nbf*1000).toLocaleString('zh-CN')}</p> </div>`;resultElement.className='bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-lg';return;}// 令牌有效resultElement.innerHTML=`<div class="text-center"> <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i> <p class="font-semibold text-green-600">令牌有效</p> <p class="text-sm text-gray-600 mt-1">${payload.exp?`将在${Math.floor((payload.exp-now)/60)}分钟后过期`:'无过期时间'}</p> </div>`;resultElement.className='bg-green-50 border-l-4 border-green-500 p-4 rounded-lg';}// 清空输入和结果functionclearFields(){document.getElementById('jwt-token').value='';document.getElementById('result-section').classList.add('hidden');document.getElementById('validation-result').innerHTML='<p class="text-center text-gray-600">请先解码令牌以查看验证结果</p>';document.getElementById('validation-result').className='';}运行效果如下：
运行效果如下：
测试TOKEN
token如下:
eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJNVWNPLWJ1QVY4SWxrWUJNSUlwM3pldUIxYU9iUl94Nm9FZ256NmwyYlowIn0.eyJleHAiOjE3NjkzMDUxMDEsImlhdCI6MTc2OTMwNDgwMCwianRpIjoiNDVhNjBhYjQtOTU1OS00Yjg4LWEzMTAtNDZmODM2YWJiN2Y0IiwiaXNzIjoiaHR0cDovL2tleWNsb2FrLmRlbW9mb3IuY29tLmNuL2F1dGgvcmVhbG1zL2tleWNsb2FrLWxlYXJuIiwiYXVkIjoiYWNjb3VudCIsInN1YiI6ImEwODhlMjcyLThhNGUtNGI2Yi1hMjI0LWM3NjlhODYzNjRjYyIsInR5cCI6IkJlYXJlciIsImF6cCI6ImNoYXB0ZXItMSIsInNlc3Npb25fc3RhdGUiOiJlMDI5YzhkMy03YzA2LTRhMjItOGQyMC1jMjZmY2E2ZjU0MTEiLCJhY3IiOiIxIiwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbIm9mZmxpbmVfYWNjZXNzIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX0sImNoYXB0ZXItMSI6eyJyb2xlcyI6WyJ1c2VyIl19fSwic2NvcGUiOiJvcGVuaWQgZW1haWwgcHJvZmlsZSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwicHJlZmVycmVkX3VzZXJuYW1lIjoidXNlciJ9.XTN-kpc2nGjv6u91M6ONXpk8Nn1VYltaN5MhNOGZn-tXJd4DoCo-ZdpteHGznFF3Vfl3ivMMPeLVZl-Jd6kZNDK4q5WuM1sqCO8F3HM8MRS5iGOQdRhMR2rAb4FWYsonl4mE7w1Znbvr5OsLUoxec3AUEXChnp_2c36xlAPsDwXPdVqR_5SX3CKPqFLI7Ixy90RiMpc8S72wc2ves6XkIX9lLtzOjtKmRsVAv4RKmkkTT-h9_ifMTZNp9jVhf33LjgEjn17JiTVKVEiJj8Xr_48_2ClRrxf7jZ4dfwBmldiZqyzOst9Ww_DLxZHNcJxIFIOFxMIIW3bU0nXiOGZXQg最终解码效果如下：
