259 lines
9.1 KiB
HTML
259 lines
9.1 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
input[type="text"], input[type="password"] {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
}
|
||
|
|
.result {
|
||
|
|
margin-top: 20px;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background-color: #d4edda;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
color: #155724;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background-color: #f8d7da;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
color: #721c24;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
background-color: #d1ecf1;
|
||
|
|
border: 1px solid #bee5eb;
|
||
|
|
color: #0c5460;
|
||
|
|
}
|
||
|
|
.embed-frame {
|
||
|
|
width: 100%;
|
||
|
|
height: 600px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>第三方平台嵌入示例</h1>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="appKey">应用Key:</label>
|
||
|
|
<input type="text" id="appKey" value="demo_app_key_2024" placeholder="请输入应用Key">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="appSecret">应用密钥:</label>
|
||
|
|
<input type="password" id="appSecret" value="demo_secret_key_2024_encrypt" placeholder="请输入应用密钥">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="phoneNumber">手机号:</label>
|
||
|
|
<input type="text" id="phoneNumber" placeholder="请输入手机号进行模拟登录">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onclick="thirdPartyLogin()">第三方登录</button>
|
||
|
|
<button onclick="validateEmbed()">验证嵌入权限</button>
|
||
|
|
<button onclick="getAppInfo()">获取应用信息</button>
|
||
|
|
|
||
|
|
<div id="result" class="result"></div>
|
||
|
|
|
||
|
|
<div style="margin-top: 20px;">
|
||
|
|
<h3>嵌入页面:</h3>
|
||
|
|
<iframe id="embedFrame" class="embed-frame" src=""></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const API_BASE = window.location.origin + '/api/third';
|
||
|
|
let currentToken = null;
|
||
|
|
|
||
|
|
// 显示结果
|
||
|
|
function showResult(message, type = 'info') {
|
||
|
|
const resultDiv = document.getElementById('result');
|
||
|
|
resultDiv.className = `result ${type}`;
|
||
|
|
resultDiv.style.display = 'block';
|
||
|
|
resultDiv.innerHTML = message;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 第三方登录
|
||
|
|
async function thirdPartyLogin() {
|
||
|
|
const appKey = document.getElementById('appKey').value;
|
||
|
|
const appSecret = document.getElementById('appSecret').value;
|
||
|
|
const phoneNumber = document.getElementById('phoneNumber').value;
|
||
|
|
|
||
|
|
if (!appKey || !appSecret || !phoneNumber) {
|
||
|
|
showResult('请填写所有必填字段', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${API_BASE}/login`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
},
|
||
|
|
body: `appKey=${encodeURIComponent(appKey)}&appSecret=${encodeURIComponent(appSecret)}&phoneNumber=${encodeURIComponent(phoneNumber)}`
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
currentToken = result.data.accessToken;
|
||
|
|
showResult(`登录成功！<br>Token: ${currentToken}<br>用户ID: ${result.data.userId || 'N/A'}<br>过期时间: ${result.data.expireIn || 'N/A'}秒`, 'success');
|
||
|
|
|
||
|
|
// 显示嵌入页面
|
||
|
|
showEmbeddedPage();
|
||
|
|
} else {
|
||
|
|
showResult(`登录失败: ${result.msg}`, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showResult(`请求失败: ${error.message}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 验证嵌入权限
|
||
|
|
async function validateEmbed() {
|
||
|
|
const appKey = document.getElementById('appKey').value;
|
||
|
|
const appSecret = document.getElementById('appSecret').value;
|
||
|
|
|
||
|
|
if (!appKey || !appSecret) {
|
||
|
|
showResult('请填写应用Key和密钥', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${API_BASE}/embed/validate`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
},
|
||
|
|
body: `appKey=${encodeURIComponent(appKey)}&appSecret=${encodeURIComponent(appSecret)}${currentToken ? '&token=' + encodeURIComponent(currentToken) : ''}`
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
const data = result.data;
|
||
|
|
let message = `验证成功！<br>应用ID: ${data.appId}<br>应用名称: ${data.appName}<br>允许自动注册: ${data.autoRegister === '1' ? '是' : '否'}`;
|
||
|
|
|
||
|
|
if (data.user) {
|
||
|
|
message += `<br>用户信息: ID=${data.user.userId}, 昵称=${data.user.nickName}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
showResult(message, 'success');
|
||
|
|
} else {
|
||
|
|
showResult(`验证失败: ${result.msg}`, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showResult(`请求失败: ${error.message}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取应用信息
|
||
|
|
async function getAppInfo() {
|
||
|
|
const appKey = document.getElementById('appKey').value;
|
||
|
|
const appSecret = document.getElementById('appSecret').value;
|
||
|
|
|
||
|
|
if (!appKey) {
|
||
|
|
showResult('请填写应用Key', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
let url = `${API_BASE}/app/info?appKey=${encodeURIComponent(appKey)}`;
|
||
|
|
if (appSecret) {
|
||
|
|
url += `&appSecret=${encodeURIComponent(appSecret)}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await fetch(url);
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
const app = result.data;
|
||
|
|
let message = `应用信息:<br>应用ID: ${app.appId}<br>应用名称: ${app.appName}<br>应用状态: ${app.appStatus === '0' ? '正常' : '停用'}`;
|
||
|
|
|
||
|
|
if (app.appDescription) {
|
||
|
|
message += `<br>应用描述: ${app.appDescription}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
showResult(message, 'success');
|
||
|
|
} else {
|
||
|
|
showResult(`获取失败: ${result.msg}`, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showResult(`请求失败: ${error.message}`, 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示嵌入页面
|
||
|
|
function showEmbeddedPage() {
|
||
|
|
const frame = document.getElementById('embedFrame');
|
||
|
|
// 这里可以设置实际的嵌入页面URL
|
||
|
|
// frame.src = '要嵌入的页面URL?token=' + encodeURIComponent(currentToken);
|
||
|
|
|
||
|
|
// 示例：显示一个简单的页面
|
||
|
|
frame.srcdoc = `
|
||
|
|
<html>
|
||
|
|
<head><title>嵌入页面示例</title></head>
|
||
|
|
<body style="font-family: Arial, sans-serif; padding: 20px;">
|
||
|
|
<h2>嵌入页面示例</h2>
|
||
|
|
<p>这是一个嵌入页面的示例。</p>
|
||
|
|
<p>Token: ${currentToken || '未登录'}</p>
|
||
|
|
<button onclick="parent.postMessage('fromEmbedded', '*')">发送消息给父页面</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
`;
|
||
|
|
frame.style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 监听来自嵌入页面的消息
|
||
|
|
window.addEventListener('message', function(event) {
|
||
|
|
showResult(`收到嵌入页面消息: ${event.data}`, 'info');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|