王子文 Azure授权登录

master/src/main/java/com/ruoyi/project/system/controller/SysLoginController.java

@@ -167,7 +167,7 @@ public class SysLoginController {
     public AjaxResult getAzureAccessToken(@RequestBody LoginBody loginBody) {
         AjaxResult ajax = AjaxResult.success();
 
-        // 生成令牌
+        // 授权码
         String code = loginBody.getCode();
 
         // 1.1 构建请求头
@@ -196,31 +196,39 @@ public class SysLoginController {
                 HttpMethod.POST,
                 new HttpEntity<>(body, headers),
                 new ParameterizedTypeReference<AjaxResult>() {}); // 解决 CommonResult 的泛型丢失
-
-        Assert.isTrue(exchange.getStatusCode().is2xxSuccessful(), "响应必须是 200 成功");
+        if (!exchange.getStatusCode().is2xxSuccessful()) {
+            return AjaxResult.error("登录失败");
+        }
         ajax = exchange.getBody();
 
-        // TODO: 进行jwt解析
-//        String idToken = ajax.get("id_token").toString();
-//        idToken = idToken.substring(idToken.indexOf(".") + 1, idToken.lastIndexOf("."));
-//        byte[] decodeBytes = java.util.Base64.getDecoder().decode(idToken);
-//        String decodeStr = new String(decodeBytes,StandardCharsets.UTF_8);
-//        JSONObject jsonObject = JSONObject.parseObject(decodeStr);
-//        String cn = jsonObject.get("cn").toString();
-        String cn = "ZHANGL49";
-
-        // 系统登录 获取系统token
-        SysUser sysUser = userService.selectUserByUserName(cn);
-        AsyncManager.me().execute(AsyncFactory.recordLogininfor(cn, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
-        LoginUser loginUser = new LoginUser();
-        loginUser.setUser(sysUser);
-        loginUser.setPermissions(permissionService.getMenuPermission(sysUser));
-        // TODO: 用户权限
-        String token =  tokenService.createToken(loginUser);
-        ajax.put(Constants.TOKEN, token);
+        try {
+            // 3. 进行jwt解析
+            // TODO: jwt
+//            String idToken = ajax.get("id_token").toString();
+//            idToken = idToken.substring(idToken.indexOf(".") + 1, idToken.lastIndexOf("."));
+//            byte[] decodeBytes = java.util.Base64.getDecoder().decode(idToken);
+//            String decodeStr = new String(decodeBytes,StandardCharsets.UTF_8);
+//            JSONObject jsonObject = JSONObject.parseObject(decodeStr);
+
+            // 4. 系统登录 获取系统token
+            // 获取cn字段，对应cpms.sysuser.username
+            // TODO: cn
+//            String cn = jsonObject.get("cn").toString();
+            String cn = "ZHANGL49";
+            // 根据username，获取系统用户对象
+            SysUser sysUser = userService.selectUserByUserName(cn);
+            if (sysUser == null) {
+                return AjaxResult.error("用户不存在");
+            }
+            AsyncManager.me().execute(AsyncFactory.recordLogininfor(cn, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
+            LoginUser loginUser = new LoginUser(sysUser, permissionService.getMenuPermission(sysUser));
+            String token =  tokenService.createToken(loginUser);
+            ajax.put(Constants.TOKEN, token);
+        } catch (Exception e) {
+            e.printStackTrace();
+            ajax = AjaxResult.error("登录失败");
+        }
+
         return ajax;
     }
-
-}
-
-
+}

ui/src/views/azureLogin.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="login">
-  <span>Azure已授权。。正在登录CPMS</span>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2020-2022 Seashore.ept All Rights Reserved.</span>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">
+        授权成功，登录中...
+        <br/>
+        <div style="margin-top: 20px;">
+          <!-- TODO: 修改重定向地址-->
+          <button id="back-button" onclick="javascript:window.location.href='http://localhost/cpms/index.html';">返 回</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -25,26 +33,223 @@ export default {
     };
   },
   created() {
-    this.code = window.location.search.replace("?code=" , '');
-    this.code = this.code.substring(0, this.code.indexOf("&"));
-    console.log(this.code);
+    this.getCode();
     this.getAzureAccessToken();
   },
   methods: {
+    getCode() {
+      this.code = window.location.search.replace("?code=" , '');
+      this.code = this.code.substring(0, this.code.indexOf("&"));
+    },
     getAzureAccessToken(){
-      getAzureAccessToken(this.code).then(response => {
-        this.msgSuccess(this.$t('Azure登录成功'));
-        // TODO: Azure登录回调处理
-        console.log(response.token);
+      getAzureAccessToken(this.code).then(response => { // 200
         Cookies.set('Admin-Token', response.token);
         this.$router.push({path: "/index" || "/404"});
+      }).catch(err => { // 500
+        // TODO: 修改重定向地址
+        window.location.href = 'http://localhost/cpms/index.html?message=' + err.message;
       });
+
+    //   // getAzureAccessToken(this.code).then(response => {
+    //   //   window.location.href = 'http://localhost/cpms/index.html?message='+ '登录失败';
+    //   // });
     }
   }
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+  #back-button{
+    padding: 10px 35px;
+  }
+  #back-button:hover{
+    cursor: pointer;
+  }
+  html,
+  body,
+  #app {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+  .chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+  }
+
+  #loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+  }
+
+  #loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #FFF;
+    -webkit-animation: spin 2s linear infinite;
+    -ms-animation: spin 2s linear infinite;
+    -moz-animation: spin 2s linear infinite;
+    -o-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    z-index: 1001;
+  }
+
+  #loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #FFF;
+    -webkit-animation: spin 3s linear infinite;
+    -moz-animation: spin 3s linear infinite;
+    -o-animation: spin 3s linear infinite;
+    -ms-animation: spin 3s linear infinite;
+    animation: spin 3s linear infinite;
+  }
+
+  #loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #FFF;
+    -moz-animation: spin 1.5s linear infinite;
+    -o-animation: spin 1.5s linear infinite;
+    -ms-animation: spin 1.5s linear infinite;
+    -webkit-animation: spin 1.5s linear infinite;
+    animation: spin 1.5s linear infinite;
+  }
+
+
+  @-webkit-keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+
+  #loader-wrapper .loader-section {
+    position: fixed;
+    top: 0;
+    width: 51%;
+    height: 100%;
+    background: #7171C6;
+    z-index: 1000;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  #loader-wrapper .loader-section.section-left {
+    left: 0;
+  }
+
+  #loader-wrapper .loader-section.section-right {
+    right: 0;
+  }
+
+
+  .loaded #loader-wrapper .loader-section.section-left {
+    -webkit-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader-wrapper .loader-section.section-right {
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+  }
+
+  .loaded #loader {
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+  }
+
+  .loaded #loader-wrapper {
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%);
+    -webkit-transition: all 0.3s 1s ease-out;
+    transition: all 0.3s 1s ease-out;
+  }
+
+  .no-js #loader-wrapper {
+    display: none;
+  }
+
+  .no-js h1 {
+    color: #222222;
+  }
+
+  #loader-wrapper .load_title {
+    font-family: 'Open Sans';
+    color: #FFF;
+    font-size: 19px;
+    width: 100%;
+    text-align: center;
+    z-index: 9999999999999;
+    position: absolute;
+    top: 60%;
+    opacity: 1;
+    line-height: 30px;
+  }
+
+  #loader-wrapper .load_title span {
+    font-weight: normal;
+    font-style: italic;
+    font-size: 13px;
+    color: #FFF;
+    opacity: 0.5;
+  }
+
 .login {
   display: flex;
   justify-content: center;

ui/src/views/login.vue

@@ -125,15 +125,7 @@ export default {
     }
   },
   created() {
-    // Azure登录跳转
-    let code = window.location.search.replace("?code=" , '');
-    if (code) {
-      // authorization_code
-      code = code.substring(0, code.indexOf("&"));
-      // redirect_url
-      window.location.href = '#/azureLogin?code='+code;
-    }
-
+    this.toggleAzureLogin();
     this.getCode();
     this.getCookie();
     if (!this.$store.getters.language) {
@@ -189,12 +181,34 @@ export default {
     },
     /** Azure登录 */
     doAzureLogin() {
-      // TODO: 1. 修改authorize请求链接、2. 修改client_id、3. 修改scope
+      // TODO: 1. 修改authorize请求链接、2. 修改client_id、3. 修改scope 4. 修改重定向地址
       // 1. https://login.microsoftonline.com/ecaa386b-c8df-4ce0-ad01-740cbdb5ba55/oauth2/v2.0/authorize
       // 2. client_id=?
       // 3. scope=profile openid offline_access
+      // 4. redirect_uri=?
       window.location.href = 'https://login.microsoftonline.com/7503e40a-97ec-4eb9-bf6d-2836e57e882d/oauth2/v2.0/authorize?client_id=3db6f125-db4d-456b-a76e-a6d03182e845&redirect_uri=http%3A%2F%2Flocalhost%2Fcpms%2Findex.html&scope=api://3db6f125-db4d-456b-a76e-a6d03182e845/User.Read&response_type=code';
     },
+    /** Azure登录跳转 */
+    toggleAzureLogin() {
+      let code = window.location.search.replace("?code=" , '');
+      let messageIndex = code.indexOf("message");
+      if (messageIndex == -1) { // url不包含message参数
+        if (code) { // url包含code参数
+          // authorization_code
+          code = code.substring(0, code.indexOf("&"));
+          // redirect_url
+          window.location.href = '#/azureLogin?code='+code;
+        }
+      } else {
+        // 解决中文参数乱码问题
+        let questionMarkSplitStrings = decodeURI(window.location.href).split("?");
+        let hashTagSplitStrings = questionMarkSplitStrings[1].split("#");
+        let equalSignSplitStrings = hashTagSplitStrings[0].split("=");
+        // ajax error message
+        let message = equalSignSplitStrings[1];
+        this.msgError(message + "，请联系管理员");
+      }
+    },
   }
 };
 </script>