feat: support OIDC login.

frontend/src/views/admin/SettingsView.vue

@@ -1124,7 +1124,327 @@
             </div>
           </div>
         </div>
-        </div><!-- /Tab: Security — Registration, Turnstile, LinuxDo -->
+
+        <!-- Generic OIDC OAuth 登录 -->
+        <div class="card">
+          <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+              {{ t('admin.settings.oidc.title') }}
+            </h2>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {{ t('admin.settings.oidc.description') }}
+            </p>
+          </div>
+          <div class="space-y-5 p-6">
+            <div class="flex items-center justify-between">
+              <div>
+                <label class="font-medium text-gray-900 dark:text-white">{{
+                  t('admin.settings.oidc.enable')
+                }}</label>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  {{ t('admin.settings.oidc.enableHint') }}
+                </p>
+              </div>
+              <Toggle v-model="form.oidc_connect_enabled" />
+            </div>
+
+            <div
+              v-if="form.oidc_connect_enabled"
+              class="space-y-6 border-t border-gray-100 pt-4 dark:border-dark-700"
+            >
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.providerName') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_provider_name"
+                    type="text"
+                    class="input"
+                    :placeholder="t('admin.settings.oidc.providerNamePlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.clientId') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_client_id"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.clientIdPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.clientSecret') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_client_secret"
+                    type="password"
+                    class="input font-mono text-sm"
+                    :placeholder="
+                      form.oidc_connect_client_secret_configured
+                        ? t('admin.settings.oidc.clientSecretConfiguredPlaceholder')
+                        : t('admin.settings.oidc.clientSecretPlaceholder')
+                    "
+                  />
+                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{
+                      form.oidc_connect_client_secret_configured
+                        ? t('admin.settings.oidc.clientSecretConfiguredHint')
+                        : t('admin.settings.oidc.clientSecretHint')
+                    }}
+                  </p>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.issuerUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_issuer_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.issuerUrlPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.discoveryUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_discovery_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.discoveryUrlPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.authorizeUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_authorize_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.authorizeUrlPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.tokenUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_token_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.tokenUrlPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.userinfoUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_userinfo_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.userinfoUrlPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.jwksUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_jwks_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.jwksUrlPlaceholder')"
+                  />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.scopes') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_scopes"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.scopesPlaceholder')"
+                  />
+                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('admin.settings.oidc.scopesHint') }}
+                  </p>
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.redirectUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_redirect_url"
+                    type="url"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.redirectUrlPlaceholder')"
+                  />
+                  <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+                    <button
+                      type="button"
+                      class="btn btn-secondary btn-sm w-fit"
+                      @click="setAndCopyOIDCRedirectUrl"
+                    >
+                      {{ t('admin.settings.oidc.quickSetCopy') }}
+                    </button>
+                    <code
+                      v-if="oidcRedirectUrlSuggestion"
+                      class="select-all break-all rounded bg-gray-50 px-2 py-1 font-mono text-xs text-gray-600 dark:bg-dark-800 dark:text-gray-300"
+                    >
+                      {{ oidcRedirectUrlSuggestion }}
+                    </code>
+                  </div>
+                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('admin.settings.oidc.redirectUrlHint') }}
+                  </p>
+                </div>
+
+                <div class="lg:col-span-2">
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.frontendRedirectUrl') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_frontend_redirect_url"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.frontendRedirectUrlPlaceholder')"
+                  />
+                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('admin.settings.oidc.frontendRedirectUrlHint') }}
+                  </p>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.tokenAuthMethod') }}
+                  </label>
+                  <select v-model="form.oidc_connect_token_auth_method" class="input font-mono text-sm">
+                    <option value="client_secret_post">client_secret_post</option>
+                    <option value="client_secret_basic">client_secret_basic</option>
+                    <option value="none">none</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.clockSkewSeconds') }}
+                  </label>
+                  <input
+                    v-model.number="form.oidc_connect_clock_skew_seconds"
+                    type="number"
+                    min="0"
+                    max="600"
+                    class="input"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.allowedSigningAlgs') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_allowed_signing_algs"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.allowedSigningAlgsPlaceholder')"
+                  />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+                <div class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700">
+                  <div>
+                    <label class="font-medium text-gray-900 dark:text-white">
+                      {{ t('admin.settings.oidc.usePkce') }}
+                    </label>
+                  </div>
+                  <Toggle v-model="form.oidc_connect_use_pkce" />
+                </div>
+
+                <div class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700">
+                  <div>
+                    <label class="font-medium text-gray-900 dark:text-white">
+                      {{ t('admin.settings.oidc.validateIdToken') }}
+                    </label>
+                  </div>
+                  <Toggle v-model="form.oidc_connect_validate_id_token" />
+                </div>
+
+                <div class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700">
+                  <div>
+                    <label class="font-medium text-gray-900 dark:text-white">
+                      {{ t('admin.settings.oidc.requireEmailVerified') }}
+                    </label>
+                  </div>
+                  <Toggle v-model="form.oidc_connect_require_email_verified" />
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.userinfoEmailPath') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_userinfo_email_path"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.userinfoEmailPathPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.userinfoIdPath') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_userinfo_id_path"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.userinfoIdPathPlaceholder')"
+                  />
+                </div>
+
+                <div>
+                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {{ t('admin.settings.oidc.userinfoUsernamePath') }}
+                  </label>
+                  <input
+                    v-model="form.oidc_connect_userinfo_username_path"
+                    type="text"
+                    class="input font-mono text-sm"
+                    :placeholder="t('admin.settings.oidc.userinfoUsernamePathPlaceholder')"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div><!-- /Tab: Security — Registration, Turnstile, LinuxDo, OIDC -->
 
         <!-- Tab: Users -->
         <div v-show="activeTab === 'users'" class="space-y-6">
