feat: 新增单点登录回调页面

src/locales/langs/en-us.ts

@@ -181,7 +181,8 @@ const local: App.I18n.Schema = {
     'monitor_login-infor': 'Login Log',
     'monitor_oper-log': 'Operate Log',
     system_client: 'Client Management',
-    system_notice: 'Notice Management'
+    system_notice: 'Notice Management',
+    'social-callback': 'Social Callback'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -181,7 +181,8 @@ const local: App.I18n.Schema = {
     'monitor_login-infor': '登录日志',
     'monitor_oper-log': '操作日志',
     system_client: '客户端管理',
-    system_notice: '通知公告'
+    system_notice: '通知公告',
+    'social-callback': '单点登录回调'
   },
   page: {
     login: {

src/plugins/loading.ts

@@ -6,7 +6,7 @@ import { toggleHtmlClass } from '@/utils/common';
 import systemLogo from '@/assets/imgs/logo.png';
 import { $t } from '@/locales';
 
-export function setupLoading() {
+export function loading() {
   const themeColor = localStg.get('themeColor') || '#2080f0';
   const darkMode = localStg.get('darkMode') || false;
   const { r, g, b } = getRgb(themeColor);
@@ -17,7 +17,7 @@ export function setupLoading() {
     toggleHtmlClass(DARK_CLASS).add();
   }
 
-  const loading = `
+  return `
 <div class="fixed-center flex-col bg-layout" style="${primaryColor}">
 <div class="w-120px h-120px my-36px">
     <div class="relative h-full animate-spin">
@@ -26,10 +26,12 @@ export function setupLoading() {
   </div>
   <h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
 </div>`;
+}
 
+export function setupLoading() {
   const app = document.getElementById('app');
 
   if (app) {
-    app.innerHTML = loading;
+    app.innerHTML = loading();
   }
 }

src/router/elegant/imports.ts

@@ -20,6 +20,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   500: () => import("@/views/_builtin/500/index.vue"),
   "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
+  "social-callback": () => import("@/views/_builtin/social-callback/index.vue"),
   home: () => import("@/views/home/index.vue"),
   "monitor_login-infor": () => import("@/views/monitor/login-infor/index.vue"),
   "monitor_oper-log": () => import("@/views/monitor/oper-log/index.vue"),

src/router/elegant/routes.ts

@@ -104,6 +104,17 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'social-callback',
+    path: '/social-callback',
+    component: 'layout.blank$view.social-callback',
+    meta: {
+      title: 'social-callback',
+      i18nKey: 'route.social-callback',
+      constant: true,
+      hideInMenu: true
+    }
+  },
   {
     name: 'system',
     path: '/system',

src/router/elegant/transform.ts

@@ -172,6 +172,7 @@ const routeMap: RouteMap = {
   "monitor": "/monitor",
   "monitor_login-infor": "/monitor/login-infor",
   "monitor_oper-log": "/monitor/oper-log",
+  "social-callback": "/social-callback",
   "system": "/system",
   "system_client": "/system/client",
   "system_config": "/system/config",

src/router/routes/index.ts

@@ -100,6 +100,18 @@ const dynamicConstantRoutes: ElegantRoute[] = [
       keepAlive: true,
       icon: 'material-symbols:iframe-outline'
     }
+  },
+  {
+    name: 'social-callback',
+    path: '/social-callback',
+    component: 'layout.blank$view.social-callback',
+    meta: {
+      title: 'social-callback',
+      i18nKey: 'route.social-callback',
+      constant: true,
+      hideInMenu: true,
+      icon: 'simple-icons:authy'
+    }
   }
 ];
 

src/service/api/auth.ts

@@ -35,6 +35,15 @@ export function fetchLogin(data: Api.Auth.PwdLoginForm) {
   });
 }
 
+/** social login callback */
+export function fetchSocialLoginCallback(data: Api.Auth.SocialLoginForm) {
+  return request({
+    url: '/auth/social/callback',
+    method: 'post',
+    data
+  });
+}
+
 /** Register */
 export function fetchRegister(data: Api.Auth.RegisterForm) {
   return request<Api.Auth.LoginToken>({

src/service/api/system/index.ts

@@ -4,3 +4,4 @@ export * from './user';
 export * from './dept';
 export * from './role';
 export * from './post';
+export * from './social';

src/service/api/system/social.ts

@@ -0,0 +1,13 @@
+import { request } from '../../request';
+
+/** 绑定账户 */
+export function fetchSocialAuthBinding(source: Api.System.SocialSource, tenantId: string = '000000') {
+  return request<string>({
+    url: `/auth/binding/${source}`,
+    method: 'get',
+    params: {
+      tenantId,
+      domain: window.location.host
+    }
+  });
+}

src/service/request/index.ts

@@ -136,6 +136,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       if (response.data.rows) {
         return response.data;
       }
+
       return response.data.data;
     },
     onError(error) {

src/store/modules/auth/index.ts

@@ -62,15 +62,16 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
    *
    * @param [redirect=true] Whether to redirect after login. Default is `true`
    */
-  async function login(loginForm: Api.Auth.PwdLoginForm, redirect = true) {
+  async function login(loginForm: Api.Auth.PwdLoginForm | Api.Auth.SocialLoginForm, redirect = true) {
     startLoading();
 
     const { VITE_APP_CLIENT_ID } = import.meta.env;
 
     const loginData: Api.Auth.PwdLoginForm = {
       ...loginForm,
+      tenantId: loginForm.tenantId ?? '000000',
       clientId: VITE_APP_CLIENT_ID!,
-      grantType: 'password'
+      grantType: loginForm.grantType ?? 'password'
     };
 
     const { data: loginToken, error } = await fetchLogin(loginData);

src/typings/api/api.d.ts

@@ -114,6 +114,16 @@ declare namespace Api {
       password?: string;
     }
 
+    /** social login form */
+    interface SocialLoginForm extends LoginForm {
+      /** 授权码 */
+      socialCode?: string;
+      /** 授权状态 */
+      socialState?: string;
+      /** 来源 */
+      source?: string;
+    }
+
     /** register form */
     interface RegisterForm extends LoginForm {
       /** 用户名 */

src/typings/api/system.api.d.ts

@@ -594,5 +594,23 @@ declare namespace Api {
 
     /** client list */
     type ClientList = Api.Common.PaginatingQueryRecord<Client>;
+
+    /** social source */
+    type SocialSource =
+      | 'maxkey'
+      | 'topiam'
+      | 'qq'
+      | 'weibo'
+      | 'gitee'
+      | 'dingtalk'
+      | 'baidu'
+      | 'csdn'
+      | 'coding'
+      | 'oschina'
+      | 'alipay_wallet'
+      | 'wechat_open'
+      | 'wechat_mp'
+      | 'wechat_enterprise'
+      | 'gitlab';
   }
 }

src/typings/elegant-router.d.ts

@@ -26,6 +26,7 @@ declare module "@elegant-router/types" {
     "monitor": "/monitor";
     "monitor_login-infor": "/monitor/login-infor";
     "monitor_oper-log": "/monitor/oper-log";
+    "social-callback": "/social-callback";
     "system": "/system";
     "system_client": "/system/client";
     "system_config": "/system/config";
@@ -78,6 +79,7 @@ declare module "@elegant-router/types" {
     | "iframe-page"
     | "login"
     | "monitor"
+    | "social-callback"
     | "system"
     | "tool"
   >;
@@ -101,6 +103,7 @@ declare module "@elegant-router/types" {
     | "500"
     | "iframe-page"
     | "login"
+    | "social-callback"
     | "home"
     | "monitor_login-infor"
     | "monitor_oper-log"

src/views/_builtin/login/modules/pwd-login.vue

@@ -4,6 +4,7 @@ import type { SelectOption } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchCaptchaCode, fetchTenantList } from '@/service/api';
 // import { fetchGetConfigDetail } from '@/service/api/system/config';
+import { fetchSocialAuthBinding } from '@/service/api/system';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@@ -111,8 +112,10 @@ handleLoginRember();
 
 // handleRegister();
 
-function handleSocialLogin(type: string) {
+async function handleSocialLogin(type: Api.System.SocialSource) {
-  console.log(type);
+  const { data, error } = await fetchSocialAuthBinding(type, model.tenantId);
+  if (error) return;
+  window.location.href = data;
 }
 </script>
 
@@ -151,7 +154,8 @@ function handleSocialLogin(type: string) {
           <ButtonIcon local-icon="topiam" @click="handleSocialLogin('topiam')" />
           <ButtonIcon local-icon="maxkey" @click="handleSocialLogin('maxkey')" />
           <ButtonIcon class="color-#c71d23" icon="simple-icons:gitee" @click="handleSocialLogin('gitee')" />
-          <ButtonIcon class="color-#010409" icon="mdi:github" @click="handleSocialLogin('github')" />
+          <!-- <ButtonIcon class="color-#010409" icon="mdi:github" @click="handleSocialLogin('github')" /> -->
+          <ButtonIcon icon="material-icon-theme:gitlab" @click="handleSocialLogin('gitlab')" />
         </NSpace>
       </div>
       <NButton type="primary" size="large" block :loading="authStore.loginLoading" @click="handleSubmit">

src/views/_builtin/social-callback/index.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useLoading } from '@sa/hooks';
+import { loading as loadingHtml } from '@/plugins/loading';
+import { fetchSocialLoginCallback } from '@/service/api';
+import { useAuthStore } from '@/store/modules/auth';
+import { useRouterPush } from '@/hooks/common/router';
+
+const route = useRoute();
+const authStore = useAuthStore();
+const { routerPushByKey } = useRouterPush();
+const { loading, startLoading, endLoading } = useLoading();
+
+/**
+ * 接收Route传递的参数
+ *
+ * @param {Object} route.query.
+ */
+const code = route.query.code as string;
+const state = route.query.state as string;
+const source = route.query.source as string;
+const stateJson = state ? JSON.parse(atob(state)) : {};
+const tenantId = (stateJson.tenantId as string) ?? '000000';
+const domain = (stateJson.domain as string) ?? window.location.host;
+
+const processResponse = async () => {
+  window.$message?.success('登录成功');
+  setTimeout(() => {
+    routerPushByKey('home');
+  }, 2000);
+};
+
+const handleError = () => {
+  setTimeout(() => {
+    routerPushByKey('login');
+  }, 2000);
+};
+
+const callbackByCode = async (data: Api.Auth.SocialLoginForm) => {
+  const { error } = await fetchSocialLoginCallback({
+    ...data,
+    clientId: import.meta.env.VITE_APP_CLIENT_ID,
+    grantType: 'social'
+  });
+  if (error) {
+    handleError();
+    return;
+  }
+  await processResponse();
+  endLoading();
+};
+
+const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
+  try {
+    await authStore.login(data);
+    await processResponse();
+  } catch {
+    handleError();
+  }
+  endLoading();
+};
+
+const init = async () => {
+  startLoading();
+  // 如果域名不相等 则重定向处理
+  const host = window.location.host;
+  if (domain !== host) {
+    const urlFull = new URL(window.location.href);
+    urlFull.host = domain;
+    window.location.href = urlFull.toString();
+    return;
+  }
+
+  const data: Api.Auth.SocialLoginForm = {
+    socialCode: code,
+    socialState: state,
+    tenantId,
+    source,
+    grantType: 'social'
+  };
+
+  if (!authStore.isLogin) {
+    await loginByCode(data);
+  } else {
+    await callbackByCode(data);
+  }
+};
+
+onMounted(async () => {
+  await init();
+});
+
+watch(loading, val => {
+  if (val) {
+    const app = document.getElementById('social-callback');
+    if (app) {
+      app.innerHTML = loadingHtml();
+    }
+  }
+});
+</script>
+
+<template>
+  <div v-if="loading" id="social-callback"></div>
+</template>
+
+<style scoped></style>