perf: 多重认证登录

2026-04-24 04:17:25 +08:00 · 2025-04-17 00:06:49 +08:00
parent 8786bae7dc
commit 0f82cf409b
12 changed files with 453 additions and 243 deletions
@@ -1,26 +0,0 @@
-// @ts-ignore
-import { request } from "/@/api/service";
-const apiPrefix = "/user/settings";
-export type UserSettings = {
-  defaultNotification?: number;
-  defaultCron?: string;
-};
-
-export async function UserSettingsGet() {
-  const res = await request({
-    url: apiPrefix + "/getDefault",
-    method: "post",
-  });
-  if (!res) {
-    return {};
-  }
-  return res;
-}
-
-export async function UserSettingsSave(setting: any) {
-  return await request({
-    url: apiPrefix + "/saveDefault",
-    method: "post",
-    data: setting,
-  });
-}
@@ -1,74 +0,0 @@
-<template>
-  <fs-page class="page-user-settings">
-    <template #header>
-      <div class="title">设置</div>
-    </template>
-    <div class="user-settings-form settings-form">
-      <a-form
-        :model="formState"
-        name="basic"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        autocomplete="off"
-        @finish="onFinish"
-        @finish-failed="onFinishFailed"
-      >
-        <a-form-item label="默认定时设置" name="defaultCron">
-          <notification-selector v-model="formState.defaultCron" />
-          <div class="helper">创建流水线时默认使用此定时时间</div>
-        </a-form-item>
-
-        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
-  </fs-page>
-</template>
-
-<script setup lang="tsx">
-import { reactive, ref } from "vue";
-import * as api from "./api";
-import { UserSettings } from "./api";
-import { notification } from "ant-design-vue";
-import { merge } from "lodash-es";
-import NotificationSelector from "/@/views/certd/notification/notification-selector/index.vue";
-
-defineOptions({
-  name: "UserSettings"
-});
-
-const formState = reactive<Partial<UserSettings>>({});
-
-async function loadUserSettings() {
-  const data: any = await api.UserSettingsGet();
-  merge(formState, data);
-}
-
-const saveLoading = ref(false);
-loadUserSettings();
-const onFinish = async (form: any) => {
-  try {
-    saveLoading.value = true;
-    await api.UserSettingsSave(form);
-    notification.success({
-      message: "保存成功"
-    });
-  } finally {
-    saveLoading.value = false;
-  }
-};
-
-const onFinishFailed = (errorInfo: any) => {
-  // console.log("Failed:", errorInfo);
-};
-</script>
-
-<style lang="less">
-.page-user-settings {
-  .user-settings-form {
-    width: 500px;
-    margin: 20px;
-  }
-}
-</style>
@@ -0,0 +1,40 @@
+// @ts-ignore
+import { request } from "/@/api/service";
+const apiPrefix = "/user/settings";
+export type UserTwoFactorSetting = {
+  authenticator: {
+    enabled: boolean;
+    verified: boolean;
+  };
+};
+
+export type AuthenticatorSaveReq = {
+  verifyCode?: string;
+};
+
+export async function TwoFactorSettingsGet() {
+  const res = await request({
+    url: apiPrefix + "/twoFactor/get",
+    method: "post",
+  });
+  if (!res) {
+    return {};
+  }
+  return res as UserTwoFactorSetting;
+}
+
+export async function TwoFactorAuthenticatorGet() {
+  const res = await request({
+    url: apiPrefix + "/twoFactor/authenticator/qrcode",
+    method: "post",
+  });
+  return res as string; //base64
+}
+
+export async function TwoFactorAuthenticatorSave(req: AuthenticatorSaveReq) {
+  return await request({
+    url: apiPrefix + "/twoFactor/authenticator/save",
+    method: "post",
+    data: req,
+  });
+}
@@ -0,0 +1,99 @@
+<template>
+  <fs-page class="page-user-settings page-two-factor">
+    <template #header>
+      <div class="title">多重认证设置</div>
+    </template>
+    <div class="user-settings-form settings-form">
+      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
+        <a-form-item label="Authenticator APP认证" :name="['authenticator', 'enabled']">
+          <div class="flex">
+            <a-switch v-model:checked="formState.authenticator.enabled" />
+
+            <a-button v-if="formState.authenticator.enabled && formState.authenticator.verified" class="ml-1" type="primary" @click="authenticatorForm.open = true">修改</a-button>
+          </div>
+
+          <div class="helper">创建流水线时默认使用此定时时间</div>
+        </a-form-item>
+        <div v-if="authenticatorOpenRef" class="authenticator-config">
+          <h3>1. 安装任意一款 Authenticator APP</h3>
+          <div>比如：Microsoft Authenticator / Google Authenticator / Authy / Synology Secure SignIn 等</div>
+          <h3>2. 扫描二维码添加账号</h3>
+          <div v-if="authenticatorForm.qrcodeSrc" class="qrcode">
+            <img style="width: 400px; height: 400px" :src="authenticatorForm.qrcodeSrc" />
+          </div>
+          <h3>3. 输入验证码</h3>
+          <div>
+            <a-input v-model:value="authenticatorForm.verifyCode" placeholder="请输入验证码" />
+          </div>
+          <div>
+            <loading-button type="primary" html-type="button" :click="doAuthenticatorSave">确认</loading-button>
+            <a-button class="ml-1" @click="authenticatorForm.open = false">取消</a-button>
+          </div>
+        </div>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script setup lang="tsx">
+import { computed, reactive, watch } from "vue";
+import * as api from "./api";
+import { UserTwoFactorSetting } from "./api";
+import { notification } from "ant-design-vue";
+import { merge } from "lodash-es";
+
+defineOptions({
+  name: "UserSettingsTwoFactor",
+});
+
+const formState = reactive<Partial<UserTwoFactorSetting>>({});
+
+const authenticatorForm = reactive({
+  qrcodeSrc: "",
+  verifyCode: "",
+  open: false,
+});
+
+const authenticatorOpenRef = computed(() => {
+  return formState.authenticator.enabled && (authenticatorForm.open || !formState.authenticator.verified);
+});
+watch(
+  () => {
+    return authenticatorOpenRef.value;
+  },
+  async open => {
+    if (open) {
+      const data = await api.TwoFactorAuthenticatorGet();
+      //base64 转图片
+      authenticatorForm.qrcodeSrc = `data:image/png;base64,${data}`;
+    } else {
+      authenticatorForm.qrcodeSrc = "";
+      authenticatorForm.verifyCode = "";
+    }
+  }
+);
+
+async function loadUserSettings() {
+  const data: any = await api.TwoFactorSettingsGet();
+  merge(formState, data);
+}
+
+loadUserSettings();
+const doAuthenticatorSave = async (form: any) => {
+  await api.TwoFactorAuthenticatorSave({
+    verifyCode: authenticatorForm.verifyCode,
+  });
+  notification.success({
+    message: "保存成功",
+  });
+};
+</script>
+
+<style lang="less">
+.page-user-settings {
+  .user-settings-form {
+    width: 500px;
+    margin: 20px;
+  }
+}
+</style>