perf: 多重认证登录

This commit is contained in:
xiaojunnuo
2025-04-17 00:06:49 +08:00
parent 8786bae7dc
commit 0f82cf409b
12 changed files with 453 additions and 243 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
import { customAlphabet } from "nanoid";
export const randomNumber = customAlphabet("1234567890", 4);
export const simpleNanoId = customAlphabet("1234567890abcdefghijklmopqrstuvwxyz", 12);
export const simpleNanoId = customAlphabet("1234567890abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMOPQRSTUVWXYZ", 12);
@@ -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>
+2
View File
@@ -97,9 +97,11 @@
"nanoid": "^5.0.7",
"node-forge": "^1.3.1",
"nodemailer": "^6.9.16",
"otplib": "^12.0.1",
"pg": "^8.12.0",
"psl": "^1.9.0",
"qiniu": "^7.12.0",
"qrcode": "^1.5.4",
"qs": "^6.13.1",
"querystring": "^0.2.1",
"reflect-metadata": "^0.2.2",
@@ -0,0 +1,61 @@
import { ALL, Body, Controller, Inject, Post, Provide } from "@midwayjs/core";
import { BaseController, Constants } from "@certd/lib-server";
import { UserSettingsService } from "../../../modules/mine/service/user-settings-service.js";
import { UserTwoFactorSetting } from "../../../modules/mine/service/models.js";
import { merge } from "lodash-es";
import { TwoFactorService } from "../../../modules/mine/service/two-factor-service.js";
/**
*/
@Provide()
@Controller("/api/user/settings/twoFactor")
export class UserTwoFactorSettingController extends BaseController {
@Inject()
service: UserSettingsService;
@Inject()
twoFactorService: TwoFactorService;
@Post("/get", { summary: Constants.per.authOnly })
async get() {
const userId = this.getUserId();
const setting = await this.service.getSetting<UserTwoFactorSetting>(userId, UserTwoFactorSetting);
return this.ok(setting);
}
@Post("/save", { summary: Constants.per.authOnly })
async save(@Body(ALL) bean: any) {
const userId = this.getUserId();
const setting = new UserTwoFactorSetting();
merge(setting, bean);
// 禁用时清除
if(!setting.authenticator.enabled){
setting.authenticator.secret = null;
setting.authenticator.verified = false;
}
await this.service.saveSetting(userId, setting);
return this.ok({});
}
@Post("/authenticator/qrcode", { summary: Constants.per.authOnly })
async authenticatorQrcode() {
const userId = this.getUserId();
const qrcode = await this.twoFactorService.getAuthenticatorQrCode(userId);
return this.ok(qrcode);
}
@Post("/authenticator/save", { summary: Constants.per.authOnly })
async authenticatorSave(@Body(ALL) bean: any) {
const userId = this.getUserId();
await this.twoFactorService.saveAuthenticator({
userId,
verifyCode: bean.verifyCode,
});
return this.ok();
}
}
@@ -1,8 +1,7 @@
import { ALL, Body, Controller, Inject, Post, Provide, Query } from '@midwayjs/core';
import { CrudController } from '@certd/lib-server';
import { Constants } from '@certd/lib-server';
import { UserSettingsService } from '../../../modules/mine/service/user-settings-service.js';
import { UserSettingsEntity } from '../../../modules/mine/entity/user-settings.js';
import { ALL, Body, Controller, Inject, Post, Provide, Query } from "@midwayjs/core";
import { Constants, CrudController } from "@certd/lib-server";
import { UserSettingsService } from "../../../modules/mine/service/user-settings-service.js";
import { UserSettingsEntity } from "../../../modules/mine/entity/user-settings.js";
/**
*/
@@ -66,4 +65,6 @@ export class UserSettingsController extends CrudController<UserSettingsService>
const entity = await this.service.getByKey(key, this.getUserId());
return this.ok(entity);
}
}
@@ -0,0 +1,22 @@
import { BaseSettings } from "@certd/lib-server";
export type TwoFactorAuthenticator = {
enabled: boolean;
secret?: string;
type?: string;
verified?:boolean;
}
export class UserTwoFactorSetting extends BaseSettings {
static __title__ = "用户多重认证设置";
static __key__ = "user.two.factor";
authenticator: TwoFactorAuthenticator = {
enabled:false,
verified:false,
type: "totp"
};
}
@@ -0,0 +1,62 @@
import { Inject, Provide, Scope, ScopeEnum } from "@midwayjs/core";
import { UserSettingsService } from "./user-settings-service.js";
import { UserTwoFactorSetting } from "./models.js";
import { utils } from "@certd/basic";
import { UserService } from "../../sys/authority/service/user-service.js";
/**
* 授权
*/
@Provide()
@Scope(ScopeEnum.Request, { allowDowngrade: true })
export class TwoFactorService {
@Inject()
userSettingsService: UserSettingsService;
@Inject()
userService: UserService;
async getAuthenticatorQrCode(userId: any) {
const setting = await this.userSettingsService.getSetting<UserTwoFactorSetting>(userId, UserTwoFactorSetting);
const authenticator = setting.authenticator;
if (!authenticator.secret) {
authenticator.secret = utils.id.simpleNanoId(16);
await this.userSettingsService.saveSetting(userId, setting);
}
const user = await this.userService.info(userId);
const username = user.username;
const secret = authenticator.secret;
const qrcodeContent = `otpauth://totp/Certd:${username}?secret=${secret}&issuer=Certd`;
//生成qrcode base64
const qrcode = await import("qrcode");
return await qrcode.toDataURL(qrcodeContent);
}
async saveAuthenticator(req: { userId: any; verifyCode: any }) {
const userId = req.userId;
const { authenticator } = await import("otplib");
const tfSetting = await this.userSettingsService.getSetting<UserTwoFactorSetting>(userId, UserTwoFactorSetting);
const setting = tfSetting.authenticator;
if (!setting.secret) {
throw new Error("secret is required");
}
const secret = setting.secret;
const token = req.verifyCode;
const isValid = authenticator.verify({ token, secret });
if (!isValid) {
throw new Error("authenticator 校验错误");
}
//校验成功,保存开启状态
setting.enabled = true;
setting.verified = true;
await this.userSettingsService.saveSetting(userId, setting);
}
}
@@ -1,8 +1,9 @@
import { Provide, Scope, ScopeEnum } from '@midwayjs/core';
import { InjectEntityModel } from '@midwayjs/typeorm';
import { Repository } from 'typeorm';
import { BaseService } from '@certd/lib-server';
import { UserSettingsEntity } from '../entity/user-settings.js';
import { Provide, Scope, ScopeEnum } from "@midwayjs/core";
import { InjectEntityModel } from "@midwayjs/typeorm";
import { Repository } from "typeorm";
import { BaseService, BaseSettings } from "@certd/lib-server";
import { UserSettingsEntity } from "../entity/user-settings.js";
import { merge } from "lodash-es";
/**
* 授权
@@ -27,23 +28,29 @@ export class UserSettingsService extends BaseService<UserSettingsEntity> {
const setting = JSON.parse(entity.setting);
return {
id: entity.id,
...setting,
...setting
};
}
async getByKey(key: string, userId: number): Promise<UserSettingsEntity | null> {
if(!userId){
throw new Error('userId is required');
}
if (!key || !userId) {
return null;
}
return await this.repository.findOne({
where: {
key,
userId,
},
userId
}
});
}
async getSettingByKey(key: string, userId: number): Promise<any | null> {
if(!userId){
throw new Error('userId is required');
}
const entity = await this.getByKey(key, userId);
if (!entity) {
return null;
@@ -55,8 +62,8 @@ export class UserSettingsService extends BaseService<UserSettingsEntity> {
const entity = await this.repository.findOne({
where: {
key: bean.key,
userId: bean.userId,
},
userId: bean.userId
}
});
if (entity) {
entity.setting = bean.setting;
@@ -66,4 +73,39 @@ export class UserSettingsService extends BaseService<UserSettingsEntity> {
await this.repository.save(bean);
}
}
async getSetting<T>( userId: number,type: any): Promise<T> {
if(!userId){
throw new Error('userId is required');
}
const key = type.__key__;
let newSetting: T = new type();
const savedSettings = await this.getSettingByKey(key, userId);
newSetting = merge(newSetting, savedSettings);
return newSetting;
}
async saveSetting<T extends BaseSettings>(userId:number,bean: T) {
if(!userId){
throw new Error('userId is required');
}
const old = await this.getSetting(userId,bean.constructor)
bean = merge(old,bean)
const type: any = bean.constructor;
const key = type.__key__;
const entity = await this.getByKey(key,userId);
const newEntity = new UserSettingsEntity();
if (entity) {
newEntity.id = entity.id;
}else{
newEntity.key = key;
newEntity.title = type.__title__;
newEntity.userId = userId;
}
entity.setting = JSON.stringify(bean);
await this.repository.save(entity);
}
}