chore: 优化oidc登录

packages/ui/certd-client/src/views/framework/oauth/api.ts

@@ -12,13 +12,13 @@ export async function OauthLogin(type: string) {
   });
 }
 
-export async function OauthCallback(type: string, query: Record<string, string>) {
+export async function OauthToken(type: string, validationCode: string) {
   return await request({
-    url: apiPrefix + `/callback`,
+    url: apiPrefix + `/token`,
     method: "post",
     data: {
       type,
-      ...query,
+      validationCode,
     },
   });
 }
@@ -43,3 +43,10 @@ export async function BindUser(code: string) {
     },
   });
 }
+
+export async function GetOauthProviders() {
+  return await request({
+    url: apiPrefix + "/providers",
+    method: "post",
+  });
+}

packages/ui/certd-client/src/views/framework/oauth/oauth-callback.vue

@@ -2,7 +2,8 @@
   <div class="oauth-callback-page">
     <div class="oauth-callback-content">
       <div v-if="!bindRequired" class="oauth-callback-title">
-        <span>登录中...</span>
+        <span v-if="!error">登录中...</span>
+        <span v-else>{{ error }}</span>
       </div>
       <div v-else class="oauth-callback-title">
         <div>第三方登录成功，还未绑定账号，请选择</div>
@@ -29,17 +30,16 @@ import { useUserStore } from "/@/store/user";
 const route = useRoute();
 const router = useRouter();
 const oauthType = route.params.type as string;
-
-const query = route.query as Record<string, string>;
-
+const validationCode = route.query.validationCode as string;
+const error = ref(route.query.error as string);
 const userStore = useUserStore();
 
 const bindRequired = ref(false);
 const bindCode = ref("");
 
-async function handleOauthCallback() {
+async function handleOauthToken() {
   //处理第三方登录回调
-  const res = await api.OauthCallback(oauthType, query);
+  const res = await api.OauthToken(oauthType, validationCode);
   if (res.token) {
     //登录成功
     userStore.onLoginSuccess(res);
@@ -55,7 +55,10 @@ async function handleOauthCallback() {
 }
 
 onMounted(async () => {
-  await handleOauthCallback();
+  if (error.value) {
+    return;
+  }
+  await handleOauthToken();
 });
 
 async function goBindUser() {
@@ -95,6 +98,7 @@ async function autoRegister() {
     width: 500px;
     margin: 0 auto;
     margin-top: 50px;
+    margin-bottom: 100px;
 
     .oauth-callback-title {
       font-size: 24px;

packages/ui/certd-client/src/views/framework/oauth/oauth-footer.vue

@@ -1,24 +1,25 @@
 <template>
-  <div class="oauth-footer">
+  <div class="oauth-footer relative">
+    <div class="oauth-title">
+      <div class="oauth-title-text">其他方式登录</div>
+    </div>
     <div v-for="item in oauthList" :key="item.type">
-      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.type)">
-        <el-icon :icon="item.icon" />
-        <span>{{ item.name }}</span>
+      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.name)">
+        <div><fs-icon :icon="item.icon" class="text-blue-600 text-40" /></div>
+        <div>{{ item.title }}</div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import * as api from "./api";
 
-const oauthList = ref([
-  {
-    name: "OIDC",
-    type: "oidc",
-    icon: "ion:oidc",
-  },
-]);
+const oauthList = ref([]);
+
+onMounted(async () => {
+  oauthList.value = await api.GetOauthProviders();
+});
 
 async function goOauthLogin(type: string) {
   //获取第三方登录URL
@@ -29,17 +30,56 @@ async function goOauthLogin(type: string) {
 </script>
 <style lang="less">
 .oauth-footer {
+  width: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
+
+  .oauth-title {
+    width: 100%;
+    font-size: 14px;
+    font-weight: 500;
+    color: #8c8c8c;
+    position: relative;
+    .oauth-title-text {
+      position: relative;
+      z-index: 1;
+      text-align: center;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 36%;
+        height: 0.5px;
+        background-color: #8c8c8c;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 36%;
+        height: 0.5px;
+        background-color: #8c8c8c;
+      }
+    }
+  }
+
   .oauth-icon-button {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 8px;
-    padding: 8px 16px;
+    padding: 8px 8px;
     border-radius: 100px;
+    .fs-icon {
+      font-size: 36px;
+      color: #006be6 !important;
+    }
   }
 }
 </style>