feat: add profile auth identity binding flow

2026-04-20 18:28:44 +08:00
parent 13d9780df4
commit c6d8592484
31 changed files with 3419 additions and 239 deletions
--- a/frontend/src/views/auth/LinuxDoCallbackView.vue
+++ b/frontend/src/views/auth/LinuxDoCallbackView.vue
@@ -136,6 +136,9 @@ import { useAuthStore, useAppStore } from '@/stores'
 import {
  completeLinuxDoOAuthRegistration,
  exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
  type OAuthAdoptionDecision,
  type PendingOAuthExchangeResponse
 } from '@/api/auth'
@@ -162,6 +165,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')

 function parseFragmentParams(): URLSearchParams {
  const raw = typeof window !== 'undefined' ? window.location.hash : ''
@@ -209,18 +213,19 @@ function hasSuggestedProfile(completion: {
  return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }

-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
+  }
+
+  if (!isOAuthLoginCompletion(completion)) {
    throw new Error(t('auth.linuxdo.callbackMissingToken'))
  }

-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
-  }
-
+  persistOAuthTokenContext(completion)
  await authStore.setToken(completion.access_token)
  appStore.showSuccess(t('auth.loginSuccess'))
  await router.replace(redirect)
@@ -236,12 +241,7 @@ async function handleSubmitInvitation() {
      invitationCode.value.trim(),
      currentAdoptionDecision()
    )
-    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))
-    }
+    persistOAuthTokenContext(tokenData)
    await authStore.setToken(tokenData.access_token)
    appStore.showSuccess(t('auth.loginSuccess'))
    await router.replace(redirectTo.value)
@@ -258,7 +258,7 @@ async function handleContinueLogin() {
  isSubmitting.value = true
  try {
    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
-    await finalizeLogin(completion, redirectTo.value)
+    await finalizeCompletion(completion, redirectTo.value)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
@@ -305,7 +305,7 @@ onMounted(async () => {
      return
    }

-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
--- a/frontend/src/views/auth/OidcCallbackView.vue
+++ b/frontend/src/views/auth/OidcCallbackView.vue
@@ -145,7 +145,10 @@ import { useAuthStore, useAppStore } from '@/stores'
 import {
  completeOIDCOAuthRegistration,
  exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
  getPublicSettings,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
  type OAuthAdoptionDecision,
  type PendingOAuthExchangeResponse
 } from '@/api/auth'
@@ -172,6 +175,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')

 function parseFragmentParams(): URLSearchParams {
  const raw = typeof window !== 'undefined' ? window.location.hash : ''
@@ -231,18 +235,19 @@ function hasSuggestedProfile(completion: {
  return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }

-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
+  }
+
+  if (!isOAuthLoginCompletion(completion)) {
    throw new Error(t('auth.oidc.callbackMissingToken'))
  }

-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
-  }
-
+  persistOAuthTokenContext(completion)
  await authStore.setToken(completion.access_token)
  appStore.showSuccess(t('auth.loginSuccess'))
  await router.replace(redirect)
@@ -258,12 +263,7 @@ async function handleSubmitInvitation() {
      invitationCode.value.trim(),
      currentAdoptionDecision()
    )
-    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))
-    }
+    persistOAuthTokenContext(tokenData)
    await authStore.setToken(tokenData.access_token)
    appStore.showSuccess(t('auth.loginSuccess'))
    await router.replace(redirectTo.value)
