casLogin.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8. />
  9. <script
  10. type="text/javascript"
  11. src="/static/jquery/dist/jquery.min.js"
  12. ></script>
  13. <script
  14. type="text/javascript"
  15. src="/static/vue/dist/vue.global.prod.js"
  16. ></script>
  17. <style scoped>
  18. .jumbotron {
  19. margin-top: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="app1" class="container">
  25. <div class="jumbotron">
  26. <h1>登录中</h1>
  27. <p>{{message}}</p>
  28. <p>
  29. <button @click="logout()">注销</button>
  30. </p>
  31. </div>
  32. </div>
  33. <script>
  34. Vue.createApp({
  35. data: function () {
  36. return {
  37. urlRoot: "",
  38. ticket: undefined,
  39. message: "正在检查您的权限,请稍等...",
  40. casUrl: undefined, // cas验证url
  41. authSettingNo: undefined, // 标识
  42. serviceUrl: undefined, // 传入后台验证地址
  43. casLogoutUrl: undefined, // cas退出登录url
  44. casTicketUrl: undefined, // cas Ticket检验Url
  45. redirectUrl: undefined, // 登录成功后自动跳转的地址
  46. };
  47. },
  48. mounted: function () {
  49. this.urlRoot = this.getRootPath() + "/";
  50. this.authSettingNo = this.getQueryString("authSettingNo");
  51. this.existsCAS();
  52. },
  53. methods: {
  54. getQueryString: function (name) {
  55. const url = window.location.href;
  56. const params = new URLSearchParams(url.split("?")[1]);
  57. return params.get(name);
  58. },
  59. // 根据认证跳转系统对应页面
  60. getTicket: function () {
  61. const _self = this;
  62. // 如果是从和系统不同的域名跳转进入系统,系统以prevUrl当作标识播放消息推送声音
  63. let prevUrl = localStorage.getItem("#prevUrl");
  64. if (!prevUrl) {
  65. if (document.referrer) {
  66. prevUrl = new URL(document.referrer).hostname;
  67. localStorage.setItem("#prevUrl", prevUrl);
  68. }
  69. }
  70. const redirect_uri = window.location.href;
  71. _self.ticket = _self.getQueryString("ticket");
  72. if (_self.ticket) {
  73. // 1.判断是否包含重定向地址
  74. // 2.判断后台验证登录是否成功
  75. const newUrl = localStorage.getItem("#redirect_uri");
  76. if (newUrl.indexOf("redirectUrl") != -1) {
  77. // 存在redirectUrl地址,调用登录接口,跳转redirectUrl地址
  78. _self.azureCasLogin(newUrl);
  79. } else {
  80. // 没有redirectUrl地址,跳转到x端(PC、Propass、App)选择界面,调用登录,authSettingNo、ticket、newUrl必须传递过去
  81. const loginUrl = `${_self.urlRoot}#/casLogin?authSettingNo=${_self.authSettingNo}&ticket=${_self.ticket}&serviceUrl=${newUrl}`;
  82. window.location.href = loginUrl;
  83. }
  84. } else {
  85. localStorage.setItem("#redirect_uri", redirect_uri);
  86. const casBoard = `${_self.casUrl}?service=${redirect_uri}`;
  87. window.location.href = casBoard;
  88. }
  89. },
  90. // 注销
  91. logout: function () {
  92. let _self = this;
  93. window.location.href = _self.urlRoot;
  94. },
  95. // 单点登录
  96. azureCasLogin: function (newUrl) {
  97. let _self = this;
  98. const params = {
  99. ticket: _self.ticket,
  100. redirect_uri: newUrl,
  101. authSettingNo: _self.authSettingNo,
  102. languageId: "zh-CN",
  103. };
  104. $.ajax({
  105. url: _self.urlRoot + "api/CasLogin/login",
  106. type: "post",
  107. async: true,
  108. data: params,
  109. success: function (loginInfoData) {
  110. if (loginInfoData.errorCode == 0) {
  111. _self.setLoginInfo(loginInfoData.data, newUrl);
  112. } else {
  113. _self.message =
  114. "不好意思你的账号不在系统中,请点击【注销】按钮,登录其他账号";
  115. console.error(loginInfoData.errorMessage);
  116. }
  117. },
  118. error: function (XMLHttpRequest, textStatus, errorThrown) {
  119. console.log("服务器出错啦。");
  120. },
  121. });
  122. },
  123. // 获取cas参数值
  124. existsCAS: function () {
  125. const _self = this;
  126. $.ajax({
  127. url:
  128. _self.urlRoot +
  129. "api/CasLogin/casServiceProviderCheck?authSettingNo=" +
  130. _self.authSettingNo,
  131. type: "get",
  132. contentType: "application/json",
  133. dataType: "json",
  134. success: function (response) {
  135. if (response.errorCode === 0) {
  136. _self.casUrl = response.data.casUrl;
  137. _self.authSettingNo = response.data.no;
  138. _self.casLogoutUrl = response.data.casLogoutUrl;
  139. _self.getTicket();
  140. } else {
  141. _self.message = response.errorMessage;
  142. console.log("错误", response.errorMessage);
  143. }
  144. },
  145. error: function (XMLHttpRequest, textStatus, errorThrown) {
  146. _self.message = "服务器出错啦。";
  147. console.log(XMLHttpRequest, textStatus, errorThrown);
  148. },
  149. });
  150. },
  151. /**
  152. * 获取主机地址
  153. */
  154. getRootPath: function () {
  155. var protocol = window.location.protocol;
  156. var host = window.location.host;
  157. var localhostPath = protocol + "//" + host;
  158. return localhostPath;
  159. },
  160. setLoginInfo: function (loginInfo, newUrl) {
  161. const _self = this;
  162. const prevUrl = localStorage.getItem("#prevUrl");
  163. _self.clearLocalStorage();
  164. _self.setLocalStorage(loginInfo,prevUrl);
  165. const str = "redirectUrl=";
  166. const endStart = newUrl.indexOf("redirectUrl");
  167. const startIndex = endStart + str.length;
  168. const endIndex = newUrl.length - 1;
  169. const redirectUrl = newUrl.substring(startIndex, endIndex);
  170. window.location.href = redirectUrl;
  171. },
  172. // 设置localStorage
  173. setLocalStorage: function (loginInfo,prevUrl) {
  174. localStorage.setItem("allowSound", false);
  175. localStorage.setItem("#prevUrl", prevUrl);
  176. localStorage.setItem("#LoginInfo", JSON.stringify(loginInfo));
  177. localStorage.setItem("#token", loginInfo.token);
  178. localStorage.setItem("#accountId", loginInfo.accountId);
  179. },
  180. clearLocalStorage: function () {
  181. // 清理localStorage时需要保留的参数列表
  182. var reserveParams = [
  183. "hostPageBaseURL",
  184. "workShopId",
  185. "resourceInstanceId",
  186. "resourceInstanceName",
  187. "apsBaseUrl",
  188. "cameraBaseURL",
  189. "#rememberPassword",
  190. "#userName",
  191. "#password",
  192. "#languageSelected",
  193. ];
  194. //存放的信息
  195. var reserveParamValues = [];
  196. //获取参数信息
  197. var len = reserveParams.length;
  198. for (let i = 0; i < len; i++) {
  199. var reserveParam = reserveParams[i];
  200. var reserveParamValue = "";
  201. if (localStorage.getItem(reserveParam) != undefined) {
  202. reserveParamValue = localStorage.getItem(reserveParam);
  203. }
  204. reserveParamValues.push(reserveParamValue);
  205. }
  206. //清理localStorage
  207. window.localStorage.clear();
  208. //还原参数信息
  209. for (let i = 0; i < len; i++) {
  210. localStorage.setItem(reserveParams[i], reserveParamValues[i]);
  211. }
  212. },
  213. },
  214. }).mount("#app1");
  215. </script>
  216. </body>
  217. </html>