@@ -2193,6 +2513,7 @@ type SettingsForm = SystemSettings & {
   smtp_password: string
   turnstile_secret_key: string
   linuxdo_connect_client_secret: string
+  oidc_connect_client_secret: string
 }
 
 const form = reactive<SettingsForm>({
@@ -2240,6 +2561,30 @@ const form = reactive<SettingsForm>({
   linuxdo_connect_client_secret: '',
   linuxdo_connect_client_secret_configured: false,
   linuxdo_connect_redirect_url: '',
+  // Generic OIDC OAuth 登录
+  oidc_connect_enabled: false,
+  oidc_connect_provider_name: 'OIDC',
+  oidc_connect_client_id: '',
+  oidc_connect_client_secret: '',
+  oidc_connect_client_secret_configured: false,
+  oidc_connect_issuer_url: '',
+  oidc_connect_discovery_url: '',
+  oidc_connect_authorize_url: '',
+  oidc_connect_token_url: '',
+  oidc_connect_userinfo_url: '',
+  oidc_connect_jwks_url: '',
+  oidc_connect_scopes: 'openid email profile',
+  oidc_connect_redirect_url: '',
+  oidc_connect_frontend_redirect_url: '/auth/oidc/callback',
+  oidc_connect_token_auth_method: 'client_secret_post',
+  oidc_connect_use_pkce: false,
+  oidc_connect_validate_id_token: true,
+  oidc_connect_allowed_signing_algs: 'RS256,ES256,PS256',
+  oidc_connect_clock_skew_seconds: 120,
+  oidc_connect_require_email_verified: false,
+  oidc_connect_userinfo_email_path: '',
+  oidc_connect_userinfo_id_path: '',
+  oidc_connect_userinfo_username_path: '',
   // Model fallback
   enable_model_fallback: false,
   fallback_model_anthropic: 'claude-3-5-sonnet-20241022',
@@ -2360,6 +2705,21 @@ async function setAndCopyLinuxdoRedirectUrl() {
   await copyToClipboard(url, t('admin.settings.linuxdo.redirectUrlSetAndCopied'))
 }
 
+const oidcRedirectUrlSuggestion = computed(() => {
+  if (typeof window === 'undefined') return ''
+  const origin =
+    window.location.origin || `${window.location.protocol}//${window.location.host}`
+  return `${origin}/api/v1/auth/oauth/oidc/callback`
+})
+
+async function setAndCopyOIDCRedirectUrl() {
+  const url = oidcRedirectUrlSuggestion.value
+  if (!url) return
+
+  form.oidc_connect_redirect_url = url
+  await copyToClipboard(url, t('admin.settings.oidc.redirectUrlSetAndCopied'))
+}
+
 // Custom menu item management
 function addMenuItem() {
   form.custom_menu_items.push({
@@ -2425,6 +2785,7 @@ async function loadSettings() {
     smtpPasswordManuallyEdited.value = false
     form.turnstile_secret_key = ''
     form.linuxdo_connect_client_secret = ''
+    form.oidc_connect_client_secret = ''
   } catch (error: any) {
     loadFailed.value = true
     appStore.showError(
@@ -2559,6 +2920,28 @@ async function saveSettings() {
       linuxdo_connect_client_id: form.linuxdo_connect_client_id,
       linuxdo_connect_client_secret: form.linuxdo_connect_client_secret || undefined,
       linuxdo_connect_redirect_url: form.linuxdo_connect_redirect_url,
+      oidc_connect_enabled: form.oidc_connect_enabled,
+      oidc_connect_provider_name: form.oidc_connect_provider_name,
+      oidc_connect_client_id: form.oidc_connect_client_id,
+      oidc_connect_client_secret: form.oidc_connect_client_secret || undefined,
+      oidc_connect_issuer_url: form.oidc_connect_issuer_url,
+      oidc_connect_discovery_url: form.oidc_connect_discovery_url,
+      oidc_connect_authorize_url: form.oidc_connect_authorize_url,
+      oidc_connect_token_url: form.oidc_connect_token_url,
+      oidc_connect_userinfo_url: form.oidc_connect_userinfo_url,
+      oidc_connect_jwks_url: form.oidc_connect_jwks_url,
+      oidc_connect_scopes: form.oidc_connect_scopes,
+      oidc_connect_redirect_url: form.oidc_connect_redirect_url,
+      oidc_connect_frontend_redirect_url: form.oidc_connect_frontend_redirect_url,
+      oidc_connect_token_auth_method: form.oidc_connect_token_auth_method,
+      oidc_connect_use_pkce: form.oidc_connect_use_pkce,
+      oidc_connect_validate_id_token: form.oidc_connect_validate_id_token,
+      oidc_connect_allowed_signing_algs: form.oidc_connect_allowed_signing_algs,
+      oidc_connect_clock_skew_seconds: form.oidc_connect_clock_skew_seconds,
+      oidc_connect_require_email_verified: form.oidc_connect_require_email_verified,
+      oidc_connect_userinfo_email_path: form.oidc_connect_userinfo_email_path,
+      oidc_connect_userinfo_id_path: form.oidc_connect_userinfo_id_path,
+      oidc_connect_userinfo_username_path: form.oidc_connect_userinfo_username_path,
       enable_model_fallback: form.enable_model_fallback,
       fallback_model_anthropic: form.fallback_model_anthropic,
       fallback_model_openai: form.fallback_model_openai,
@@ -2583,6 +2966,7 @@ async function saveSettings() {
     smtpPasswordManuallyEdited.value = false
     form.turnstile_secret_key = ''
     form.linuxdo_connect_client_secret = ''
+    form.oidc_connect_client_secret = ''
     // Refresh cached settings so sidebar/header update immediately
     await appStore.fetchPublicSettings(true)
     await adminSettingsStore.fetch(true)

frontend/src/views/auth/LoginView.vue

@@ -11,8 +11,26 @@
         </p>
       </div>
 
-      <!-- LinuxDo Connect OAuth 登录 -->
-      <LinuxDoOAuthSection v-if="linuxdoOAuthEnabled && !backendModeEnabled" :disabled="isLoading" />
+  <div v-if="!backendModeEnabled && (linuxdoOAuthEnabled || oidcOAuthEnabled)" class="space-y-4">
+        <LinuxDoOAuthSection
+          v-if="linuxdoOAuthEnabled"
+          :disabled="isLoading"
+          :show-divider="false"
+        />
+        <OidcOAuthSection
+          v-if="oidcOAuthEnabled"
+          :disabled="isLoading"
+          :provider-name="oidcOAuthProviderName"
+          :show-divider="false"
+        />
+        <div class="flex items-center gap-3">
+          <div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
+          <span class="text-xs text-gray-500 dark:text-dark-400">
+            {{ t('auth.oauthOrContinue') }}
+          </span>
+          <div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
+        </div>
+      </div>
 
       <!-- Login Form -->
       <form @submit.prevent="handleLogin" class="space-y-5">
@@ -181,6 +199,7 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
 import LinuxDoOAuthSection from '@/components/auth/LinuxDoOAuthSection.vue'
+import OidcOAuthSection from '@/components/auth/OidcOAuthSection.vue'
 import TotpLoginModal from '@/components/auth/TotpLoginModal.vue'
 import Icon from '@/components/icons/Icon.vue'
 import TurnstileWidget from '@/components/TurnstileWidget.vue'
@@ -207,6 +226,8 @@ const turnstileEnabled = ref<boolean>(false)
 const turnstileSiteKey = ref<string>('')
 const linuxdoOAuthEnabled = ref<boolean>(false)
 const backendModeEnabled = ref<boolean>(false)
+const oidcOAuthEnabled = ref<boolean>(false)
+const oidcOAuthProviderName = ref<string>('OIDC')
 const passwordResetEnabled = ref<boolean>(false)
 
 // Turnstile
@@ -247,6 +268,9 @@ onMounted(async () => {
     turnstileSiteKey.value = settings.turnstile_site_key || ''
     linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled
     backendModeEnabled.value = settings.backend_mode_enabled
+    oidcOAuthEnabled.value = settings.oidc_oauth_enabled
+    oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
+    backendModeEnabled.value = settings.backend_mode_enabled
     passwordResetEnabled.value = settings.password_reset_enabled
   } catch (error) {
     console.error('Failed to load public settings:', error)

frontend/src/views/auth/OidcCallbackView.vue

@@ -0,0 +1,234 @@
+<template>
+  <AuthLayout>
+    <div class="space-y-6">
+      <div class="text-center">
+        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+          {{ t('auth.oidc.callbackTitle', { providerName }) }}
+        </h2>
+        <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
+          {{
+            isProcessing
+              ? t('auth.oidc.callbackProcessing', { providerName })
+              : t('auth.oidc.callbackHint')
+          }}
+        </p>
+      </div>
+
+      <transition name="fade">
+        <div v-if="needsInvitation" class="space-y-4">
+          <p class="text-sm text-gray-700 dark:text-gray-300">
+            {{ t('auth.oidc.invitationRequired', { providerName }) }}
+          </p>
+          <div>
+            <input
+              v-model="invitationCode"
+              type="text"
+              class="input w-full"
+              :placeholder="t('auth.invitationCodePlaceholder')"
+              :disabled="isSubmitting"
+              @keyup.enter="handleSubmitInvitation"
+            />
+          </div>
+          <transition name="fade">
+            <p v-if="invitationError" class="text-sm text-red-600 dark:text-red-400">
+              {{ invitationError }}
+            </p>
+          </transition>
+          <button
+            class="btn btn-primary w-full"
+            :disabled="isSubmitting || !invitationCode.trim()"
+            @click="handleSubmitInvitation"
+          >
+            {{
+              isSubmitting
+                ? t('auth.oidc.completing')
+                : t('auth.oidc.completeRegistration')
+            }}
+          </button>
+        </div>
+      </transition>
+
+      <transition name="fade">
+        <div
+          v-if="errorMessage"
+          class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
+        >
+          <div class="flex items-start gap-3">
+            <div class="flex-shrink-0">
+              <Icon name="exclamationCircle" size="md" class="text-red-500" />
+            </div>
+            <div class="space-y-2">
+              <p class="text-sm text-red-700 dark:text-red-400">
+                {{ errorMessage }}
+              </p>
+              <router-link to="/login" class="btn btn-primary">
+                {{ t('auth.oidc.backToLogin') }}
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { AuthLayout } from '@/components/layout'
+import Icon from '@/components/icons/Icon.vue'
+import { useAuthStore, useAppStore } from '@/stores'
+import {
+  completeOIDCOAuthRegistration,
+  getPublicSettings
+} from '@/api/auth'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+const isProcessing = ref(true)
+const errorMessage = ref('')
+
+const needsInvitation = ref(false)
+const pendingOAuthToken = ref('')
+const invitationCode = ref('')
+const isSubmitting = ref(false)
+const invitationError = ref('')
+const redirectTo = ref('/dashboard')
+const providerName = ref('OIDC')
+
+function parseFragmentParams(): URLSearchParams {
+  const raw = typeof window !== 'undefined' ? window.location.hash : ''
+  const hash = raw.startsWith('#') ? raw.slice(1) : raw
+  return new URLSearchParams(hash)
+}
+
+function sanitizeRedirectPath(path: string | null | undefined): string {
+  if (!path) return '/dashboard'
+  if (!path.startsWith('/')) return '/dashboard'
+  if (path.startsWith('//')) return '/dashboard'
+  if (path.includes('://')) return '/dashboard'
+  if (path.includes('\n') || path.includes('\r')) return '/dashboard'
+  return path
+}
+
+async function loadProviderName() {
+  try {
+    const settings = await getPublicSettings()
+    const name = settings.oidc_oauth_provider_name?.trim()
+    if (name) {
+      providerName.value = name
+    }
+  } catch {
+    // Ignore; fallback remains OIDC
+  }
+}
+
+async function handleSubmitInvitation() {
+  invitationError.value = ''
+  if (!invitationCode.value.trim()) return
+
+  isSubmitting.value = true
+  try {
+    const tokenData = await completeOIDCOAuthRegistration(
+      pendingOAuthToken.value,
+      invitationCode.value.trim()
+    )
+    if (tokenData.refresh_token) {
+      localStorage.setItem('refresh_token', tokenData.refresh_token)
+    }
+    if (tokenData.expires_in) {
+      localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
+    }
+    await authStore.setToken(tokenData.access_token)
+    appStore.showSuccess(t('auth.loginSuccess'))
+    await router.replace(redirectTo.value)
+  } catch (e: unknown) {
+    const err = e as { message?: string; response?: { data?: { message?: string } } }
+    invitationError.value =
+      err.response?.data?.message || err.message || t('auth.oidc.completeRegistrationFailed')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+onMounted(async () => {
+  void loadProviderName()
+
+  const params = parseFragmentParams()
+  const token = params.get('access_token') || ''
+  const refreshToken = params.get('refresh_token') || ''
+  const expiresInStr = params.get('expires_in') || ''
+  const redirect = sanitizeRedirectPath(
+    params.get('redirect') || (route.query.redirect as string | undefined) || '/dashboard'
+  )
+  const error = params.get('error')
+  const errorDesc = params.get('error_description') || params.get('error_message') || ''
+
+  if (error) {
+    if (error === 'invitation_required') {
+      pendingOAuthToken.value = params.get('pending_oauth_token') || ''
+      redirectTo.value = sanitizeRedirectPath(params.get('redirect'))
+      if (!pendingOAuthToken.value) {
+        errorMessage.value = t('auth.oidc.invalidPendingToken')
+        appStore.showError(errorMessage.value)
+        isProcessing.value = false
+        return
+      }
+      needsInvitation.value = true
+      isProcessing.value = false
+      return
+    }
+    errorMessage.value = errorDesc || error
+    appStore.showError(errorMessage.value)
+    isProcessing.value = false
+    return
+  }
+
+  if (!token) {
+    errorMessage.value = t('auth.oidc.callbackMissingToken')
+    appStore.showError(errorMessage.value)
+    isProcessing.value = false
+    return
+  }
+
+  try {
+    if (refreshToken) {
+      localStorage.setItem('refresh_token', refreshToken)
+    }
+    if (expiresInStr) {
+      const expiresIn = parseInt(expiresInStr, 10)
+      if (!isNaN(expiresIn)) {
+        localStorage.setItem('token_expires_at', String(Date.now() + expiresIn * 1000))
+      }
+    }
+
+    await authStore.setToken(token)
+    appStore.showSuccess(t('auth.loginSuccess'))
+    await router.replace(redirect)
+  } catch (e: unknown) {
+    const err = e as { message?: string; response?: { data?: { detail?: string } } }
+    errorMessage.value = err.response?.data?.detail || err.message || t('auth.loginFailed')
+    appStore.showError(errorMessage.value)
+    isProcessing.value = false
+  }
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

frontend/src/views/auth/RegisterView.vue

@@ -11,8 +11,26 @@
         </p>
       </div>
 
-      <!-- LinuxDo Connect OAuth 登录 -->
-      <LinuxDoOAuthSection v-if="linuxdoOAuthEnabled" :disabled="isLoading" />
+      <div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">
+        <LinuxDoOAuthSection
+          v-if="linuxdoOAuthEnabled"
+          :disabled="isLoading"
+          :show-divider="false"
+        />
+        <OidcOAuthSection
+          v-if="oidcOAuthEnabled"
+          :disabled="isLoading"
+          :provider-name="oidcOAuthProviderName"
+          :show-divider="false"
+        />
+        <div class="flex items-center gap-3">
+          <div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
+          <span class="text-xs text-gray-500 dark:text-dark-400">
+            {{ t('auth.oauthOrContinue') }}
+          </span>
+          <div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
+        </div>
+      </div>
 
       <!-- Registration Disabled Message -->
       <div
@@ -289,6 +307,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
 import LinuxDoOAuthSection from '@/components/auth/LinuxDoOAuthSection.vue'
+import OidcOAuthSection from '@/components/auth/OidcOAuthSection.vue'
 import Icon from '@/components/icons/Icon.vue'
 import TurnstileWidget from '@/components/TurnstileWidget.vue'
 import { useAuthStore, useAppStore } from '@/stores'
@@ -324,6 +343,8 @@ const turnstileEnabled = ref<boolean>(false)
 const turnstileSiteKey = ref<string>('')
 const siteName = ref<string>('Sub2API')
 const linuxdoOAuthEnabled = ref<boolean>(false)
+const oidcOAuthEnabled = ref<boolean>(false)
+const oidcOAuthProviderName = ref<string>('OIDC')
 const registrationEmailSuffixWhitelist = ref<string[]>([])
 
 // Turnstile
@@ -376,6 +397,8 @@ onMounted(async () => {
     turnstileSiteKey.value = settings.turnstile_site_key || ''
     siteName.value = settings.site_name || 'Sub2API'
     linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled
+    oidcOAuthEnabled.value = settings.oidc_oauth_enabled
+    oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
     registrationEmailSuffixWhitelist.value = normalizeRegistrationEmailSuffixWhitelist(
       settings.registration_email_suffix_whitelist || []
     )