fix(login): switch frontend account login to oidc flow

src/api/auth.js

@@ -1,10 +1,13 @@
 import { userHttp } from './http'
 
-export const loginWithPassword = (username, password) =>
+export const getOidcAuthorizeUrl = (redirectUri, options = {}) =>
-  userHttp.post('/auth/login', { username, password })
+  userHttp.get('/auth/oidc/url', {
-
+    params: {
-export const getOidcAuthorizeUrl = (redirectUri) =>
+      redirect_uri: redirectUri,
-  userHttp.get('/auth/oidc/url', { params: { redirect_uri: redirectUri } })
+      login_hint: options.loginHint || undefined,
+      prompt: options.prompt || undefined
+    }
+  })
 
 export const exchangeOidcCode = (code, redirectUri) =>
   userHttp.post('/auth/oidc/exchange', { code, redirect_uri: redirectUri })

src/pages/LoginPage.vue

@@ -4,7 +4,7 @@
       <template #header>
         <div class="text-center">
           <h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
-          <p class="text-sm text-gray-500 mt-1">可使用帳號密碼或 Google SSO 登入</p>
+          <p class="text-sm text-gray-500 mt-1">可使用帳號登入或 Google SSO 登入</p>
         </div>
       </template>
 
@@ -26,23 +26,13 @@
             @keyup.enter="handlePasswordLogin"
           />
         </el-form-item>
-        <el-form-item label="密碼">
-          <el-input
-            v-model="form.password"
-            type="password"
-            show-password
-            placeholder="請輸入密碼"
-            autocomplete="current-password"
-            @keyup.enter="handlePasswordLogin"
-          />
-        </el-form-item>
         <el-button
           type="primary"
           class="w-full"
           :loading="passwordLoading"
           @click="handlePasswordLogin"
         >
-          帳號密碼登入
+          使用帳號登入
         </el-button>
       </el-form>
 
@@ -58,7 +48,7 @@
       </el-button>
 
       <div class="mt-4 text-xs text-gray-400 text-center space-y-1">
-        <p>Google SSO 會跳轉到 Authentik，完成驗證後自動返回。</p>
+        <p>登入會跳轉到 Authentik 驗證，完成後自動返回。</p>
         <p>登入成功後 access token 會存於本機 localStorage。</p>
       </div>
     </el-card>
@@ -67,20 +57,16 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
-import { getOidcAuthorizeUrl, loginWithPassword } from '@/api/auth'
+import { getOidcAuthorizeUrl } from '@/api/auth'
-import { useAuthStore } from '@/stores/auth'
 
 const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
 
 const passwordLoading = ref(false)
 const oidcLoading = ref(false)
 const error = ref('')
 const form = reactive({
-  username: '',
+  username: ''
-  password: ''
 })
 
 function getPostLoginRedirect() {
@@ -89,31 +75,19 @@ function getPostLoginRedirect() {
 }
 
 async function handlePasswordLogin() {
-  if (!form.username || !form.password) {
+  if (!form.username) {
-    error.value = '請輸入帳號與密碼'
+    error.value = '請輸入帳號'
     return
   }
   passwordLoading.value = true
   error.value = ''
   try {
-    const res = await loginWithPassword(form.username, form.password)
+    await redirectToOidc({
-    const token = res.data?.access_token
+      loginHint: form.username,
-    if (!token) {
+      prompt: 'login'
-      error.value = '登入失敗：缺少 access token'
+    })
-      return
+  } catch (_err) {
-    }
+    error.value = '登入失敗，請稍後再試'
-    authStore.setToken(token)
-    await authStore.fetchMe()
-    router.push(getPostLoginRedirect())
-  } catch (err) {
-    const detail = err.response?.data?.detail
-    if (detail === 'invalid_username_or_password') {
-      error.value = '帳號或密碼錯誤'
-    } else if (detail === 'authentik_login_not_configured') {
-      error.value = '後端尚未設定帳密登入參數'
-    } else {
-      error.value = '登入失敗，請稍後再試'
-    }
   } finally {
     passwordLoading.value = false
   }
@@ -123,25 +97,26 @@ async function handleOidcLogin() {
   oidcLoading.value = true
   error.value = ''
   try {
-    sessionStorage.setItem('post_login_redirect', getPostLoginRedirect())
+    await redirectToOidc({
-    const callbackUrl = `${window.location.origin}/auth/callback`
+      prompt: 'select_account'
-    const res = await getOidcAuthorizeUrl(callbackUrl)
+    })
-    const authorizeUrl = res.data.authorize_url
-    const parsed = new URL(authorizeUrl)
-    const state = parsed.searchParams.get('state')
-    if (state) {
-      sessionStorage.setItem('oidc_expected_state', state)
-    }
-    window.location.href = authorizeUrl
   } catch (err) {
-    const detail = err.response?.data?.detail
+    error.value = err.message || '登入失敗，請稍後再試'
-    if (detail === 'authentik_login_not_configured') {
-      error.value = '後端尚未設定 Authentik 登入參數'
-    } else {
-      error.value = '登入失敗，請稍後再試'
-    }
   } finally {
     oidcLoading.value = false
   }
 }
+
+async function redirectToOidc(options = {}) {
+  sessionStorage.setItem('post_login_redirect', getPostLoginRedirect())
+  const callbackUrl = `${window.location.origin}/auth/callback`
+  const res = await getOidcAuthorizeUrl(callbackUrl, options)
+  const authorizeUrl = res.data.authorize_url
+  const parsed = new URL(authorizeUrl)
+  const state = parsed.searchParams.get('state')
+  if (state) {
+    sessionStorage.setItem('oidc_expected_state', state)
+  }
+  window.location.href = authorizeUrl
+}
 </script>