perf: 支持OIDC单点登录

2026-05-15 04:27:31 +08:00 · 2025-12-01 00:40:46 +08:00
parent 22a5f34e1f
commit fbf12f16b5
18 changed files with 371 additions and 153 deletions
@@ -11,6 +11,9 @@
        <a-tab-pane key="register" :tab="t('certd.sys.setting.registerSetting')">
          <SettingRegister v-if="activeKey === 'register'" />
        </a-tab-pane>
+        <a-tab-pane key="oauth" :tab="t('certd.sys.setting.oauthSetting')">
+          <SettingOauth v-if="activeKey === 'oauth'" />
+        </a-tab-pane>
        <a-tab-pane v-if="settingsStore.isComm" key="payment" :tab="t('certd.sys.setting.paymentSetting')">
          <SettingPayment v-if="activeKey === 'payment'" />
        </a-tab-pane>
@@ -35,6 +38,7 @@ import SettingPayment from "/@/views/sys/settings/tabs/payment.vue";
 import SettingSafe from "/@/views/sys/settings/tabs/safe.vue";
 import SettingCaptcha from "/@/views/sys/settings/tabs/captcha.vue";
 import SettingPipeline from "/@/views/sys/settings/tabs/pipeline.vue";
+import SettingOauth from "/@/views/sys/settings/tabs/oauth.vue";
 import { useRoute, useRouter } from "vue-router";
 import { ref } from "vue";
 import { useSettingStore } from "/@/store/settings";
@@ -47,9 +51,7 @@ const settingsStore = useSettingStore();
 const activeKey = ref("base");
 const route = useRoute();
 const router = useRouter();
-if (route.query.tab) {
-  activeKey.value = (route.query.tab as string) || "base";
-}
+activeKey.value = (route.query.tab as string) || "base";

 function onChange(value: string) {
  // activeKey.value = value;
@@ -0,0 +1,150 @@
+<template>
+  <div class="sys-settings-form sys-settings-oauth">
+    <a-form :model="formState" name="register" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish">
+      <a-form-item :label="t('certd.sys.setting.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="button"></vip-button>
+        </div>
+      </a-form-item>
+      <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.sys.setting.oauthProviders')" :name="['public', 'oauthProviders']">
+        <div class="flex flex-wrap">
+          <table class="w-full table-auto border-collapse border border-gray-400">
+            <thead>
+              <tr>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthType") }}</th>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthCallback") }}</th>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthConfig") }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, key) of oauthProviders" :key="key">
+                <td class="border border-gray-300 px-4 py-2">
+                  <div class="flex items-center" :title="item.desc">
+                    <fs-icon :icon="item.icon" class="mr-2 text-blue-600" />
+                    {{ item.title }}
+                  </div>
+                </td>
+                <td class="border border-gray-300 px-4 py-2 overflow-ellipsis" :title="t('certd.sys.setting.oauthCallbackHelper')">
+                  <fs-copyable :model-value="buildCallbackUrl(item.name)">
+                    {{ t("certd.sys.setting.oauthCallbackCopy") }}
+                  </fs-copyable>
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  <AddonSelector v-model:model-value="item.addonId" addon-type="oauth" from="sys" :type="item.name" :placeholder="t('certd.sys.setting.oauthProviderSelectorPlaceholder')" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </a-form-item>
+      <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.sys.setting.oauthOnly')" :name="['public', 'oauthOnly']">
+        <div class="flex-o">
+          <a-switch v-model:checked="formState.public.oauthOnly" :disabled="!settingsStore.isPlus" :title="t('certd.plusFeature')" />
+        </div>
+        <div class="helper">{{ t("certd.sys.setting.oauthOnlyHelper") }}</div>
+      </a-form-item>
+      <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.sys.setting.oauthAutoRedirect')" :name="['public', 'oauthAutoRedirect']">
+        <div class="flex-o">
+          <a-switch v-model:checked="formState.public.oauthAutoRedirect" :disabled="!settingsStore.isPlus" :title="t('certd.plusFeature')" />
+        </div>
+        <div class="helper">{{ t("certd.sys.setting.oauthAutoRedirectHelper") }}</div>
+      </a-form-item>
+      <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.sys.setting.oauthAutoRegister')" :name="['public', 'oauthAutoRegister']">
+        <div class="flex-o">
+          <a-switch
+            v-model:checked="formState.public.oauthAutoRegister"
+            :checked-children="t('certd.sys.setting.oauthAutoRegisterCheckedText')"
+            :un-checked-children="t('certd.sys.setting.oauthAutoRegisterUnCheckedText')"
+            :disabled="!settingsStore.isPlus"
+            :title="t('certd.plusFeature')"
+          />
+        </div>
+        <div class="helper">{{ t("certd.sys.setting.oauthAutoRegisterHelper") }}</div>
+      </a-form-item>
+      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
+        <a-button :loading="saveLoading" type="primary" html-type="submit">{{ t("certd.saveButton") }}</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { notification } from "ant-design-vue";
+import { merge } from "lodash-es";
+import { reactive, ref, Ref } from "vue";
+import AddonSelector from "../../../certd/addon/addon-selector/index.vue";
+import { useSettingStore } from "/@/store/settings";
+import * as api from "/@/views/sys/settings/api";
+import { SysSettings } from "/@/views/sys/settings/api";
+import { useI18n } from "/src/locales";
+const { t } = useI18n();
+
+defineOptions({
+  name: "SettingOauth",
+});
+
+const formState = reactive<Partial<SysSettings>>({
+  public: {},
+  private: {},
+});
+
+const oauthProviders = ref([]);
+async function loadOauthProviders() {
+  oauthProviders.value = await api.GetOauthProviders();
+}
+
+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);
+
+  await loadOauthProviders();
+}
+
+const saveLoading = ref(false);
+loadSysSettings();
+const settingsStore = useSettingStore();
+const onFinish = async (form: any) => {
+  try {
+    saveLoading.value = true;
+    fillOauthProviders(form);
+    await api.SysSettingsSave(form);
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: t("certd.saveSuccess"),
+    });
+  } finally {
+    saveLoading.value = false;
+  }
+};
+
+function buildCallbackUrl(type: string) {
+  return `${window.location.origin}/api/oauth/callback/${type}`;
+}
+</script>
+<style lang="less">
+.sys-settings-oauth {
+  width: 1000px !important;
+
+  .addon-selector {
+    .inner {
+      justify-content: space-between;
+    }
+  }
+}
+</style>
@@ -55,45 +55,6 @@
          </a-form-item>
        </template>
      </template>
