➕ 新增第三方系统登陆

src/api/user.js

@@ -19,6 +19,22 @@ export const loginByUsername = (tenantId, username, password, type, key, code) =
   }
 });
 
+export const loginBySocial = (tenantId, source, code, state) => request({
+  url: '/api/blade-auth/oauth/token',
+  method: 'post',
+  headers: {
+    'Tenant-Id': tenantId
+  },
+  params: {
+    tenantId,
+    source,
+    code,
+    state,
+    grant_type: "social",
+    scope: "all",
+  }
+})
+
 export const refreshToken = (refresh_token, tenantId) => request({
   url: '/api/blade-auth/oauth/token',
   method: 'post',
@@ -33,6 +49,18 @@ export const refreshToken = (refresh_token, tenantId) => request({
   }
 });
 
+export const registerGuest = (form, oauthId) => request({
+  url: '/api/blade-user/register-guest',
+  method: 'post',
+  params: {
+    tenantId: form.tenantId,
+    name: form.name,
+    account: form.account,
+    password: form.password,
+    oauthId
+  }
+});
+
 export const getButtons = () => request({
   url: '/api/blade-system/menu/buttons',
   method: 'get'

src/config/env.js

@@ -5,11 +5,11 @@ let iconfontVersion = ['567566_pwc3oottzol', '1066523_6bvkeuqao36'];
 let iconfontUrl = `//at.alicdn.com/t/font_$key.css`;
 let codeUrl = `${baseUrl}/code`
 const env = process.env
-if (env.NODE_ENV == 'development') {
+if (env.NODE_ENV === 'development') {
     baseUrl = ``; // 开发环境地址
-} else if (env.NODE_ENV == 'production') {
+} else if (env.NODE_ENV === 'production') {
     baseUrl = ``; //生产环境地址
-} else if (env.NODE_ENV == 'test') {
+} else if (env.NODE_ENV === 'test') {
     baseUrl = ``; //测试环境地址
 }
 export {

src/config/website.js

@@ -38,6 +38,8 @@ export default {
       children: 'children'
     }
   },
+  // 授权地址
+  authUrl: 'http://localhost/blade-auth/oauth/render',
   // 流程设计器地址
   flowDesignUrl: 'http://localhost:9999',
 }

src/lang/en.js

@@ -73,6 +73,8 @@ export default {
     password: 'Please input a password',
     wechat: 'Wechat',
     qq: 'QQ',
+    github: 'github',
+    gitee: 'gitee',
     phone: 'Please input a phone',
     code: 'Please input a code',
     submit: 'Login',

src/lang/zh.js

@@ -73,6 +73,8 @@ export default {
     password: '请输入密码',
     wechat: '微信',
     qq: 'QQ',
+    github: 'github',
+    gitee: '码云',
     phone: '请输入手机号',
     code: '请输入验证码',
     submit: '登录',

src/page/login/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="login-container"
-       ref="login"
        @keyup.enter.native="handleLogin">
-    <top-color v-show="false"/>
+    <top-color v-show="false"></top-color>
     <div class="login-weaper animated bounceInDown">
       <div class="login-left">
         <div class="login-time">
@@ -17,11 +16,11 @@
         <div class="login-main">
           <h4 class="login-title">
             {{ $t('login.title') }}{{website.title}}
-            <top-lang/>
+            <top-lang></top-lang>
           </h4>
-          <userLogin v-if="activeName==='user'"/>
-          <codeLogin v-else-if="activeName==='code'"/>
-          <thirdLogin v-else-if="activeName==='third'"/>
+          <userLogin v-if="activeName==='user'"></userLogin>
+          <codeLogin v-else-if="activeName==='code'"></codeLogin>
+          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
           <div class="login-menu">
             <a href="#"
                @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
@@ -45,6 +44,7 @@
   import {validatenull} from "@/util/validate";
   import topLang from "@/page/index/top/top-lang";
   import topColor from "@/page/index/top/top-color";
+  import {getQueryString, getTopUrl} from "@/util/util";
 
   export default {
     name: "login",
@@ -58,43 +58,60 @@
     data() {
       return {
         time: "",
-        activeName: "user"
+        activeName: "user",
+        socialForm: {
+          tenantId: "000000",
+          source: "",
+          code: "",
+          state: "",
+        }
       };
     },
     watch: {
       $route() {
-        const params = this.$route.query;
-        this.socialForm.state = params.state;
-        this.socialForm.code = params.code;
-        if (!validatenull(this.socialForm.state)) {
-          const loading = this.$loading({
-            lock: true,
-            text: `${
-              this.socialForm.state === "WX" ? "微信" : "QQ"
-            }登录中,请稍后。。。`,
-            spinner: "el-icon-loading"
-          });
-          setTimeout(() => {
-            loading.close();
-          }, 2000);
-        }
+        this.handleLogin();
       }
     },
     created() {
+      this.handleLogin();
       this.getTime();
-      setInterval(() => {
-        this.getTime();
-      }, 1000);
     },
     mounted() {
     },
     computed: {
-      ...mapGetters(["website"])
+      ...mapGetters(["website", "tagWel"])
     },
     props: [],
     methods: {
       getTime() {
+        setInterval(() => {
           this.time = dateFormat(new Date());
+        }, 1000);
+      },
+      handleLogin() {
+        const topUrl = getTopUrl();
+        const redirectUrl = "/oauth/redirect/";
+        if (topUrl.includes(redirectUrl)) {
+          let source = topUrl.split("?")[0];
+          source = source.split(redirectUrl)[1];
+          this.socialForm.source = source;
+          this.socialForm.code = getQueryString("code");
+          this.socialForm.state = getQueryString("state");
+        }
+        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+          const loading = this.$loading({
+            lock: true,
+            text: '第三方系统登录中,请稍后。。。',
+            spinner: "el-icon-loading"
+          });
+          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
+            window.location.href = topUrl.split(redirectUrl)[0];
+            this.$router.push({path: this.tagWel.value});
+            loading.close();
+          }).catch(() => {
+            loading.close();
+          });
+        }
       }
     }
   };

src/page/login/thirdlogin.vue

@@ -1,61 +1,36 @@
 <template>
   <div class="social-container">
-    <div class="box"
-         @click="handleClick('wechat')">
-      <span class="container"
-            :style="{backgroundColor:'#6ba2d6'}">
-        <i icon-class="wechat"
-           class="iconfont icon-weixin"/>
+    <div class="box" @click="handleClick('github')">
+      <span class="container" :style="{backgroundColor:'#6ba2d6'}">
+        <i icon-class="github" class="iconfont icongithub"></i>
       </span>
-      <p class="title">{{$t('login.wechat')}}</p>
+      <p class="title">{{$t('login.github')}}</p>
     </div>
-    <div class="box"
-         @click="handleClick('tencent')">
-      <span class="container"
-            :style="{backgroundColor:'#8dc349'}">
-        <i icon-class="qq"
-           class="iconfont icon-qq"/>
+    <div class="box" @click="handleClick('gitee')">
+      <span class="container" :style="{backgroundColor:'#c35152'}">
+        <i icon-class="gitee" class="iconfont icongitee2"></i>
       </span>
-      <p class="title">{{$t('login.qq')}}</p>
+      <p class="title">{{$t('login.gitee')}}</p>
     </div>
   </div>
 </template>
 
 <script>
-import { openWindow } from "@/util/util";
+  import website from '@/config/website';
 
-export default {
+  export default {
     name: "thirdLogin",
     methods: {
-    handleClick(thirdpart) {
-      let appid, client_id, redirect_uri, url;
-      redirect_uri = encodeURIComponent(
-        window.location.origin + "/#/authredirect"
-      );
-      if (thirdpart === "wechat") {
-        appid = "xxxx";
-        url =
-          "https://open.weixin.qq.com/connect/qrconnect?appid=" +
-          appid +
-          "&redirect_uri=" +
-          redirect_uri +
-          "&state=WX&response_type=code&scope=snsapi_login#wechat_redirect";
-      } else if (thirdpart === "tencent") {
-        client_id = "xxxx";
-        url =
-          "https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ&client_id=" +
-          client_id +
-          "&redirect_uri=" +
-          redirect_uri;
+      handleClick(source) {
+        window.location.href = `${website.authUrl}/${source}`;
+        //openWindow(authUrl, source, 540, 540);
       }
-      openWindow(url, thirdpart, 540, 540);
     }
-  }
-};
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.social-container {
+  .social-container {
     margin: 20px 0;
     display: flex;
     align-items: center;
@@ -80,5 +55,5 @@ export default {
     .title {
       text-align: center;
     }
-}
+  }
 </style>

src/page/login/userlogin.vue

@@ -67,6 +67,7 @@
   import {mapGetters} from "vuex";
   import {info} from "@/api/system/tenant";
   import {getCaptcha} from "@/api/user";
+  import {getTopUrl} from "@/util/util";
 
   export default {
     name: "userlogin",
@@ -146,7 +147,7 @@
         });
       },
       getTenant() {
-        let domain = window.location.href.split("/#/")[0];
+        let domain = getTopUrl();
         // 临时指定域名，方便测试
         //domain = "https://bladex.vip";
         info(domain).then(res => {

src/store/modules/user.js

@@ -4,7 +4,7 @@ import {setStore, getStore} from '@/util/store'
 import {isURL, validatenull} from '@/util/validate'
 import {deepClone} from '@/util/util'
 import website from '@/config/website'
-import {loginByUsername, getUserInfo, logout, refreshToken, getButtons} from '@/api/user'
+import {loginByUsername, loginBySocial, getUserInfo, logout, refreshToken, getButtons} from '@/api/user'
 import {getTopMenu, getRoutes} from '@/api/system/menu'
 import md5 from 'js-md5'
 
@@ -69,27 +69,40 @@ const user = {
         })
       })
     },
-    GetButtons({commit}) {
+    //根据手机号登录
+    LoginByPhone({commit}, userInfo) {
       return new Promise((resolve) => {
-        getButtons().then(res => {
+        loginByUsername(userInfo.phone, userInfo.code).then(res => {
           const data = res.data.data;
-          commit('SET_PERMISSION', data);
+          commit('SET_TOKEN', data);
+          commit('DEL_ALL_TAG');
+          commit('CLEAR_LOCK');
           resolve();
         })
       })
     },
-    //根据手机号登录
-    LoginByPhone({commit}, userInfo) {
+    //根据第三方信息登录
+    LoginBySocial({ commit }, userInfo) {
       return new Promise((resolve) => {
-        loginByUsername(userInfo.phone, userInfo.code).then(res => {
-          const data = res.data.data;
-          commit('SET_TOKEN', data);
+        loginBySocial(userInfo.tenantId, userInfo.source, userInfo.code, userInfo.state).then(res => {
+          const data = res.data;
+          if (data.error_description) {
+            Message({
+              message: data.error_description,
+              type: 'error'
+            })
+          } else {
+            commit('SET_TOKEN', data.access_token);
+            commit('SET_REFRESH_TOKEN', data.refresh_token);
+            commit('SET_USER_INFO', data);
             commit('DEL_ALL_TAG');
             commit('CLEAR_LOCK');
+          }
           resolve();
         })
       })
     },
+    //获取用户信息
     GetUserInfo({commit}) {
       return new Promise((resolve, reject) => {
         getUserInfo().then((res) => {
@@ -173,6 +186,16 @@ const user = {
         })
       })
     },
+    //获取系统按钮
+    GetButtons({commit}) {
+      return new Promise((resolve) => {
+        getButtons().then(res => {
+          const data = res.data.data;
+          commit('SET_PERMISSION', data);
+          resolve();
+        })
+      })
+    },
   },
   mutations: {
     SET_TOKEN: (state, token) => {

src/util/util.js

@@ -1,4 +1,4 @@
-import { validatenull } from './validate'
+import {validatenull} from './validate'
 //表单序列化
 export const serialize = data => {
   let list = [];
@@ -113,6 +113,7 @@ export const listenfullscreen = (callback) => {
   function listen() {
     callback()
   }
+
   document.addEventListener("fullscreenchange", function () {
     listen();
   });
@@ -289,3 +290,21 @@ export const openWindow = (url, title, w, h) => {
     newWindow.focus()
   }
 }
+
+/**
+ * 获取顶部地址栏地址
+ */
+export const getTopUrl = () => {
+  return window.location.href.split("/#/")[0];
+}
+
+/**
+ * 获取url参数
+ * @param name 参数名
+ */
+export const getQueryString = (name) => {
+  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+  let r = window.location.search.substr(1).match(reg);
+  if (r != null) return unescape(decodeURI(r[2]));
+  return null;
+}

src/views/wel/index.vue

@@ -1,5 +1,37 @@
 <template>
   <div>
+    <el-row>
+      <el-col :span="24">
+        <el-dialog title="账号注册"
+                   append-to-body
+                   :visible.sync="accountBox"
+                   :close-on-click-modal="false"
+                   :close-on-press-escape="false"
+                   :show-close="false"
+                   width="20%">
+          <el-form :model="form" ref="form" label-width="80px">
+            <el-form-item v-if="tenantMode" label="租户编号">
+              <el-input v-model="form.tenantId" placeholder="请输入租户编号"></el-input>
+            </el-form-item>
+            <el-form-item label="用户姓名">
+              <el-input v-model="form.name" placeholder="请输入用户姓名"></el-input>
+            </el-form-item>
+            <el-form-item label="账号名称">
+              <el-input v-model="form.account" placeholder="请输入账号名称"></el-input>
+            </el-form-item>
+            <el-form-item label="账号密码">
+              <el-input v-model="form.password" placeholder="请输入账号密码"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码">
+              <el-input v-model="form.password2" placeholder="请输入确认密码"></el-input>
+            </el-form-item>
+          </el-form>
+          <span slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="handleRegister">确 定</el-button>
+            </span>
+        </el-dialog>
+      </el-col>
+    </el-row>
     <el-row>
       <el-col :span="24">
         <basic-container>
@@ -417,11 +449,22 @@
 
 <script>
   import {mapGetters} from "vuex";
+  import {registerGuest} from "@/api/user";
+  import {getTopUrl} from "@/util/util";
+  import {info} from "@/api/system/tenant";
 
   export default {
     name: "wel",
     data() {
       return {
+        form: {
+          name: '',
+          account: '',
+          password: '',
+          password2: '',
+        },
+        tenantMode: true,
+        accountBox: false,
         activeNames: ['1', '2', '3', '5'],
         logActiveNames: ['15']
       };
@@ -430,12 +473,60 @@
       ...mapGetters(["userInfo"]),
     },
     created() {
+      this.getTenant();
+    },
+    mounted() {
+      // 若未登录则弹出框进行绑定
+      if (this.userInfo.user_id === undefined || this.userInfo.user_id < 0) {
+        this.form.name = this.userInfo.user_name;
+        this.form.account = this.userInfo.user_name;
+        this.accountBox = true;
+      }
     },
     methods: {
+      handleRegister() {
+        if (this.form.tenantId === '') {
+          this.$message.warning("请先输入租户编号");
+          return;
+        }
+        if (this.form.account === '') {
+          this.$message.warning("请先输入账号名称");
+          return;
+        }
+        if (this.form.password === '' || this.form.password2 === '') {
+          this.$message.warning("请先输入密码");
+          return;
+        }
+        if (this.form.password !== this.form.password2) {
+          this.$message.warning("两次密码输入不一致");
+          return;
+        }
+        registerGuest(this.form, this.userInfo.oauth_id).then(res => {
+          const data = res.data;
+          if (data.success) {
+            this.$alert("注册申请已提交,请耐心等待管理员通过!", '注册提示')
+          } else {
+            this.$message.error(data.msg || '提交失败');
+          }
+          this.accountBox = false;
+        });
+      },
+      getTenant() {
+        let domain = getTopUrl();
+        // 临时指定域名，方便测试
+        //domain = "https://bladex.vip";
+        info(domain).then(res => {
+          const data = res.data;
+          if (data.success && data.data.tenantId) {
+            this.form.tenantId = data.data.tenantId;
+            this.tenantMode = false;
+          }
+        })
+      },
       handleChange(val) {
         window.console.log(val);
       }
-    }
+    },
   };
 </script>