@@ -280,7 +280,7 @@ async function handleContinueLogin() {
  isSubmitting.value = true
  try {
    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
-    await finalizeLogin(completion, redirectTo.value)
+    await finalizeCompletion(completion, redirectTo.value)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
@@ -329,7 +329,7 @@ onMounted(async () => {
      return
    }

-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
--- a/frontend/src/views/auth/WechatCallbackView.vue
+++ b/frontend/src/views/auth/WechatCallbackView.vue
@@ -140,27 +140,16 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
 import Icon from '@/components/icons/Icon.vue'
-import { apiClient } from '@/api/client'
 import { useAuthStore, useAppStore } from '@/stores'
-
-interface OAuthTokenResponse {
-  access_token: string
-  refresh_token: string
-  expires_in: number
-  token_type: string
-}
-
-interface PendingOAuthExchangeResponse {
-  access_token?: string
-  refresh_token?: string
-  expires_in?: number
-  token_type?: string
-  redirect?: string
-  error?: string
-  adoption_required?: boolean
-  suggested_display_name?: string
-  suggested_avatar_url?: string
-}
+import {
+  completeWeChatOAuthRegistration,
+  exchangePendingOAuthCompletion,
+  getOAuthCompletionKind,
+  isOAuthLoginCompletion,
+  persistOAuthTokenContext,
+  type OAuthAdoptionDecision,
+  type PendingOAuthExchangeResponse
+} from '@/api/auth'

 const route = useRoute()
 const router = useRouter()
@@ -182,6 +171,7 @@ const suggestedAvatarUrl = ref('')
 const adoptDisplayName = ref(true)
 const adoptAvatar = ref(true)
 const needsAdoptionConfirmation = ref(false)
+const bindSuccessMessage = t('profile.authBindings.bindSuccess')

 const providerName = 'WeChat'

@@ -200,10 +190,10 @@ function sanitizeRedirectPath(path: string | null | undefined): string {
  return path
 }

-function currentAdoptionDecision(): Record<string, boolean> {
+function currentAdoptionDecision(): OAuthAdoptionDecision {
  return {
-    adopt_display_name: adoptDisplayName.value,
-    adopt_avatar: adoptAvatar.value,
+    adoptDisplayName: adoptDisplayName.value,
+    adoptAvatar: adoptAvatar.value
  }
 }

@@ -224,49 +214,35 @@ function hasSuggestedProfile(completion: PendingOAuthExchangeResponse): boolean
  return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
 }

-async function exchangePendingOAuthCompletion(): Promise<PendingOAuthExchangeResponse> {
-  const { data } = await apiClient.post<PendingOAuthExchangeResponse>('/auth/oauth/pending/exchange', {})
-  return data
-}
+async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
+  if (getOAuthCompletionKind(completion) === 'bind') {
+    const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
+    appStore.showSuccess(bindSuccessMessage)
+    await router.replace(bindRedirect)
+    return
+  }

-async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) {
-  if (!completion.access_token) {
+  if (!isOAuthLoginCompletion(completion)) {
    throw new Error(t('auth.oidc.callbackMissingToken'))
  }

-  if (completion.refresh_token) {
-    localStorage.setItem('refresh_token', completion.refresh_token)
-  }
-  if (completion.expires_in) {
-    localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
-  }
-
+  persistOAuthTokenContext(completion)
  await authStore.setToken(completion.access_token)
  appStore.showSuccess(t('auth.loginSuccess'))
  await router.replace(redirect)
 }

-async function completeWeChatOAuthRegistration(invitation: string): Promise<OAuthTokenResponse> {
-  const { data } = await apiClient.post<OAuthTokenResponse>('/auth/oauth/wechat/complete-registration', {
-    invitation_code: invitation,
-    ...currentAdoptionDecision(),
-  })
-  return data
-}
-
 async function handleSubmitInvitation() {
  invitationError.value = ''
  if (!invitationCode.value.trim()) return

  isSubmitting.value = true
  try {
-    const tokenData = await completeWeChatOAuthRegistration(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))
-    }
+    const tokenData = await completeWeChatOAuthRegistration(
+      invitationCode.value.trim(),
+      currentAdoptionDecision()
+    )
+    persistOAuthTokenContext(tokenData)
    await authStore.setToken(tokenData.access_token)
    appStore.showSuccess(t('auth.loginSuccess'))
    await router.replace(redirectTo.value)
@@ -282,11 +258,8 @@ async function handleSubmitInvitation() {
 async function handleContinueLogin() {
  isSubmitting.value = true
  try {
-    const { data } = await apiClient.post<PendingOAuthExchangeResponse>(
-      '/auth/oauth/pending/exchange',
-      currentAdoptionDecision()
-    )
-    await finalizeLogin(data, redirectTo.value)
+    const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
+    await finalizeCompletion(completion, redirectTo.value)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
@@ -333,7 +306,7 @@ onMounted(async () => {
      return
    }

-    await finalizeLogin(completion, redirect)
+    await finalizeCompletion(completion, redirect)
  } catch (e: unknown) {
    const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
    errorMessage.value =
--- a/frontend/src/views/auth/tests/LinuxDoCallbackView.spec.ts
+++ b/frontend/src/views/auth/tests/LinuxDoCallbackView.spec.ts
@@ -39,10 +39,14 @@ vi.mock('@/stores', () => ({
  })
 }))

-vi.mock('@/api/auth', () => ({
-  exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
-  completeLinuxDoOAuthRegistration: (...args: any[]) => completeLinuxDoOAuthRegistration(...args)
-}))
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
+    exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
+    completeLinuxDoOAuthRegistration: (...args: any[]) => completeLinuxDoOAuthRegistration(...args)
+  }
+})

 describe('LinuxDoCallbackView', () => {
  beforeEach(() => {
@@ -132,6 +136,64 @@ describe('LinuxDoCallbackView', () => {
    expect(replace).toHaveBeenCalledWith('/dashboard')
  })

+  it('treats a completion without token as bind success and returns to profile', async () => {
+    exchangePendingOAuthCompletion.mockResolvedValue({})
+
+    mount(LinuxDoCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile')
+  })
+
+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletion
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'LinuxDo Nick',
+        suggested_avatar_url: 'https://cdn.example/linuxdo.png'
+      })
+      .mockResolvedValueOnce({
+        redirect: '/profile/security'
+      })
+
+    const wrapper = mount(LinuxDoCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true
+    })
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile/security')
+  })
+
  it('renders adoption choices for invitation flow and submits the selected values', async () => {
    exchangePendingOAuthCompletion.mockResolvedValue({
      error: 'invitation_required',
--- a/frontend/src/views/auth/tests/OidcCallbackView.spec.ts
+++ b/frontend/src/views/auth/tests/OidcCallbackView.spec.ts
@@ -45,11 +45,15 @@ vi.mock('@/stores', () => ({
  })
 }))

-vi.mock('@/api/auth', () => ({
-  exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
-  completeOIDCOAuthRegistration: (...args: any[]) => completeOIDCOAuthRegistration(...args),
-  getPublicSettings: (...args: any[]) => getPublicSettings(...args)
-}))
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
+    exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
+    completeOIDCOAuthRegistration: (...args: any[]) => completeOIDCOAuthRegistration(...args),
+    getPublicSettings: (...args: any[]) => getPublicSettings(...args)
+  }
+})

 describe('OidcCallbackView', () => {
  beforeEach(() => {
@@ -143,6 +147,43 @@ describe('OidcCallbackView', () => {
    expect(replace).toHaveBeenCalledWith('/dashboard')
  })

+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletion
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'OIDC Nick',
+        suggested_avatar_url: 'https://cdn.example/oidc.png'
+      })
+      .mockResolvedValueOnce({
+        redirect: '/profile'
+      })
+
+    const wrapper = mount(OidcCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false
+        }
+      }
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true
+    })
+    expect(setToken).not.toHaveBeenCalled()
+    expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replace).toHaveBeenCalledWith('/profile')
+  })
+
  it('renders adoption choices for invitation flow and submits the selected values', async () => {
    exchangePendingOAuthCompletion.mockResolvedValue({
      error: 'invitation_required',
--- a/frontend/src/views/auth/tests/WechatCallbackView.spec.ts
+++ b/frontend/src/views/auth/tests/WechatCallbackView.spec.ts
@@ -3,14 +3,16 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import WechatCallbackView from '@/views/auth/WechatCallbackView.vue'

 const {
-  postMock,
+  exchangePendingOAuthCompletionMock,
+  completeWeChatOAuthRegistrationMock,
  replaceMock,
  setTokenMock,
  showSuccessMock,
  showErrorMock,
  routeState,
 } = vi.hoisted(() => ({
-  postMock: vi.fn(),
+  exchangePendingOAuthCompletionMock: vi.fn(),
+  completeWeChatOAuthRegistrationMock: vi.fn(),
  replaceMock: vi.fn(),
  setTokenMock: vi.fn(),
  showSuccessMock: vi.fn(),
@@ -86,15 +88,19 @@ vi.mock('@/stores', () => ({
  }),
 }))

-vi.mock('@/api/client', () => ({
-  apiClient: {
-    post: postMock,
-  },
-}))
+vi.mock('@/api/auth', async () => {
+  const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
+  return {
+    ...actual,
+    exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletionMock(...args),
+    completeWeChatOAuthRegistration: (...args: any[]) => completeWeChatOAuthRegistrationMock(...args),
+  }
+})

 describe('WechatCallbackView', () => {
  beforeEach(() => {
-    postMock.mockReset()
+    exchangePendingOAuthCompletionMock.mockReset()
+    completeWeChatOAuthRegistrationMock.mockReset()
    replaceMock.mockReset()
    setTokenMock.mockReset()
    showSuccessMock.mockReset()
@@ -104,14 +110,12 @@ describe('WechatCallbackView', () => {
  })

  it('does not send adoption decisions during the initial exchange', async () => {
-    postMock.mockResolvedValueOnce({
-      data: {
-        access_token: 'access-token',
-        refresh_token: 'refresh-token',
-        expires_in: 3600,
-        redirect: '/dashboard',
-        adoption_required: true,
-      },
+    exchangePendingOAuthCompletionMock.mockResolvedValue({
+      access_token: 'access-token',
+      refresh_token: 'refresh-token',
+      expires_in: 3600,
+      redirect: '/dashboard',
+      adoption_required: true,
    })
    setTokenMock.mockResolvedValue({})

@@ -128,28 +132,24 @@ describe('WechatCallbackView', () => {

    await flushPromises()

-    expect(postMock).toHaveBeenCalledWith('/auth/oauth/pending/exchange', {})
-    expect(postMock).toHaveBeenCalledTimes(1)
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledWith()
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledTimes(1)
  })

  it('waits for explicit adoption confirmation before finishing a non-invitation login', async () => {
-    postMock
+    exchangePendingOAuthCompletionMock
      .mockResolvedValueOnce({
-        data: {
-          redirect: '/dashboard',
-          adoption_required: true,
-          suggested_display_name: 'WeChat Nick',
-          suggested_avatar_url: 'https://cdn.example/wechat.png',
-        },
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'WeChat Nick',
+        suggested_avatar_url: 'https://cdn.example/wechat.png',
      })
      .mockResolvedValueOnce({
-        data: {
-          access_token: 'wechat-access-token',
-          refresh_token: 'wechat-refresh-token',
-          expires_in: 3600,
-          token_type: 'Bearer',
-          redirect: '/dashboard',
-        },
+        access_token: 'wechat-access-token',
+        refresh_token: 'wechat-refresh-token',
+        expires_in: 3600,
+        token_type: 'Bearer',
+        redirect: '/dashboard',
      })
    setTokenMock.mockResolvedValue({})

@@ -179,35 +179,67 @@ describe('WechatCallbackView', () => {
    await buttons[0].trigger('click')
    await flushPromises()

-    expect(postMock).toHaveBeenNthCalledWith(1, '/auth/oauth/pending/exchange', {})
-    expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/pending/exchange', {
-      adopt_display_name: true,
-      adopt_avatar: false,
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(1)
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: false,
    })
    expect(setTokenMock).toHaveBeenCalledWith('wechat-access-token')
    expect(replaceMock).toHaveBeenCalledWith('/dashboard')
    expect(localStorage.getItem('refresh_token')).toBe('wechat-refresh-token')
  })

+  it('supports bind completion after adoption confirmation', async () => {
+    exchangePendingOAuthCompletionMock
+      .mockResolvedValueOnce({
+        redirect: '/dashboard',
+        adoption_required: true,
+        suggested_display_name: 'WeChat Nick',
+        suggested_avatar_url: 'https://cdn.example/wechat.png',
+      })
+      .mockResolvedValueOnce({
+        redirect: '/profile/connections',
+      })
+
+    const wrapper = mount(WechatCallbackView, {
+      global: {
+        stubs: {
+          AuthLayout: { template: '<div><slot /></div>' },
+          Icon: true,
+          RouterLink: { template: '<a><slot /></a>' },
+          transition: false,
+        },
+      },
+    })
+
+    await flushPromises()
+
+    await wrapper.findAll('button')[0].trigger('click')
+    await flushPromises()
+
+    expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
+      adoptDisplayName: true,
+      adoptAvatar: true,
+    })
+    expect(setTokenMock).not.toHaveBeenCalled()
+    expect(showSuccessMock).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
+    expect(replaceMock).toHaveBeenCalledWith('/profile/connections')
+  })
+
  it('renders adoption choices for invitation flow and submits the selected values', async () => {
-    postMock
-      .mockResolvedValueOnce({
-        data: {
-          error: 'invitation_required',
-          redirect: '/subscriptions',
-          adoption_required: true,
-          suggested_display_name: 'WeChat Nick',
-          suggested_avatar_url: 'https://cdn.example/wechat.png',
-        },
-      })
-      .mockResolvedValueOnce({
-        data: {
-          access_token: 'wechat-invite-token',
-          refresh_token: 'wechat-invite-refresh',
-          expires_in: 600,
-          token_type: 'Bearer',
-        },
-      })
+    exchangePendingOAuthCompletionMock.mockResolvedValue({
+      error: 'invitation_required',
+      redirect: '/subscriptions',
+      adoption_required: true,
+      suggested_display_name: 'WeChat Nick',
+      suggested_avatar_url: 'https://cdn.example/wechat.png',
+    })
+    completeWeChatOAuthRegistrationMock.mockResolvedValue({
+      access_token: 'wechat-invite-token',
+      refresh_token: 'wechat-invite-refresh',
+      expires_in: 600,
+      token_type: 'Bearer',
+    })

    const wrapper = mount(WechatCallbackView, {
      global: {
@@ -230,10 +262,9 @@ describe('WechatCallbackView', () => {
    await wrapper.get('button').trigger('click')
    await flushPromises()

-    expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/wechat/complete-registration', {
-      invitation_code: 'INVITE-CODE',
-      adopt_display_name: false,
-      adopt_avatar: true,
+    expect(completeWeChatOAuthRegistrationMock).toHaveBeenCalledWith('INVITE-CODE', {
+      adoptDisplayName: false,
+      adoptAvatar: true,
    })
    expect(setTokenMock).toHaveBeenCalledWith('wechat-invite-token')
    expect(replaceMock).toHaveBeenCalledWith('/subscriptions')
--- a/frontend/src/views/user/ProfileView.vue
+++ b/frontend/src/views/user/ProfileView.vue
@@ -2,18 +2,53 @@
  <AppLayout>
    <div class="mx-auto max-w-4xl space-y-6">
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
-        <StatCard :title="t('profile.accountBalance')" :value="formatCurrency(user?.balance || 0)" :icon="WalletIcon" icon-variant="success" />
-        <StatCard :title="t('profile.concurrencyLimit')" :value="user?.concurrency || 0" :icon="BoltIcon" icon-variant="warning" />
-        <StatCard :title="t('profile.memberSince')" :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })" :icon="CalendarIcon" icon-variant="primary" />
+        <StatCard
+          :title="t('profile.accountBalance')"
+          :value="formatCurrency(user?.balance || 0)"
+          :icon="WalletIcon"
+          icon-variant="success"
+        />
+        <StatCard
+          :title="t('profile.concurrencyLimit')"
+          :value="user?.concurrency || 0"
+          :icon="BoltIcon"
+          icon-variant="warning"
+        />
+        <StatCard
+          :title="t('profile.memberSince')"
+          :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })"
+          :icon="CalendarIcon"
+          icon-variant="primary"
+        />
      </div>
-      <ProfileInfoCard :user="user" />
-      <div v-if="contactInfo" class="card border-primary-200 bg-primary-50 dark:bg-primary-900/20 p-6">
+
+      <ProfileInfoCard
+        :user="user"
+        :linuxdo-enabled="linuxdoOAuthEnabled"
+        :oidc-enabled="oidcOAuthEnabled"
+        :oidc-provider-name="oidcOAuthProviderName"
+        :wechat-enabled="wechatOAuthEnabled"
+      />
+
+      <div
+        v-if="contactInfo"
+        class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
+      >
        <div class="flex items-center gap-4">
-          <div class="p-3 bg-primary-100 rounded-xl text-primary-600"><Icon name="chat" size="lg" /></div>
-          <div><h3 class="font-semibold text-primary-800 dark:text-primary-200">{{ t('common.contactSupport') }}</h3><p class="text-sm font-medium">{{ contactInfo }}</p></div>
+          <div class="rounded-xl bg-primary-100 p-3 text-primary-600">
+            <Icon name="chat" size="lg" />
+          </div>
+          <div>
+            <h3 class="font-semibold text-primary-800 dark:text-primary-200">
+              {{ t('common.contactSupport') }}
+            </h3>
+            <p class="text-sm font-medium">{{ contactInfo }}</p>
+          </div>
        </div>
      </div>
+
      <ProfileEditForm :initial-username="user?.username || ''" />
+
      <ProfileBalanceNotifyCard
        v-if="user && balanceLowNotifyEnabled"
        :enabled="user.balance_notify_enabled ?? true"
@@ -22,6 +57,7 @@
        :system-default-threshold="systemDefaultThreshold"
        :user-email="user.email"
      />
+
      <ProfilePasswordForm />
      <ProfileTotpCard />
    </div>
@@ -29,26 +65,78 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, h, onMounted } from 'vue'; import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/stores/auth'; import { formatDate } from '@/utils/format'
-import { authAPI } from '@/api'; import AppLayout from '@/components/layout/AppLayout.vue'
+import { computed, h, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { authAPI } from '@/api'
+import { Icon } from '@/components/icons'
 import StatCard from '@/components/common/StatCard.vue'
-import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
-import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import AppLayout from '@/components/layout/AppLayout.vue'
 import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
+import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
 import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
 import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue'
-import { Icon } from '@/components/icons'
+import { useAuthStore } from '@/stores/auth'
+import { formatDate } from '@/utils/format'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const user = computed(() => authStore.user)

-const { t } = useI18n(); const authStore = useAuthStore(); const user = computed(() => authStore.user)
 const contactInfo = ref('')
 const balanceLowNotifyEnabled = ref(false)
 const systemDefaultThreshold = ref(0)
+const linuxdoOAuthEnabled = ref(false)
+const wechatOAuthEnabled = ref(false)
+const oidcOAuthEnabled = ref(false)
+const oidcOAuthProviderName = ref('OIDC')

-const WalletIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]) }
-const BoltIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]) }
-const CalendarIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]) }
+const WalletIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]
+    )
+}
+const BoltIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]
+    )
+}
+const CalendarIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]
+    )
+}