-
-      <a-form-item :label="t('certd.sys.setting.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="button"></vip-button>
-        </div>
-      </a-form-item>
-      <a-form-item v-if="formState.public.oauthEnabled" :label="t('certd.sys.setting.oauthProviders')" :name="['public', 'oauthProviders']">
-        <div class="flex flex-wrap">
-          <table class="w-full table-auto border-collapse border border-gray-400">
-            <thead>
-              <tr>
-                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthType") }}</th>
-                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthCallback") }}</th>
-                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthConfig") }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, key) of oauthProviders" :key="key">
-                <td class="border border-gray-300 px-4 py-2">
-                  <div class="flex items-center" :title="item.desc">
-                    <fs-icon :icon="item.icon" class="mr-2 text-blue-600" />
-                    {{ item.title }}
-                  </div>
-                </td>
-                <td class="border border-gray-300 px-4 py-2 overflow-ellipsis" :title="t('certd.sys.setting.oauthCallbackHelper')">
-                  <fs-copyable :model-value="buildCallbackUrl(item.name)">
-                    {{ t("certd.sys.setting.oauthCallbackCopy") }}
-                  </fs-copyable>
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <AddonSelector v-model:model-value="item.addonId" addon-type="oauth" from="sys" :type="item.name" :placeholder="t('certd.sys.setting.oauthProviderSelectorPlaceholder')" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </a-form-item>
-
      <a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
        <a-button :loading="saveLoading" type="primary" html-type="submit">{{ t("certd.saveButton") }}</a-button>
      </a-form-item>
@@ -105,7 +66,6 @@
 import { notification } from "ant-design-vue";
 import { merge } from "lodash-es";
 import { reactive, ref, Ref } from "vue";
-import AddonSelector from "../../../certd/addon/addon-selector/index.vue";
 import { useSettingStore } from "/@/store/settings";
 import * as api from "/@/views/sys/settings/api";
 import { SysSettings } from "/@/views/sys/settings/api";
@@ -196,26 +156,6 @@ async function loadTypeDefine(type: string) {
  smsTypeDefineInputs.value = inputs;
 }

-const oauthProviders = ref([]);
-async function loadOauthProviders() {
-  oauthProviders.value = await api.GetOauthProviders();
-}
-
-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);
@@ -230,7 +170,6 @@ async function loadSysSettings() {
  if (!settingsStore.isComm) {
    formState.public.smsLoginEnabled = false;
  }
-  await loadOauthProviders();
 }

 const saveLoading = ref(false);
@@ -239,7 +178,6 @@ const settingsStore = useSettingStore();
 const onFinish = async (form: any) => {
  try {
    saveLoading.value = true;
-    fillOauthProviders(form);
    await api.SysSettingsSave(form);
    await settingsStore.loadSysSettings();
    notification.success({
@@ -249,10 +187,6 @@ const onFinish = async (form: any) => {
    saveLoading.value = false;
  }
 };
-
-function buildCallbackUrl(type: string) {
-  return `${window.location.origin}/api/oauth/callback/${type}`;
-}
 </script>
 <style lang="less">
 .sys-settings-register {