初始提交：人事共享服务中心钉钉登录功能
This commit is contained in:
186
templates/dingtalk_entry.html
Normal file
186
templates/dingtalk_entry.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user