-onMounted(async () => { try { const s = await authAPI.getPublicSettings(); contactInfo.value = s.contact_info || ''; balanceLowNotifyEnabled.value = s.balance_low_notify_enabled ?? false; systemDefaultThreshold.value = s.balance_low_notify_threshold ?? 0 } catch (error) { console.error('Failed to load settings:', error) } })
-const formatCurrency = (v: number) => `$${v.toFixed(2)}`
-</script>
+onMounted(async () => {
+  const profileRefresh = authStore.refreshUser().catch((error) => {
+    console.error('Failed to refresh profile:', error)
+  })
+
+  const settingsLoad = authAPI.getPublicSettings()
+    .then((settings) => {
+      contactInfo.value = settings.contact_info || ''
+      balanceLowNotifyEnabled.value = settings.balance_low_notify_enabled ?? false
+      systemDefaultThreshold.value = settings.balance_low_notify_threshold ?? 0
+      linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled ?? false
+      wechatOAuthEnabled.value = settings.wechat_oauth_enabled ?? false
+      oidcOAuthEnabled.value = settings.oidc_oauth_enabled ?? false
+      oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
+    })
+    .catch((error) => {
+      console.error('Failed to load settings:', error)
+    })
+
+  await Promise.all([profileRefresh, settingsLoad])
+})
+
+const formatCurrency = (value: number) => `$${value.toFixed(2)}`
+</script>