fix: switch frontend login to authentik auth-code flow

src/api/auth.js

@@ -2,3 +2,9 @@ import { userHttp } from './http'
 
 export const loginWithPassword = (username, password) =>
   userHttp.post('/auth/login', { username, password })
+
+export const getOidcAuthorizeUrl = (redirectUri) =>
+  userHttp.get('/auth/oidc/url', { params: { redirect_uri: redirectUri } })
+
+export const exchangeOidcCode = (code, redirectUri) =>
+  userHttp.post('/auth/oidc/exchange', { code, redirect_uri: redirectUri })

src/pages/AuthCallbackPage.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex items-center justify-center min-h-[70vh]">
+    <el-card class="w-full max-w-md shadow-md">
+      <div class="text-center space-y-3">
+        <h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
+        <p class="text-sm text-gray-500">正在處理登入結果...</p>
+        <el-alert
+          v-if="error"
+          :title="error"
+          type="error"
+          show-icon
+          :closable="false"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { exchangeOidcCode } from '@/api/auth'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const error = ref('')
+
+onMounted(async () => {
+  const code = route.query.code
+  const redirect = route.query.redirect || '/me'
+  if (!code || typeof code !== 'string') {
+    error.value = '缺少授權碼，請重新登入'
+    return
+  }
+
+  try {
+    const callbackUrl = `${window.location.origin}/auth/callback?redirect=${encodeURIComponent(redirect)}`
+    const res = await exchangeOidcCode(code, callbackUrl)
+    authStore.setToken(res.data.access_token)
+    await authStore.fetchMe()
+    router.replace(typeof redirect === 'string' ? redirect : '/me')
+  } catch (err) {
+    authStore.logout()
+    const detail = err.response?.data?.detail
+    if (detail === 'authentik_code_exchange_failed') {
+      error.value = '授權碼交換失敗，請重新登入'
+    } else {
+      error.value = '登入失敗，請稍後再試'
+    }
+  }
+})
+</script>

src/pages/LoginPage.vue

@@ -8,82 +8,52 @@
         </div>
       </template>
 
-      <el-form @submit.prevent="handleLogin">
-        <el-form-item label="帳號">
-          <el-input
-            v-model="username"
-            placeholder="請輸入 Authentik username / email"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="密碼">
-          <el-input
-            v-model="password"
-            type="password"
-            placeholder="請輸入密碼"
-            clearable
-            show-password
-          />
-        </el-form-item>
+      <el-alert
+        v-if="error"
+        :title="error"
+        type="error"
+        show-icon
+        :closable="false"
+        class="mb-4"
+      />
 
-        <el-alert
-          v-if="error"
-          :title="error"
-          type="error"
-          show-icon
-          :closable="false"
-          class="mb-4"
-        />
+      <el-button
+        type="primary"
+        class="w-full"
+        :loading="loading"
+        @click="handleOidcLogin"
+      >
+        前往 Authentik 登入
+      </el-button>
 
-        <el-form-item>
-          <el-button
-            type="primary"
-            native-type="submit"
-            class="w-full"
-            :loading="loading"
-            :disabled="!username.trim() || !password.trim()"
-          >
-            登入
-          </el-button>
-        </el-form-item>
-      </el-form>
-
-      <p class="text-xs text-gray-400 text-center mt-2">登入成功後 access token 會存於本機 localStorage</p>
+      <div class="mt-4 text-xs text-gray-400 text-center space-y-1">
+        <p>會跳轉到 Authentik 輸入帳號密碼，成功後自動回來。</p>
+        <p>登入成功後 access token 會存於本機 localStorage。</p>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-import { loginWithPassword } from '@/api/auth'
+import { useRoute } from 'vue-router'
+import { getOidcAuthorizeUrl } from '@/api/auth'
 
-const router = useRouter()
 const route = useRoute()
-const authStore = useAuthStore()
-
-const username = ref('')
-const password = ref('')
 const loading = ref(false)
 const error = ref('')
 
-async function handleLogin() {
-  if (!username.value.trim() || !password.value.trim()) return
+async function handleOidcLogin() {
   loading.value = true
   error.value = ''
   try {
-    const loginRes = await loginWithPassword(username.value.trim(), password.value)
-    authStore.setToken(loginRes.data.access_token)
-    await authStore.fetchMe()
     const redirect = route.query.redirect || '/me'
-    router.push(redirect)
+    const callbackUrl = `${window.location.origin}/auth/callback?redirect=${encodeURIComponent(redirect)}`
+    const res = await getOidcAuthorizeUrl(callbackUrl)
+    window.location.href = res.data.authorize_url
   } catch (err) {
-    authStore.logout()
     const detail = err.response?.data?.detail
-    if (detail === 'invalid_username_or_password') {
-      error.value = '帳號或密碼錯誤'
-    } else if (detail === 'authentik_login_not_configured') {
+    if (detail === 'authentik_login_not_configured') {
       error.value = '後端尚未設定 Authentik 登入參數'
     } else {
       error.value = '登入失敗，請稍後再試'

src/router/index.js

@@ -8,6 +8,11 @@ const routes = [
     name: 'login',
     component: () => import('@/pages/LoginPage.vue')
   },
+  {
+    path: '/auth/callback',
+    name: 'auth-callback',
+    component: () => import('@/pages/AuthCallbackPage.vue')
+  },
   {
     path: '/me',
     name: 'me',