sso.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>邮箱登录</title>
  7. <style>
  8. * { margin: 0; padding: 0; box-sizing: border-box; }
  9. body {
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. height: 100vh;
  14. background: #f5f5f5;
  15. font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  16. }
  17. .container {
  18. text-align: center;
  19. padding: 40px;
  20. }
  21. .tip-icon {
  22. width: 48px;
  23. height: 48px;
  24. margin: 0 auto 16px;
  25. border-radius: 50%;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. font-size: 24px;
  30. }
  31. .tip-icon.warn { background: #fff3e0; }
  32. .spinner {
  33. width: 36px;
  34. height: 36px;
  35. margin: 0 auto 16px;
  36. border: 3px solid #e0e0e0;
  37. border-top-color: #1890ff;
  38. border-radius: 50%;
  39. animation: spin 0.8s linear infinite;
  40. }
  41. @keyframes spin {
  42. to { transform: rotate(360deg); }
  43. }
  44. .tip-text {
  45. font-size: 15px;
  46. color: #666;
  47. line-height: 1.6;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <!-- 页面内loading(兜底) -->
  53. <div class="container" id="loading" style="display:none;">
  54. <div class="spinner"></div>
  55. <p class="tip-text" id="loadingText">正在登录邮箱...</p>
  56. </div>
  57. <!-- 非钉钉环境提示 -->
  58. <div class="container" id="tipContainer" style="display:none;">
  59. <div class="tip-icon warn">&#9888;</div>
  60. <p class="tip-text">请在钉钉内打开此页面<br>浏览器不支持自动登录</p>
  61. </div>
  62. <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.12/dingtalk.open.js"></script>
  63. <script>
  64. var CORP_ID = 'dingc54682076c69f0f2bc961a6cb783455b';
  65. function isDingTalk() {
  66. return /DingTalk/i.test(navigator.userAgent);
  67. }
  68. // 钉钉原生loading
  69. function showLoading(text) {
  70. dd.device.notification.showPreloader({ text: text || '正在跳转邮箱...' });
  71. }
  72. function hideLoading() {
  73. dd.device.notification.hidePreloader();
  74. }
  75. // 钉钉原生toast提示
  76. function showToast(text, icon) {
  77. dd.device.notification.toast({ icon: icon || '', text: text, duration: 3 });
  78. }
  79. // 钉钉原生alert弹窗(用于错误提示)
  80. function showAlert(title, message) {
  81. hideLoading();
  82. dd.device.notification.alert({
  83. title: title || '提示',
  84. message: message,
  85. buttonName: '我知道了'
  86. });
  87. }
  88. function updateLoading(text) {
  89. document.getElementById('loadingText').textContent = text;
  90. }
  91. if (!isDingTalk()) {
  92. document.getElementById('tipContainer').style.display = 'block';
  93. } else {
  94. // 页面内loading + 钉钉原生loading
  95. document.getElementById('loading').style.display = 'block';
  96. showLoading('正在登录邮箱...');
  97. try {
  98. var result = dd.runtime.permission.requestAuthCode({
  99. corpId: CORP_ID,
  100. onSuccess: function(res) {
  101. updateLoading('正在跳转邮箱系统...');
  102. showLoading('正在跳转邮箱系统...');
  103. window.location.href = '/api/gm/sso/mail?authCode=' + res.code;
  104. },
  105. onFail: function(err) {
  106. showAlert('授权失败', err.errorMessage || JSON.stringify(err));
  107. }
  108. });
  109. // 新版JSAPI返回Promise
  110. if (result && typeof result.then === 'function') {
  111. result.then(function(res) {
  112. updateLoading('正在跳转邮箱系统...');
  113. showLoading('正在跳转邮箱系统...');
  114. var code = res.code || (res.result && res.result.code);
  115. if (code) {
  116. window.location.href = '/api/gm/sso/mail?authCode=' + code;
  117. }
  118. }).catch(function(err) {
  119. showAlert('授权失败', err.errorMessage || JSON.stringify(err));
  120. });
  121. }
  122. } catch(e) {
  123. showAlert('系统异常', e.message);
  124. }
  125. }
  126. </script>
  127. </body>
  128. </html>