perf: 支持oidc单点登录

2026-04-23 19:57:27 +08:00 · 2025-11-27 01:59:22 +08:00
parent c7b298c46f
commit ec75afbc44
25 changed files with 633 additions and 103 deletions
@@ -32,6 +32,14 @@ export const outsideResource = [
        path: "/forgotPassword",
        component: "/framework/forgot-password/index.vue",
      },
+      {
+        meta: {
+          title: "第三方登录回调",
+        },
+        name: "oauthCallback",
+        path: "/oauth/callback/:type",
+        component: "/framework/oauth/oauth-callback.vue",
+      },
    ],
  },
  ...errorPage,
@@ -59,6 +59,17 @@ export type SysPublicSetting = {

  // 固定证书有效期天数，0表示不固定
  fixedCertExpireDays?: number;
+
+  // 第三方OAuth配置
+  oauthEnabled?: boolean;
+  oauthProviders?: Record<
+    string,
+    {
+      type: string;
+      title: string;
+      addonId: number;
+    }
+  >;
 };
 export type SuiteSetting = {
  enabled?: boolean;
@@ -82,6 +82,7 @@ function createCrudOptionsWithApi(opts: any) {
  opts.context = {
    api,
    addonType: props.addonType,
+    type: props.type,
  };
  return createCrudOptions(opts);
 }
@@ -110,7 +110,8 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any, a
      type: "dict-select",
      dict: addonTypeDictRef,
      search: {
-        show: false,
+        show: true,
+        valueChange: null,
      },
      column: {
        width: 200,
@@ -5,7 +5,12 @@ import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq,
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const api = context.api;
  const addonType = context.addonType;
+  const type = context.type;
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    if (query.query?.body) {
+      delete query.query.body;
+    }
+
    return await api.GetList(query);
  };
  const editRequest = async (req: EditReq) => {
@@ -44,6 +49,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
          },
        },
      },
+      addForm: {
+        initialForm: {
+          addonType: addonType,
+          type: type,
+        },
+      },
      rowHandle: {
        width: 200,
      },
@@ -51,7 +51,7 @@
          {{ t("authentication.loginButton") }}
        </a-button>

-        <div v-if="!!settingStore.sysPublic.selfServicePasswordRetrievalEnabled" class="mt-2">
+        <div v-if="!!settingStore.sysPublic.selfServicePasswordRetrievalEnabled && !queryBindCode" class="mt-2">
          <router-link :to="{ name: 'forgotPassword' }">
            {{ t("authentication.forgotPassword") }}
          </router-link>
@@ -61,10 +61,14 @@
      <a-form-item class="user-login-other">
        <div class="flex flex-between justify-between items-center">
          <language-toggle class="color-blue"></language-toggle>
-          <router-link v-if="hasRegisterTypeEnabled()" class="register" :to="{ name: 'register' }">
+          <router-link v-if="hasRegisterTypeEnabled() && !queryBindCode" class="register" :to="{ name: 'register' }">
            {{ t("authentication.registerLink") }}
          </router-link>
        </div>
+
+        <div class="flex flex-between justify-between items-center mt-5">
+          <oauth-footer></oauth-footer>
+        </div>
      </a-form-item>
    </a-form>
    <a-form v-else ref="twoFactorFormRef" class="user-layout-login" :model="twoFactor" v-bind="layout">
@@ -96,12 +100,18 @@ import { useI18n } from "/@/locales";
 import { LanguageToggle } from "/@/vben/layouts";
 import CaptchaInput from "/@/components/captcha/captcha-input.vue";
 import { useRoute } from "vue-router";
