LiRuochen_WorkFlow/MaxKey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

timebased otp 优化

Browse Source
This commit is contained in:
shimingxy
2024-08-27 17:33:21 +08:00
parent 60560bf72d
commit a098df18a3
12 changed files with 151 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
maxkey-web-frontend/maxkey-web-app/src/app/entity/TimeBased.ts
View File

@@ -24,7 +24,8 @@ export class TimeBased extends BaseEntity {
digits!: String;
period!: String;
sharedSecret!: String;
formatSharedSecret!: String;
hexSharedSecret!: String;
rqCode!: String;
otp!: string;
qrCode!: String;
otpCode!: string;
}

87
maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.html
View File

@@ -1,99 +1,68 @@
<nz-card>
<form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit()" se-container="1">
<form nz-form [formGroup]="formGroup" se-container="1">
<div nz-row style="width: 100%">
<div nz-col nzFlex="2" style="text-align: center"><img src="{{ form.model.rqCode }}" /></div>
<div nz-col nzFlex="2" style="text-align: center"><img src="{{ form.model.qrCode }}" /></div>
<div nz-col nzFlex="3">
<nz-form-item style="display: none">
<nz-form-label [nzMd]="6" nzFor="id">id</nz-form-label>
<nz-form-control [nzMd]="18" nzErrorTip="The input is not valid id!">
<input [(ngModel)]="form.model.id" [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" value="id" />
<input [(ngModel)]="form.model.id" [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id"
value="id" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="displayName">{{ 'mxk.timebased.displayName' | i18n }}</nz-form-label>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="displayName">{{ 'mxk.timebased.displayName' | i18n
}}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not displayName!">
<input
nz-input
[disabled]="isDisabled"
[(ngModel)]="form.model.displayName"
[ngModelOptions]="{ standalone: true }"
name="displayName"
id="displayName"
value="0"
/>
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.displayName"
[ngModelOptions]="{ standalone: true }" name="displayName" id="displayName" value="0" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">{{ 'mxk.timebased.username' | i18n }}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid username!">
<input
nz-input
[disabled]="isDisabled"
[(ngModel)]="form.model.username"
[ngModelOptions]="{ standalone: true }"
name="username"
id="username"
/>
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.username"
[ngModelOptions]="{ standalone: true }" name="username" id="username" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="digits">{{ 'mxk.timebased.digits' | i18n }}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid digits!">
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.digits" [ngModelOptions]="{ standalone: true }" name="digits" id="digits" />
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.digits"
[ngModelOptions]="{ standalone: true }" name="digits" id="digits" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="period">{{ 'mxk.timebased.period' | i18n }}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid period!">
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.period" [ngModelOptions]="{ standalone: true }" name="period" id="period" />
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.period"
[ngModelOptions]="{ standalone: true }" name="period" id="period" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sharedSecret">{{ 'mxk.timebased.sharedSecret' | i18n }}</nz-form-label>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sharedSecret">{{ 'mxk.timebased.sharedSecret' | i18n
}}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid sharedSecret!">
<input
nz-input
[disabled]="isDisabled"
[(ngModel)]="form.model.sharedSecret"
[ngModelOptions]="{ standalone: true }"
name="sharedSecret"
id="sharedSecret"
/>
<input nz-input [disabled]="isDisabled" [(ngModel)]="form.model.formatSharedSecret"
[ngModelOptions]="{ standalone: true }" name="formatSharedSecret" id="formatSharedSecret" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="hexSharedSecret">{{ 'mxk.timebased.hexSharedSecret' | i18n }}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid hexSharedSecret!">
<input
nz-input
[disabled]="isDisabled"
[(ngModel)]="form.model.hexSharedSecret"
[ngModelOptions]="{ standalone: true }"
name="hexSharedSecret"
id="hexSharedSecret"
/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="one-timePassword">{{ 'mxk.timebased.one-timePassword' | i18n }}</nz-form-label>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="one-timePassword">{{ 'mxk.timebased.one-timePassword' | i18n
}}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid One-Time Password!">
<input
nz-input
[(ngModel)]="form.model.otp"
[ngModelOptions]="{ standalone: true }"
placeholder="请在生成后输入一次性密码用于验证"
name="oneTimePassword"
id="oneTimePassword"
/>
<input nz-input [(ngModel)]="form.model.otpCode" [ngModelOptions]="{ standalone: true }"
placeholder="请在生成后输入一次性密码用于验证" name="oneTimePassword" id="oneTimePassword" />
</nz-form-control>
</nz-form-item>
<nz-form-item style="width: 100%">
<nz-form-control [nzOffset]="7" [nzSpan]="3">
<button nz-button nzType="primary" type="submit" [nzLoading]="form.submitting">{{ 'mxk.text.generate' | i18n }}</button>
</nz-form-control>
<button nz-button nzType="primary" (click)="verify($event,form.model.otp)">{{ 'mxk.text.verify' | i18n }}</button>
<button nz-button nzType="primary" (click)="generate()">{{ 'mxk.text.generate' | i18n }}</button>
<button nz-button nzType="primary" (click)="onSubmit()" [nzLoading]="form.submitting">{{ 'mxk.text.save' |
i18n }}</button>
<button nz-button nzType="primary" (click)="verify($event, form.model.otpCode)">{{ 'mxk.text.verify' | i18n
}}</button>
</nz-form-item>
</div>
</div>
</form>
</nz-card>
</nz-card>

38
maxkey-web-frontend/maxkey-web-app/src/app/routes/config/timebased/timebased.component.ts
View File

@@ -28,16 +28,16 @@ import { Console } from 'console';
@Component({
selector: 'app-timebased',
templateUrl: './timebased.component.html',
styleUrls: ['./timebased.component.less'],
styleUrls: ['./timebased.component.less']
})
export class TimebasedComponent implements OnInit {
form: {
submitting: boolean;
model: TimeBased;
} = {
submitting: false,
model: new TimeBased()
};
submitting: false,
model: new TimeBased()
};
isDisabled = true;
@@ -48,7 +48,7 @@ export class TimebasedComponent implements OnInit {
private timeBasedService: TimeBasedService,
private msg: NzMessageService,
private cdr: ChangeDetectorRef
) {}
) { }
ngOnInit(): void {
/*this.form = this.fb.group({
@@ -62,7 +62,7 @@ export class TimebasedComponent implements OnInit {
public: [1, [Validators.min(1), Validators.max(3)]],
publicUsers: [null, []]
});*/
this.timeBasedService.get('').subscribe(res => {
this.timeBasedService.view('').subscribe(res => {
this.form.model.init(res.data);
this.formatSecret();
this.cdr.detectChanges();
@@ -70,17 +70,31 @@ export class TimebasedComponent implements OnInit {
}
formatSecret(): void {
this.form.model.sharedSecret = concatArrayString(splitString(this.form.model.sharedSecret, 4), ' ');
this.form.model.hexSharedSecret = concatArrayString(splitString(this.form.model.hexSharedSecret, 4), ' ');
this.form.model.formatSharedSecret = concatArrayString(splitString(this.form.model.sharedSecret, 4), ' ');
//this.form.model.hexSharedSecret = concatArrayString(splitString(this.form.model.hexSharedSecret, 4), ' ');
}
generate(): void {
this.form.submitting = true;
this.form.model.trans();
this.timeBasedService.generate('').subscribe(res => {
if (res.code == 0) {
this.form.model.init(res.data);
this.formatSecret();
//this.msg.success(`提交成功`);
} else {
//this.msg.success(`提交失败`);
}
this.form.submitting = false;
this.cdr.detectChanges();
});
}
onSubmit(): void {
this.form.submitting = true;
this.form.model.trans();
//this.form.model.trans();
this.timeBasedService.update(this.form.model).subscribe(res => {
if (res.code == 0) {
this.form.model.init(res.data);
this.formatSecret();
this.msg.success(`提交成功`);
} else {
this.msg.success(`提交失败`);
@@ -98,7 +112,7 @@ export class TimebasedComponent implements OnInit {
} else {
this.msg.error('验证失败');
}
})
});
// this.timeBasedService.verify(otp)
}

16
maxkey-web-frontend/maxkey-web-app/src/app/service/time-based.service.ts
View File

@@ -27,18 +27,22 @@ import { BaseService } from './base.service';
})
export class TimeBasedService extends BaseService<TimeBased> {
constructor(private _httpClient: HttpClient) {
super(_httpClient, '/config');
super(_httpClient, '/config/timebased');
}
override get(id: String): Observable<Message<TimeBased>> {
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/timebased?generate=NO`);
view(id: String): Observable<Message<TimeBased>> {
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/view`);
}
generate(id: String): Observable<Message<TimeBased>> {
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/generate`);
}
override update(body: any): Observable<Message<TimeBased>> {
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/timebased?generate=YES`);
return this.http.put<Message<TimeBased>>(`${this.server.urls.base}/update`, body);
}
verify(otp: string): Observable<Message<TimeBased>>{
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/verify?otp=` + otp);
verify(otp: string): Observable<Message<TimeBased>> {
return this.http.get<Message<TimeBased>>(`${this.server.urls.base}/verify?otpCode=${otp}`);
}
}

2
maxkey-web-frontend/maxkey-web-app/src/assets/i18n/en-US.json
View File

@@ -541,7 +541,7 @@
"username": "username",
"digits": "digits",
"period": "period",
"sharedSecret": "sharedSecret(BASE32)",
"sharedSecret": "sharedSecret",
"hexSharedSecret": "sharedSecret( HEX )",
"rqCode": "RQCode",
"one-timePassword": "One-Time Password"

2
maxkey-web-frontend/maxkey-web-app/src/assets/i18n/zh-CN.json
View File

@@ -527,7 +527,7 @@
"username": "账号",
"digits": "长度",
"period": "周期",
"sharedSecret": "共享密钥(BASE32)",
"sharedSecret": "共享密钥",
"hexSharedSecret": "共享密钥( HEX )",
"rqCode": "二维码",
"one-timePassword": "一次性密码"

2
maxkey-web-frontend/maxkey-web-app/src/assets/i18n/zh-TW.json
View File

@@ -527,7 +527,7 @@
"username": "賬號",
"digits": "長度",
"period": "週期",
"sharedSecret": "共享密鑰(BASE32)",
"sharedSecret": "共享密鑰",
"hexSharedSecret": "共享密鑰( HEX )",
"rqCode": "二維碼",
"one-timePassword": "一次性密碼"