From 6477bf3649e6552eb5b6442890d421010e98583c Mon Sep 17 00:00:00 2001 From: feng <1304903146@qq.com> Date: Mon, 15 Jun 2026 11:35:34 +0800 Subject: [PATCH] perf: Login asset otp --- .../select-account.component.html | 15 ++ .../select-account.component.scss | 6 + .../select-account.component.ts | 9 ++ src/app/model.ts | 2 + src/app/services/app.ts | 2 + .../acl-dialog/acl-dialog.component.html | 23 ++- .../acl-dialog/acl-dialog.component.scss | 10 ++ .../acl-dialog/acl-dialog.component.ts | 143 +++++++++++++++++- src/app/services/http.ts | 27 +++- src/assets/i18n/en.json | 4 + src/assets/i18n/ja.json | 4 + src/assets/i18n/zh-hans.json | 5 +- src/assets/i18n/zh-hant.json | 4 + 13 files changed, 242 insertions(+), 12 deletions(-) diff --git a/src/app/elements/connect/connect-dialog/select-account/select-account.component.html b/src/app/elements/connect/connect-dialog/select-account/select-account.component.html index 6d6af31c9..844c193a5 100644 --- a/src/app/elements/connect/connect-dialog/select-account/select-account.component.html +++ b/src/app/elements/connect/connect-dialog/select-account/select-account.component.html @@ -75,5 +75,20 @@ + + {{ "OTP Code" | translate }} + + + + diff --git a/src/app/elements/connect/connect-dialog/select-account/select-account.component.scss b/src/app/elements/connect/connect-dialog/select-account/select-account.component.scss index c239e06f0..3e762461b 100644 --- a/src/app/elements/connect/connect-dialog/select-account/select-account.component.scss +++ b/src/app/elements/connect/connect-dialog/select-account/select-account.component.scss @@ -32,6 +32,12 @@ } } +.otp-code { + ::ng-deep .ant-input { + width: 70%; + } +} + .input-field { width: 100%; } diff --git a/src/app/elements/connect/connect-dialog/select-account/select-account.component.ts b/src/app/elements/connect/connect-dialog/select-account/select-account.component.ts index 8d23781bf..873d7843a 100644 --- a/src/app/elements/connect/connect-dialog/select-account/select-account.component.ts +++ b/src/app/elements/connect/connect-dialog/select-account/select-account.component.ts @@ -111,6 +111,12 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy { return this.accountSelected.username === '@INPUT' || this.accountSelected.username === '@USER'; } + get showOTPCodeInput() { + return !!this.accountSelected && + this.accountSelected.username !== '@ANON' && + !!this.accountSelected.has_otp_secret_key; + } + public compareFn = (f1: Account, f2: Account) => { if (!f1 || !f2) return false; return f1.alias === f2.alias && f1.id === f2.id; @@ -298,6 +304,7 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy { if (!this.accountSelected) { return; } + this.manualAuthInfo.otp_code = ''; if (this.accountSelected.has_secret) { return; } @@ -317,6 +324,7 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy { } if (this.localAuthItems && this.localAuthItems.length > 0) { this.manualAuthInfo = Object.assign(this.manualAuthInfo, this.localAuthItems[0]); + this.manualAuthInfo.otp_code = ''; } this.setUsernamePlaceholder(); setTimeout(() => { @@ -342,6 +350,7 @@ export class ElementSelectAccountComponent implements OnInit, OnDestroy { this.filteredOptions = this.localAuthItems.filter(authInfo => { if (authInfo.username.toLowerCase() === filterValue) { this.manualAuthInfo = Object.assign(this.manualAuthInfo, authInfo); + this.manualAuthInfo.otp_code = ''; } return authInfo.username.toLowerCase().includes(filterValue); }); diff --git a/src/app/model.ts b/src/app/model.ts index 738deb362..ddbe17bd2 100644 --- a/src/app/model.ts +++ b/src/app/model.ts @@ -34,6 +34,7 @@ export class Account { name: string; username: string; has_secret: boolean; + has_otp_secret_key: boolean; secret: string; actions: Array; id?: string; @@ -401,6 +402,7 @@ export class AuthInfo { alias: string; username: string; secret: string; + otp_code: string; rememberAuth: boolean; } diff --git a/src/app/services/app.ts b/src/app/services/app.ts index 37ba9aa1e..85b293878 100644 --- a/src/app/services/app.ts +++ b/src/app/services/app.ts @@ -348,6 +348,7 @@ export class AppService { for (const auth of auths) { const newAuth = Object.assign({}, auth); newAuth.secret = this.decrypt(newAuth.secret); + newAuth.otp_code = ''; newAuths.push(newAuth); } return newAuths; @@ -356,6 +357,7 @@ export class AppService { setAccountLocalAuth(asset: Asset, account: Account, auth: AuthInfo) { const assetId = asset.id; const newAuth = Object.assign({ alias: account.alias, username: account.username }, auth); + newAuth.otp_code = ''; // 如果 auth.alias 是 undefined，保持使用 account.alias if (auth.alias === undefined && account.alias !== undefined) { diff --git a/src/app/services/connect-token/acl-dialog/acl-dialog.component.html b/src/app/services/connect-token/acl-dialog/acl-dialog.component.html index 88bf53a5b..51d075c0c 100644 --- a/src/app/services/connect-token/acl-dialog/acl-dialog.component.html +++ b/src/app/services/connect-token/acl-dialog/acl-dialog.component.html @@ -29,6 +29,22 @@
+ + +
+ +
{{ otpCodeError }}
+
+ @@ -47,7 +63,12 @@
- diff --git a/src/app/services/connect-token/acl-dialog/acl-dialog.component.scss b/src/app/services/connect-token/acl-dialog/acl-dialog.component.scss index e113390d3..9bd344435 100644 --- a/src/app/services/connect-token/acl-dialog/acl-dialog.component.scss +++ b/src/app/services/connect-token/acl-dialog/acl-dialog.component.scss @@ -4,6 +4,16 @@ border-radius: 4px; } } + + .otp-code-box { + margin-top: 16px; + } + + .otp-code-error { + color: #ff4d4f; + font-size: 12px; + margin-top: 8px; + } } diff --git a/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts b/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts index 3f505021b..0e58ef468 100644 --- a/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts +++ b/src/app/services/connect-token/acl-dialog/acl-dialog.component.ts @@ -3,7 +3,7 @@ import {I18nService} from '@app/services/i18n'; import {HttpService} from '@app/services/http'; import {FaceService} from '@app/services/face'; import {HttpErrorResponse} from '@angular/common/http'; -import {Component, Inject, OnInit} from '@angular/core'; +import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core'; import {Asset, ConnectData, ConnectionToken} from '@app/model'; import {NzNotificationService} from 'ng-zorro-antd/notification'; import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; @@ -32,12 +32,16 @@ interface DialogContent { styleUrls: ['acl-dialog.component.scss'] }) export class ElementACLDialogComponent implements OnInit { + @ViewChild('otpCodeInput', { static: false }) otpCodeInput: ElementRef; public asset: Asset; public connectInfo: ConnectData; public code: string; public connectionToken: ConnectionToken = null; public error: HttpErrorResponse; public otherError: string; + public otpCode: string = ''; + public otpCodeError: string = ''; + public otpCodeSubmitting = false; public ticketAssignees: string = '-'; // Token 的行为，创建或者兑换 Token, create, exchange public tokenAction: string = 'create'; @@ -82,15 +86,43 @@ export class ElementACLDialogComponent implements OnInit { } ngOnInit() { - // 创建 Token 的时候，需要传入 Asset 和 ConnectInfo - this.content = this.getDialogContent(this.data.code); this.asset = this.data.asset; this.connectInfo = this.data.connectInfo; - this.code = this.data.code; + this.error = this.data.error; // 兑换 Token 的时候，需要传入 Token ID this.tokenID = this.data.tokenID; // 控制 token 的行为, 创建还是兑换 this.tokenAction = this.data.tokenAction; + this.code = this.resolveDialogCode(this.data.code, this.error); + this.content = this.getDialogContent(this.code); + if (this.code === 'otp_code_verify') { + this.focusOTPCodeInput(); + } + } + + onOTPCodeInput() { + this.otpCodeError = ''; + } + + onConfirmOTPCode() { + const otpCode = (this.otpCode || '').trim(); + if (!otpCode) { + this.otpCodeError = this._i18n.instant('Please input OTP code'); + this.focusOTPCodeInput(); + return; + } + this.otpCodeError = ''; + this.otpCodeSubmitting = true; + this.requestTokenWithOTPCode(otpCode).subscribe( + (connToken: ConnectionToken) => { + this.otpCodeSubmitting = false; + this.dialogRef.close(connToken); + }, + (error: HttpErrorResponse) => { + this.otpCodeSubmitting = false; + this.applyDialogError(error, true); + } + ); } async onCopySuccess(evt) { @@ -272,6 +304,91 @@ export class ElementACLDialogComponent implements OnInit { this.dialogRef.close(null); } + private requestTokenWithOTPCode(otpCode: string) { + if (this.tokenAction === 'exchange') { + return this._http.exchangeConnectToken(this.tokenID, false, false, undefined, otpCode); + } + if (this.data.connectData && this.data.connectData.direct) { + return this._http.adminConnectToken( + this.asset, + this.data.connectData, + false, + false, + undefined, + otpCode + ); + } + return this._http.createConnectToken(this.asset, this.connectInfo, false, false, undefined, otpCode); + } + + private resolveDialogCode(code: string, error?: HttpErrorResponse): string { + if (this.hasOTPCodeError(error)) { + return 'otp_code_verify'; + } + return code || 'other'; + } + + private hasOTPCodeError(error?: HttpErrorResponse): boolean { + return !!(error && error.error && typeof error.error === 'object' && error.error.otp_code); + } + + private getFieldErrorMessage(error: HttpErrorResponse, field: string): string { + if (!error || !error.error || typeof error.error !== 'object') { + return ''; + } + const value = error.error[field]; + if (Array.isArray(value)) { + return value.join(' '); + } + return value || ''; + } + + private getOtherErrorMessage(error: HttpErrorResponse): string { + if (!error) { + return ''; + } + let value: any = error.error; + if (!value) { + return error.message; + } + if (typeof value === 'string') { + return value; + } + if (Array.isArray(value)) { + return value.join(' '); + } + if (value.detail) { + return value.detail; + } + return JSON.stringify(value); + } + + private applyDialogError(error: HttpErrorResponse, keepOTPCode = false) { + this.error = error; + this.data.error = error; + this.code = this.resolveDialogCode(error?.error?.code, error); + if (this.code === 'otp_code_verify') { + this.otpCodeError = this.getFieldErrorMessage(error, 'otp_code'); + if (!keepOTPCode) { + this.otpCode = ''; + } + this.content = this.getDialogContent(this.code); + this.focusOTPCodeInput(); + return; + } + this.otpCodeError = ''; + this.otherError = this.getOtherErrorMessage(error); + this.content = this.getDialogContent(this.code); + } + + private focusOTPCodeInput() { + setTimeout(() => { + if (this.otpCodeInput && this.otpCodeInput.nativeElement) { + this.otpCodeInput.nativeElement.focus(); + } + }, 0); + } + checkTicket() { const checkMethod = this.connectionToken.from_ticket_info.check_ticket_api.method.toLowerCase(); const checkURL = this.connectionToken.from_ticket_info.check_ticket_api.url; @@ -343,6 +460,24 @@ export class ElementACLDialogComponent implements OnInit { } ] }, + otp_code_verify: { + title: 'OTP verification', + message: 'This account requires OTP code. Please input it to continue.', + customContent: { + type: 'otp_code' + }, + actions: [ + { + text: 'Cancel', + callback: () => vm.closeDialog() + }, + { + text: 'Confirm', + type: 'primary', + callback: () => vm.onConfirmOTPCode() + } + ] + }, acl_face_online: { title: 'Login reminder', message: 'Face online required', diff --git a/src/app/services/http.ts b/src/app/services/http.ts index 2167a88dd..8beacc14f 100644 --- a/src/app/services/http.ts +++ b/src/app/services/http.ts @@ -303,7 +303,8 @@ export class HttpService { connectData: ConnectData, createTicket = false, face_verify = false, - face_monitor_token?: string + face_monitor_token?: string, + otpCode?: string ) { let params = createTicket ? '?create_ticket=1' : ''; params += face_verify ? '?face_verify=1' : ''; @@ -313,8 +314,9 @@ export class HttpService { const isVirtual = account.username.startsWith('@'); const username = isVirtual ? manualAuthInfo.username : account.username; const secret = encryptPassword(manualAuthInfo.secret); + const encryptedOTPCode = encryptPassword((otpCode || manualAuthInfo.otp_code || '').trim()); const connectOption = connectData.connectOption; - const data = { + const data: any = { asset: asset.id, account: account.alias, // 主要是有特殊账号，匿名、虚拟 protocol: protocol.name, @@ -323,6 +325,9 @@ export class HttpService { connect_method: connectMethod.value, connect_options: connectOption }; + if (encryptedOTPCode) { + data.otp_code = encryptedOTPCode; + } return this.post(url, data).pipe( catchError(this.handleConnectMethodExpiredError.bind(this)) ); @@ -338,7 +343,8 @@ export class HttpService { connectData: AdminConnectData, createTicket = false, face_verify = false, - face_monitor_token?: string + face_monitor_token?: string, + otpCode?: string ) { let params = ''; params += createTicket ? '?create_ticket=1' : ''; @@ -347,7 +353,8 @@ export class HttpService { const url = '/api/v1/authentication/admin-connection-token/' + params; const { account, protocol } = connectData; const connectOption = connectData.connectOption || {}; - const data = { + const encryptedOTPCode = encryptPassword((otpCode || connectData.manualAuthInfo?.otp_code || '').trim()); + const data: any = { asset: asset.id, account: account.id, protocol: protocol.name, @@ -355,6 +362,9 @@ export class HttpService { connect_method: connectData.method || connectData.connectMethod.value, connect_options: connectOption }; + if (encryptedOTPCode) { + data.otp_code = encryptedOTPCode; + } return this.post(url, data).pipe( catchError(this.handleConnectMethodExpiredError.bind(this)) ); @@ -364,13 +374,18 @@ export class HttpService { tokenID: string, createTicket = false, face_verify = false, - face_monitor_token?: string + face_monitor_token?: string, + otpCode?: string ) { let params = createTicket ? '?create_ticket=1' : ''; params += face_verify ? '?face_verify=1' : ''; params += face_monitor_token ? `&face_monitor_token=${face_monitor_token}` : ''; const url = '/api/v1/authentication/connection-token/exchange/' + params; - const data = { id: tokenID }; + const encryptedOTPCode = encryptPassword((otpCode || '').trim()); + const data: any = { id: tokenID }; + if (encryptedOTPCode) { + data.otp_code = encryptedOTPCode; + } return this.post(url, data); } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 2c63c0851..40ec496ea 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -1,2 +1,6 @@ { + "OTP Code": "OTP Code", + "OTP verification": "OTP verification", + "This account requires OTP code. Please input it to continue.": "This account requires OTP code. Please input it to continue.", + "Please input OTP code": "Please input OTP code" } diff --git a/src/assets/i18n/ja.json b/src/assets/i18n/ja.json index 2c63c0851..40ec496ea 100644 --- a/src/assets/i18n/ja.json +++ b/src/assets/i18n/ja.json @@ -1,2 +1,6 @@ { + "OTP Code": "OTP Code", + "OTP verification": "OTP verification", + "This account requires OTP code. Please input it to continue.": "This account requires OTP code. Please input it to continue.", + "Please input OTP code": "Please input OTP code" } diff --git a/src/assets/i18n/zh-hans.json b/src/assets/i18n/zh-hans.json index bfd870e45..ec30fd997 100644 --- a/src/assets/i18n/zh-hans.json +++ b/src/assets/i18n/zh-hans.json @@ -1,3 +1,6 @@ { + "OTP Code": "OTP 验证码", + "OTP verification": "OTP 验证", + "This account requires OTP code. Please input it to continue.": "该账号需要 OTP 验证码，请输入后继续。", + "Please input OTP code": "请输入 OTP 验证码" } - diff --git a/src/assets/i18n/zh-hant.json b/src/assets/i18n/zh-hant.json index 2c63c0851..ecdf61677 100644 --- a/src/assets/i18n/zh-hant.json +++ b/src/assets/i18n/zh-hant.json @@ -1,2 +1,6 @@ { + "OTP Code": "OTP 驗證碼", + "OTP verification": "OTP 驗證", + "This account requires OTP code. Please input it to continue.": "該賬號需要 OTP 驗證碼，請輸入後繼續。", + "Please input OTP code": "請輸入 OTP 驗證碼" }