添加sso

2026-08-03 15:57:40 +08:00
parent fb812268d7
commit 6bee29a351
16 changed files with 917 additions and 5 deletions
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import http, { apiErrorMessage } from '../api/http'
+import { useAuthStore } from '../stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const loading = ref(false)
+const checking = ref(true)
+const binding = reactive({
+  providerDisplayName: '学校统一身份认证',
+  externalUserName: '',
+})
+const form = reactive({ userName: '', password: '' })
+
+function safeRedirect(value: unknown) {
+  const path = String(value ?? '')
+  return path.startsWith('/') && !path.startsWith('//') ? path : '/dashboard'
+}
+
+async function submit() {
+  if (!form.userName.trim() || !form.password) {
+    ElMessage.warning('请填写现有教务系统账号和密码。')
+    return
+  }
+
+  loading.value = true
+  try {
+    await auth.bindSso(String(route.query.code ?? ''), form.userName, form.password)
+    ElMessage.success('账户绑定成功。')
+    await router.replace(safeRedirect(route.query.redirect))
+  } catch (error) {
+    ElMessage.error(apiErrorMessage(error))
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  const code = String(route.query.code ?? '')
+  if (!code) {
+    await router.replace({ name: 'login', query: { ssoError: 'authentication_failed' } })
+    return
+  }
+
+  try {
+    const { data } = await http.get('/auth/sso/binding', { params: { code } })
+    binding.providerDisplayName = String(data.providerDisplayName || binding.providerDisplayName)
+    binding.externalUserName = String(data.externalUserName || '')
+  } catch (error) {
+    ElMessage.error(apiErrorMessage(error))
+    await router.replace({ name: 'login', query: { ssoError: 'binding_expired' } })
+  } finally {
+    checking.value = false
+  }
+})
+</script>
+
+<template>
+  <main class="sso-binding-page">
+    <section v-loading="checking" class="sso-binding-card">
+      <div class="brand-mark" aria-hidden="true">
+        <span v-for="index in 9" :key="index" />
+      </div>
+      <span class="eyebrow">首次使用统一身份认证</span>
+      <h1>绑定现有教务系统账号</h1>
+      <p class="binding-description">
+        已通过{{ binding.providerDisplayName }}验证
+        <strong v-if="binding.externalUserName">{{ binding.externalUserName }}</strong>。
+        请输入一次现有教务系统账号和密码，今后即可直接使用单点登录。
+      </p>
+
+      <form @submit.prevent="submit">
+        <label>
+          <span>教务系统账号</span>
+          <el-input v-model="form.userName" size="large" autocomplete="username" />
+        </label>
+        <label>
+          <span>教务系统密码</span>
+          <el-input
+            v-model="form.password"
+            size="large"
+            type="password"
+            show-password
+            autocomplete="current-password"
+            @keyup.enter="submit"
+          />
+        </label>
+        <el-button
+          class="binding-submit"
+          type="primary"
+          size="large"
+          native-type="submit"
+          :loading="loading"
+          :disabled="checking"
+        >
+          确认绑定并登录
+        </el-button>
+      </form>
+
+      <p class="binding-security-note">
+        绑定只建立登录关联，不会修改您的角色、学院或人员档案。
+      </p>
+      <router-link to="/login">取消并返回登录页</router-link>
+    </section>
+  </main>
+</template>