187 lines
7.5 KiB
HTML
187 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>人事共享服务中心"码"上办</title>
|
|
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.15/dingtalk.open.js"></script>
|
|
<!-- Aplus SDK for performance monitoring -->
|
|
<script src="https://g.alicdn.com/a-plus/a-plus-web-sdk/1.1.2/index.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
.loading {
|
|
font-size: 18px;
|
|
margin-top: 20px;
|
|
}
|
|
.error {
|
|
font-size: 16px;
|
|
color: #ffcccc;
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: rgba(255,0,0,0.2);
|
|
border-radius: 8px;
|
|
}
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid rgba(255,255,255,0.3);
|
|
border-top-color: white;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<img src="/static/logo.png" alt="logo" class="logo">
|
|
<div class="spinner"></div>
|
|
<p class="loading">正在跳转...</p>
|
|
</div>
|
|
|
|
<script>
|
|
console.log('[前端] ============== 钉钉登录流程开始 ==============');
|
|
const APP_KEY = '{{ app_key }}';
|
|
const TARGET_URL = '{{ target_url }}';
|
|
const CORP_ID = '{{ corp_id }}';
|
|
const AGENT_ID = '{{ agent_id }}';
|
|
console.log('[前端] 配置信息:', { APP_KEY, TARGET_URL, CORP_ID, AGENT_ID });
|
|
|
|
function showError(msg) {
|
|
console.error('[前端] 错误:', msg);
|
|
document.querySelector('.loading').textContent = '配置失败';
|
|
document.querySelector('.spinner').style.display = 'none';
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error';
|
|
errorDiv.textContent = msg;
|
|
document.querySelector('.container').appendChild(errorDiv);
|
|
}
|
|
|
|
function getCleanUrl() {
|
|
var url = window.location.protocol + '//' + window.location.hostname;
|
|
if (window.location.port && window.location.port !== '80' && window.location.port !== '443') {
|
|
url += ':' + window.location.port;
|
|
}
|
|
url += window.location.pathname;
|
|
return url;
|
|
}
|
|
|
|
function handleAuthCode(code) {
|
|
console.log('[前端] 3. 获取到 code:', code);
|
|
console.log('[前端] 4. 开始请求后端 /requirement-collection/dingtalk/api/getDingUser?code=' + code);
|
|
|
|
fetch('/requirement-collection/dingtalk/api/getDingUser?code=' + code)
|
|
.then(function(resp) {
|
|
console.log('[前端] 5. 收到后端响应, 状态码:', resp.status);
|
|
return resp.json();
|
|
})
|
|
.then(function(user) {
|
|
console.log('[前端] 6. 解析响应数据:', user);
|
|
|
|
if (user.userid) {
|
|
var userId = user.userid;
|
|
var name = user.name || user.nickname || '';
|
|
var dept = user.department || '';
|
|
if (Array.isArray(dept)) {
|
|
dept = dept.join(',');
|
|
}
|
|
|
|
console.log('[前端] 7. 用户信息解析:', { userId: userId, name: name, dept: dept });
|
|
var targetUrl = TARGET_URL + '?userId=' + encodeURIComponent(userId) + '&name=' + encodeURIComponent(name) + '&dept=' + encodeURIComponent(dept);
|
|
console.log('[前端] 8. 准备跳转:', targetUrl);
|
|
window.location.href = targetUrl;
|
|
} else {
|
|
console.error('[前端] 7. 无userid, 无法登录');
|
|
showError('获取用户信息失败，请重试');
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
console.error('[前端] 6. fetch请求失败:', err);
|
|
showError('网络请求失败，请重试');
|
|
});
|
|
}
|
|
|
|
function initDingTalk() {
|
|
var url = getCleanUrl();
|
|
console.log('[前端] 0. 当前页面URL (清理后):', url);
|
|
|
|
var apiUrl = '/requirement-collection/dingtalk/api/getSignature?url=' + encodeURIComponent(url);
|
|
console.log('[前端] 1. 请求后端获取签名:', apiUrl);
|
|
|
|
fetch(apiUrl)
|
|
.then(function(resp) {
|
|
console.log('[前端] 2. 收到响应, 状态码:', resp.status);
|
|
return resp.json();
|
|
})
|
|
.then(function(data) {
|
|
console.log('[前端] 2. 收到签名数据:', data);
|
|
|
|
if (!data.signature) {
|
|
showError('获取签名失败: ' + (data.error || '未知错误'));
|
|
return;
|
|
}
|
|
|
|
console.log('[前端] 3. 配置dd.config...');
|
|
dd.config({
|
|
agentId: data.agentId ? Number(data.agentId) : (AGENT_ID ? Number(AGENT_ID) : 0),
|
|
corpId: CORP_ID,
|
|
timeStamp: data.timeStamp,
|
|
nonceStr: data.nonceStr,
|
|
signature: data.signature,
|
|
type: 0,
|
|
jsApiList: ['runtime.permission.requestAuthCode']
|
|
});
|
|
|
|
dd.ready(function() {
|
|
console.log('[前端] 4. dd.ready 成功 - 钉钉SDK已就绪');
|
|
console.log('[前端] 5. 开始调用 requestAuthCode 获取授权码...');
|
|
|
|
dd.runtime.permission.requestAuthCode({
|
|
corpId: CORP_ID,
|
|
onSuccess: function(res) {
|
|
handleAuthCode(res.code);
|
|
},
|
|
onFail: function(err) {
|
|
console.error('[前端] 6. requestAuthCode 失败:', err);
|
|
showError('获取授权码失败: ' + JSON.stringify(err));
|
|
}
|
|
});
|
|
});
|
|
|
|
dd.error(function(err) {
|
|
console.error('[前端] 4. dd.error - 钉钉SDK配置失败:', err);
|
|
showError('钉钉SDK配置失败: ' + JSON.stringify(err));
|
|
});
|
|
})
|
|
.catch(function(err) {
|
|
console.error('[前端] 1. 请求签名失败:', err);
|
|
showError('初始化失败: ' + err.message);
|
|
});
|
|
}
|
|
|
|
initDingTalk();
|
|
</script>
|
|
</body>
|
|
</html>
|