248 lines
9.5 KiB
HTML
248 lines
9.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>社保登录流程测试</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
background: white;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #333;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.test-case {
|
||
|
|
margin: 20px 0;
|
||
|
|
padding: 15px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #f9f9f9;
|
||
|
|
}
|
||
|
|
.test-case h3 {
|
||
|
|
margin-top: 0;
|
||
|
|
color: #4778EC;
|
||
|
|
}
|
||
|
|
.code {
|
||
|
|
background: #f4f4f4;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: monospace;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
background: #4778EC;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 10px 5px;
|
||
|
|
}
|
||
|
|
.btn:hover {
|
||
|
|
background: #256BFA;
|
||
|
|
}
|
||
|
|
.result {
|
||
|
|
margin-top: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
color: #721c24;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>社保登录流程测试</h1>
|
||
|
|
|
||
|
|
<div class="test-case">
|
||
|
|
<h3>测试用例 1: Base64 解码测试</h3>
|
||
|
|
<p>测试 Base64 解码功能是否正常工作</p>
|
||
|
|
<div class="code">
|
||
|
|
// 测试数据: "142634199305163418" 的 Base64 编码<br>
|
||
|
|
// 原始身份证号: 142634199305163418<br>
|
||
|
|
// Base64 编码: MTQyNjM0MTk5MzA1MTYzNDE4
|
||
|
|
</div>
|
||
|
|
<button class="btn" onclick="testBase64Decode()">测试 Base64 解码</button>
|
||
|
|
<div id="base64Result" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-case">
|
||
|
|
<h3>测试用例 2: URL 参数解析测试</h3>
|
||
|
|
<p>测试从 URL 中获取 idCard 参数的功能</p>
|
||
|
|
<div class="code">
|
||
|
|
// 测试 URL: http://localhost:5173/ks_app/#/pages/login/id-card-login?idCard=MTQyNjM0MTk5MzA1MTYzNDE4<br>
|
||
|
|
// 预期结果: 成功获取到 idCard 参数值
|
||
|
|
</div>
|
||
|
|
<button class="btn" onclick="testUrlParams()">测试 URL 参数解析</button>
|
||
|
|
<div id="urlResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-case">
|
||
|
|
<h3>测试用例 3: 完整登录流程测试</h3>
|
||
|
|
<p>模拟完整的社保登录流程</p>
|
||
|
|
<div class="code">
|
||
|
|
1. 从 URL 获取 idCard 参数 (Base64 编码)<br>
|
||
|
|
2. Base64 解码得到明文身份证号<br>
|
||
|
|
3. 调用 /app/idCardLogin 接口<br>
|
||
|
|
4. 处理登录结果
|
||
|
|
</div>
|
||
|
|
<button class="btn" onclick="testFullLoginFlow()">测试完整登录流程</button>
|
||
|
|
<div id="loginResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-case">
|
||
|
|
<h3>测试用例 4: 生成测试链接</h3>
|
||
|
|
<p>生成用于测试的社保登录链接</p>
|
||
|
|
<div class="code">
|
||
|
|
身份证号: <input type="text" id="testIdCard" value="142634199305163418" style="width: 200px; padding: 5px;">
|
||
|
|
</div>
|
||
|
|
<button class="btn" onclick="generateTestLink()">生成测试链接</button>
|
||
|
|
<div id="linkResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Base64 解码函数 (与前端代码保持一致)
|
||
|
|
function decodeBase64(base64Str) {
|
||
|
|
try {
|
||
|
|
return atob(base64Str);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Base64解码失败:', error);
|
||
|
|
throw new Error('身份证号码解码失败');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 测试 Base64 解码
|
||
|
|
function testBase64Decode() {
|
||
|
|
const base64Str = "MTQyNjM0MTk5MzA1MTYzNDE4";
|
||
|
|
const resultDiv = document.getElementById('base64Result');
|
||
|
|
|
||
|
|
try {
|
||
|
|
const decoded = decodeBase64(base64Str);
|
||
|
|
resultDiv.innerHTML = `<strong>成功!</strong><br>
|
||
|
|
Base64 编码: ${base64Str}<br>
|
||
|
|
解码结果: ${decoded}<br>
|
||
|
|
预期结果: 142634199305163418<br>
|
||
|
|
匹配: ${decoded === "142634199305163418" ? "✓" : "✗"}`;
|
||
|
|
resultDiv.className = 'result success';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
} catch (error) {
|
||
|
|
resultDiv.innerHTML = `<strong>失败!</strong><br>错误信息: ${error.message}`;
|
||
|
|
resultDiv.className = 'result error';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 测试 URL 参数解析
|
||
|
|
function testUrlParams() {
|
||
|
|
const testUrl = "http://localhost:5173/ks_app/#/pages/login/id-card-login?idCard=MTQyNjM0MTk5MzA1MTYzNDE4";
|
||
|
|
const resultDiv = document.getElementById('urlResult');
|
||
|
|
|
||
|
|
try {
|
||
|
|
const urlObj = new URL(testUrl);
|
||
|
|
const idCardParam = urlObj.searchParams.get('idCard');
|
||
|
|
|
||
|
|
resultDiv.innerHTML = `<strong>成功!</strong><br>
|
||
|
|
URL: ${testUrl}<br>
|
||
|
|
获取到的 idCard 参数: ${idCardParam}<br>
|
||
|
|
参数存在: ${idCardParam ? "✓" : "✗"}`;
|
||
|
|
resultDiv.className = 'result success';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
} catch (error) {
|
||
|
|
resultDiv.innerHTML = `<strong>失败!</strong><br>错误信息: ${error.message}`;
|
||
|
|
resultDiv.className = 'result error';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 测试完整登录流程
|
||
|
|
function testFullLoginFlow() {
|
||
|
|
const resultDiv = document.getElementById('loginResult');
|
||
|
|
resultDiv.innerHTML = '<strong>测试中...</strong>';
|
||
|
|
resultDiv.className = 'result';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
try {
|
||
|
|
// 模拟登录流程
|
||
|
|
const base64IdCard = "MTQyNjM0MTk5MzA1MTYzNDE4";
|
||
|
|
const decodedIdCard = decodeBase64(base64IdCard);
|
||
|
|
|
||
|
|
// 验证身份证格式
|
||
|
|
if (!decodedIdCard || decodedIdCard.length < 15) {
|
||
|
|
throw new Error('身份证号码格式不正确');
|
||
|
|
}
|
||
|
|
|
||
|
|
resultDiv.innerHTML = `<strong>成功!</strong><br>
|
||
|
|
完整登录流程测试通过:<br>
|
||
|
|
1. Base64 参数获取: ✓<br>
|
||
|
|
2. Base64 解码: ✓ (${decodedIdCard})<br>
|
||
|
|
3. 身份证格式验证: ✓<br>
|
||
|
|
4. 接口调用准备: ✓<br>
|
||
|
|
<br>
|
||
|
|
<em>注意: 实际接口调用需要在真实环境中测试</em>`;
|
||
|
|
resultDiv.className = 'result success';
|
||
|
|
} catch (error) {
|
||
|
|
resultDiv.innerHTML = `<strong>失败!</strong><br>错误信息: ${error.message}`;
|
||
|
|
resultDiv.className = 'result error';
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 生成测试链接
|
||
|
|
function generateTestLink() {
|
||
|
|
const idCardInput = document.getElementById('testIdCard');
|
||
|
|
const idCard = idCardInput.value.trim();
|
||
|
|
const resultDiv = document.getElementById('linkResult');
|
||
|
|
|
||
|
|
if (!idCard) {
|
||
|
|
resultDiv.innerHTML = '<strong>错误!</strong><br>请输入身份证号码';
|
||
|
|
resultDiv.className = 'result error';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const base64IdCard = btoa(idCard);
|
||
|
|
const testLink = `http://localhost:5173/ks_app/#/pages/login/id-card-login?idCard=${base64IdCard}`;
|
||
|
|
|
||
|
|
resultDiv.innerHTML = `<strong>测试链接已生成!</strong><br>
|
||
|
|
原始身份证号: ${idCard}<br>
|
||
|
|
Base64 编码: ${base64IdCard}<br>
|
||
|
|
<br>
|
||
|
|
<strong>测试链接:</strong><br>
|
||
|
|
<a href="${testLink}" target="_blank" style="word-break: break-all;">${testLink}</a><br>
|
||
|
|
<br>
|
||
|
|
<em>复制此链接在开发环境中测试社保登录功能</em>`;
|
||
|
|
resultDiv.className = 'result success';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
} catch (error) {
|
||
|
|
resultDiv.innerHTML = `<strong>生成失败!</strong><br>错误信息: ${error.message}`;
|
||
|
|
resultDiv.className = 'result error';
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|