perf: 支持oidc单点登录

packages/ui/certd-client/src/views/framework/login/index.vue

@@ -51,7 +51,7 @@
           {{ t("authentication.loginButton") }}
         </a-button>
 
-        <div v-if="!!settingStore.sysPublic.selfServicePasswordRetrievalEnabled" class="mt-2">
+        <div v-if="!!settingStore.sysPublic.selfServicePasswordRetrievalEnabled && !queryBindCode" class="mt-2">
           <router-link :to="{ name: 'forgotPassword' }">
             {{ t("authentication.forgotPassword") }}
           </router-link>
@@ -61,10 +61,14 @@
       <a-form-item class="user-login-other">
         <div class="flex flex-between justify-between items-center">
           <language-toggle class="color-blue"></language-toggle>
-          <router-link v-if="hasRegisterTypeEnabled()" class="register" :to="{ name: 'register' }">
+          <router-link v-if="hasRegisterTypeEnabled() && !queryBindCode" class="register" :to="{ name: 'register' }">
             {{ t("authentication.registerLink") }}
           </router-link>
         </div>
+
+        <div class="flex flex-between justify-between items-center mt-5">
+          <oauth-footer></oauth-footer>
+        </div>
       </a-form-item>
     </a-form>
     <a-form v-else ref="twoFactorFormRef" class="user-layout-login" :model="twoFactor" v-bind="layout">
@@ -96,12 +100,18 @@ import { useI18n } from "/@/locales";
 import { LanguageToggle } from "/@/vben/layouts";
 import CaptchaInput from "/@/components/captcha/captcha-input.vue";
 import { useRoute } from "vue-router";
+import OauthFooter from "/@/views/framework/oauth/oauth-footer.vue";
+import * as oauthApi from "../oauth/api";
+import { notification } from "ant-design-vue";
 export default defineComponent({
   name: "LoginPage",
-  components: { LanguageToggle, SmsCode, CaptchaInput },
+  components: { LanguageToggle, SmsCode, CaptchaInput, OauthFooter },
   setup() {
     const { t } = useI18n();
     const route = useRoute();
+
+    const queryBindCode = ref(route.query.bindCode as string | undefined);
+
     const urlLoginType = route.query.loginType as string | undefined;
     const verifyCodeInputRef = ref();
     const loading = ref(false);
@@ -160,6 +170,13 @@ export default defineComponent({
       },
     };
 
+    async function afterLoginSuccess() {
+      if (queryBindCode.value) {
+        await oauthApi.BindUser(queryBindCode.value);
+        notification.success({ message: "绑定第三方账号成功" });
+      }
+    }
+
     const twoFactor = reactive({
       loginId: "",
       verifyCode: "",
@@ -167,6 +184,7 @@ export default defineComponent({
 
     const handleTwoFactorSubmit = async () => {
       await userStore.loginByTwoFactor(twoFactor);
+      afterLoginSuccess();
     };
 
     const handleFinish = async () => {
@@ -178,6 +196,7 @@ export default defineComponent({
         // }
         const loginType = formState.loginType;
         await userStore.login(loginType, toRaw(formState));
+        afterLoginSuccess();
       } catch (e: any) {
         //@ts-ignore
         if (e.code === 10020) {
@@ -233,6 +252,7 @@ export default defineComponent({
       settingStore,
       captchaInputRef,
       captchaInputForSmsCode,
+      queryBindCode,
     };
   },
 });

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

@@ -0,0 +1,45 @@
+import { request } from "/src/api/service";
+
+const apiPrefix = "/oauth";
+
+export async function OauthLogin(type: string) {
+  return await request({
+    url: apiPrefix + `/login`,
+    method: "post",
+    data: {
+      type,
+    },
+  });
+}
+
+export async function OauthCallback(type: string, query: Record<string, string>) {
+  return await request({
+    url: apiPrefix + `/callback`,
+    method: "post",
+    data: {
+      type,
+      ...query,
+    },
+  });
+}
+
+export async function AutoRegister(type: string, code: string) {
+  return await request({
+    url: apiPrefix + `/autoRegister`,
+    method: "post",
+    data: {
+      validationCode: code,
+      type,
+    },
+  });
+}
+
+export async function BindUser(code: string) {
+  return await request({
+    url: apiPrefix + `/bind`,
+    method: "post",
+    data: {
+      validationCode: code,
+    },
+  });
+}

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="oauth-callback-page">
+    <div class="oauth-callback-content">
+      <div v-if="!bindRequired" class="oauth-callback-title">
+        <span>登录中...</span>
+      </div>
+      <div v-else class="oauth-callback-title">
+        <div>第三方登录成功，还未绑定账号，请选择</div>
+
+        <div>
+          <a-button class="w-full mt-5" type="primary" @click="goBindUser">绑定已有账号</a-button>
+          <a-button class="w-full mt-5" type="primary" @click="autoRegister">创建新账号</a-button>
+        </div>
+
+        <div class="w-full mt-5">
+          <router-link to="/login" class="w-full mt-5" type="primary">返回登录页</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import * as api from "./api";
+import { useRoute, useRouter } from "vue-router";
+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 userStore = useUserStore();
+
+const bindRequired = ref(false);
+const bindCode = ref("");
+
+async function handleOauthCallback() {
+  //处理第三方登录回调
+  const res = await api.OauthCallback(oauthType, query);
+  if (res.token) {
+    //登录成功
+    userStore.onLoginSuccess(res);
+    //跳转到首页
+    router.replace("/");
+    return;
+  }
+  if (res.bindRequired) {
+    //需要绑定
+    bindRequired.value = true;
+    bindCode.value = res.validationCode;
+  }
+}
+
+onMounted(async () => {
+  await handleOauthCallback();
+});
+
+async function goBindUser() {
+  //绑定已有账号
+  router.replace({
+    path: "/login",
+    query: {
+      bindCode: bindCode.value,
+    },
+  });
+}
+
+async function autoRegister() {
+  //自动注册账号
+  const res = await api.AutoRegister(oauthType, bindCode.value);
+  //登录成功
+  userStore.onLoginSuccess(res);
+  //跳转到首页
+  router.replace("/");
+}
+</script>
+<style lang="less">
+.oauth-callback-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+
+  .oauth-callback-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 16px;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 50px;
+
+    .oauth-callback-title {
+      font-size: 24px;
+      font-weight: 500;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="oauth-footer">
+    <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>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import * as api from "./api";
+
+const oauthList = ref([
+  {
+    name: "OIDC",
+    type: "oidc",
+    icon: "ion:oidc",
+  },
+]);
+
+async function goOauthLogin(type: string) {
+  //获取第三方登录URL
+  const res = await api.OauthLogin(type);
+  const loginUrl = res.loginUrl;
+  window.location.href = loginUrl;
+}
+</script>
+<style lang="less">
+.oauth-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  .oauth-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 100px;
+  }
+}
+</style>