+import OauthFooter from "/@/views/framework/oauth/oauth-footer.vue";
+import * as oauthApi from "../oauth/api";
+import { notification } from "ant-design-vue";
 export default defineComponent({
  name: "LoginPage",
-  components: { LanguageToggle, SmsCode, CaptchaInput },
+  components: { LanguageToggle, SmsCode, CaptchaInput, OauthFooter },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
+
+    const queryBindCode = ref(route.query.bindCode as string | undefined);
+
    const urlLoginType = route.query.loginType as string | undefined;
    const verifyCodeInputRef = ref();
    const loading = ref(false);
@@ -160,6 +170,13 @@ export default defineComponent({
      },
    };

+    async function afterLoginSuccess() {
+      if (queryBindCode.value) {
+        await oauthApi.BindUser(queryBindCode.value);
+        notification.success({ message: "绑定第三方账号成功" });
+      }
+    }
+
    const twoFactor = reactive({
      loginId: "",
      verifyCode: "",
@@ -167,6 +184,7 @@ export default defineComponent({

    const handleTwoFactorSubmit = async () => {
      await userStore.loginByTwoFactor(twoFactor);
+      afterLoginSuccess();
    };

    const handleFinish = async () => {
@@ -178,6 +196,7 @@ export default defineComponent({
        // }
        const loginType = formState.loginType;
        await userStore.login(loginType, toRaw(formState));
+        afterLoginSuccess();
      } catch (e: any) {
        //@ts-ignore
        if (e.code === 10020) {
@@ -233,6 +252,7 @@ export default defineComponent({
      settingStore,
      captchaInputRef,
      captchaInputForSmsCode,
+      queryBindCode,
    };
  },
 });
@@ -0,0 +1,45 @@
+import { request } from "/src/api/service";
+
+const apiPrefix = "/oauth";
+
+export async function OauthLogin(type: string) {
+  return await request({
+    url: apiPrefix + `/login`,
+    method: "post",
+    data: {
+      type,
+    },
+  });
+}
+
+export async function OauthCallback(type: string, query: Record<string, string>) {
+  return await request({
+    url: apiPrefix + `/callback`,
+    method: "post",
+    data: {
+      type,
+      ...query,
+    },
+  });
+}
+
+export async function AutoRegister(type: string, code: string) {
+  return await request({
+    url: apiPrefix + `/autoRegister`,
+    method: "post",
+    data: {
+      validationCode: code,
+      type,
+    },
+  });
+}
+
+export async function BindUser(code: string) {
+  return await request({
+    url: apiPrefix + `/bind`,
+    method: "post",
+    data: {
+      validationCode: code,
+    },
+  });
+}
@@ -0,0 +1,105 @@
+<template>
+  <div class="oauth-callback-page">
+    <div class="oauth-callback-content">
+      <div v-if="!bindRequired" class="oauth-callback-title">
+        <span>登录中...</span>
+      </div>
+      <div v-else class="oauth-callback-title">
+        <div>第三方登录成功，还未绑定账号，请选择</div>
+
+        <div>
+          <a-button class="w-full mt-5" type="primary" @click="goBindUser">绑定已有账号</a-button>
+          <a-button class="w-full mt-5" type="primary" @click="autoRegister">创建新账号</a-button>
+        </div>
+
+        <div class="w-full mt-5">
+          <router-link to="/login" class="w-full mt-5" type="primary">返回登录页</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import * as api from "./api";
+import { useRoute, useRouter } from "vue-router";
+import { useUserStore } from "/@/store/user";
+
+const route = useRoute();
+const router = useRouter();
+const oauthType = route.params.type as string;
+
+const query = route.query as Record<string, string>;
+
+const userStore = useUserStore();
+
+const bindRequired = ref(false);
+const bindCode = ref("");
+
+async function handleOauthCallback() {
+  //处理第三方登录回调
+  const res = await api.OauthCallback(oauthType, query);
+  if (res.token) {
+    //登录成功
+    userStore.onLoginSuccess(res);
+    //跳转到首页
+    router.replace("/");
+    return;
+  }
+  if (res.bindRequired) {
+    //需要绑定
+    bindRequired.value = true;
+    bindCode.value = res.validationCode;
+  }
+}
+
+onMounted(async () => {
+  await handleOauthCallback();
+});
+
+async function goBindUser() {
+  //绑定已有账号
+  router.replace({
+    path: "/login",
+    query: {
+      bindCode: bindCode.value,
+    },
+  });
+}
+
+async function autoRegister() {
+  //自动注册账号
+  const res = await api.AutoRegister(oauthType, bindCode.value);
+  //登录成功
+  userStore.onLoginSuccess(res);
+  //跳转到首页
+  router.replace("/");
+}
+</script>
+<style lang="less">
+.oauth-callback-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+
+  .oauth-callback-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 16px;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 50px;
+
+    .oauth-callback-title {
+      font-size: 24px;
+      font-weight: 500;
+    }
+  }
+}
+</style>
@@ -0,0 +1,45 @@
+<template>
+  <div class="oauth-footer">
+    <div v-for="item in oauthList" :key="item.type">
+      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.type)">
+        <el-icon :icon="item.icon" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import * as api from "./api";
+
+const oauthList = ref([
+  {
+    name: "OIDC",
+    type: "oidc",
+    icon: "ion:oidc",
+  },
+]);
+
+async function goOauthLogin(type: string) {
+  //获取第三方登录URL
+  const res = await api.OauthLogin(type);
+  const loginUrl = res.loginUrl;
+  window.location.href = loginUrl;
+}
+</script>
+<style lang="less">
+.oauth-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  .oauth-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 100px;
+  }
+}
+</style>
@@ -111,3 +111,10 @@ export async function GetSmsTypeDefine(type: string) {
    },
  });
 }
