Initial commit
This commit is contained in:
259
embed-demo.html
Normal file
259
embed-demo.html
Normal file
@@ -0,0 +1,259 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user