+
+export async function GetOauthProviders() {
+  return await request({
+    url: apiPrefix + "/oauth/providers",
+    method: "post",
+  });
+}
@@ -54,6 +54,33 @@
            <div class="helper">{{ t("certd.saveThenTest") }}</div>
          </a-form-item>
        </template>
+        <a-form-item :label="t('certd.enableOauth')" :name="['public', 'oauthEnabled']">
+          <div class="flex-o">
+            <a-switch v-model:checked="formState.public.oauthEnabled" :disabled="!settingsStore.isPlus" :title="t('certd.plusFeature')" />
+            <vip-button class="ml-5" mode="plus"></vip-button>
+          </div>
+        </a-form-item>
+        <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.oauthProviders')" :name="['public', 'oauthProviders']">
+          <div class="flex flex-wrap">
+            <table>
+              <tr>
+                <th>{{ t("certd.oauthType") }}</th>
+                <th>{{ t("certd.oauthConfig") }}</th>
+              </tr>
+              <tr v-for="(item, key) of oauthProviders" :key="key">
+                <td>
+                  <div class="flex items-center">
+                    <fs-icon :icon="item.icon" />
+                    {{ item.title }}
+                  </div>
+                </td>
+                <td>
+                  <AddonSelector v-model:model-value="item.addonId" addon-type="oauth" from="sys" :type="item.name" :placeholder="t('certd.clientIdPlaceholder')" />
+                </td>
+              </tr>
+            </table>
+          </div>
+        </a-form-item>
      </template>

      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
@@ -64,14 +91,14 @@
 </template>

 <script setup lang="tsx">
-import { reactive, ref, Ref } from "vue";
+import { computed, reactive, ref, Ref } from "vue";
 import { GetSmsTypeDefine, SysSettings } from "/@/views/sys/settings/api";
 import * as api from "/@/views/sys/settings/api";
 import { merge } from "lodash-es";
 import { useSettingStore } from "/@/store/settings";
 import { notification } from "ant-design-vue";
 import { useI18n } from "/src/locales";
-
+import AddonSelector from "../../../certd/addon/addon-selector/index.vue";
 const { t } = useI18n();

 defineOptions({
@@ -158,6 +185,35 @@ async function loadTypeDefine(type: string) {
  smsTypeDefineInputs.value = inputs;
 }

+const oauthProviders = ref([]);
+async function loadOauthProviders() {
+  let list: any = await api.GetOauthProviders();
+  oauthProviders.value = list;
+  for (const item of list) {
+    debugger;
+    const type = item.name;
+    const provider = formState.public.oauthProviders?.[type];
+    if (provider) {
+      item.addonId = provider.addonId;
+    }
+  }
+}
+
+function fillOauthProviders(form: any) {
+  const providers: any = {};
+  for (const item of oauthProviders.value) {
+    const type = item.name;
+    providers[type] = {
+      type: type,
+      title: item.title,
+      icon: item.icon,
+      addonId: item.addonId || null,
+    };
+  }
+  form.public.oauthProviders = providers;
+  return providers;
+}
+
 async function loadSysSettings() {
  const data: any = await api.SysSettingsGet();
  merge(formState, data);
@@ -172,6 +228,7 @@ async function loadSysSettings() {
  if (!settingsStore.isComm) {
    formState.public.smsLoginEnabled = false;
  }
+  await loadOauthProviders();
 }

 const saveLoading = ref(false);
@@ -180,6 +237,7 @@ const settingsStore = useSettingStore();
 const onFinish = async (form: any) => {
  try {
    saveLoading.value = true;
+    fillOauthProviders(form);
    await api.SysSettingsSave(form);
    await settingsStore.loadSysSettings();
    notification.success({