Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-28 16:16:50 +01:00
Code Issues Projects Releases Wiki Activity

[PM-4612] [PM-6218] [PM-6219] Enable Duo redirect on Desktop Client ()

Browse Source 
* enable duo for desktop

* added missing return path in main.ts

* updated logic in component

* removed switch added await; updated logic in main.

* addressed subscription concerns in main; updated formatting in 2fa component

* Update Duo case in locales
This commit is contained in:
Ike 2024-02-14 09:06:04 -08:00 committed by GitHub
parent 1ff7bdd014
commit e5d4d4ad00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 234 additions and 160 deletions

6
apps/browser/src/_locales/en/messages.json
View File

@ -2696,10 +2696,10 @@
}
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch DUO and follow the steps to finish logging in."
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredByOrgForAccount": {
"message": "DUO two-step login is required for your account."
"message": "Duo two-step login is required for your account."
},
"openExtensionInNewWindowToCompleteLogin": {
"message": "Open the extension in a new window to complete login"
@ -2708,7 +2708,7 @@
"message": "Popout extension"
},
"launchDuo": {
"message": "Launch DUO"
"message": "Launch Duo"
},
"importFormatError": {
"message": "Data is not formatted correctly. Please check your import file and try again."

325
apps/desktop/src/auth/two-factor.component.html
View File

@ -1,157 +1,186 @@
<form
id="two-factor-page"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
attr.aria-hidden="{{ showingModal }}"
>
<div id="content" class="content">
<h1>{{ title }}</h1>
<p *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</p>
<p *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</p>
<div
class="box last"
*ngIf="
selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator
"
>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{ "verificationCode" | i18n }}</label>
<div class="page-top-padding">
<form
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
class="container"
autocomplete="off"
id="two-factor-page"
attr.aria-hidden="{{ showingModal }}"
>
<div id="content" class="content tw-mt-5">
<img class="logo-image" alt="Bitwarden" />
<p class="lead text-center mb-4">{{ title }}</p>
<!-- Providers -->
<div class="box last">
<!-- Authenticator / Email TOTP -->
<ng-container
*ngIf="
selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator
"
>
<p *ngIf="selectedProviderType === providerType.Authenticator">
{{ "enterVerificationCodeApp" | i18n }}
</p>
<p *ngIf="selectedProviderType === providerType.Email">
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
</p>
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
</div>
<small class="form-text" *ngIf="selectedProviderType === providerType.Email">
<a
href="#"
appStopClick
(click)="sendEmail(true)"
[appApiAction]="emailPromise"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
</a>
</small>
</ng-container>
<!-- Yubikey -->
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p>{{ "insertYubiKey" | i18n }}</p>
<picture>
<source srcset="images/yubikey.avif" type="image/avif" />
<source srcset="images/yubikey.webp" type="image/webp" />
<img src="images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
</picture>
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
</div>
</div>
</ng-container>
<!-- WebAuthn -->
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
<div class="tw-flex tw-justify-center">
<div id="web-authn-frame">
<iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
</div>
</ng-container>
<!-- Duo -->
<ng-container *ngIf="isDuoProvider">
<ng-container *ngIf="duoFrameless">
<div>
<span *ngIf="selectedProviderType === providerType.OrganizationDuo" class="tw-mb-0">
{{ "duoRequiredByOrgForAccount" | i18n }}
</span>
{{ "launchDuoAndFollowStepsToFinishLoggingIn" | i18n }}
</div>
</ng-container>
<ng-container id="duo-frame" *ngIf="!duoFrameless">
<iframe
id="duo_iframe"
sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
></iframe>
</ng-container>
</ng-container>
</div>
<div class="box last" *ngIf="selectedProviderType == null">
<div class="box-content">
<div class="box-content-row">
<p>{{ "noTwoStepProviders" | i18n }}</p>
<p>{{ "noTwoStepProviders2" | i18n }}</p>
</div>
</div>
</div>
<div class="box last" [hidden]="!showCaptcha()">
<div class="box-content">
<div class="box-content-row">
<iframe
id="hcaptcha_iframe"
height="80"
sandbox="allow-scripts allow-same-origin"
></iframe>
<button class="btn block" type="button" routerLink="/accessibility-cookie">
<i class="bwi bwi-universal-access" aria-hidden="true"></i>
{{ "loadAccessibilityCookie" | i18n }}
</button>
</div>
</div>
</div>
<!-- Remember me -->
<div class="checkbox tw-mb-2">
<label for="remember" class="flex align-items-center flex-fill">
<input
id="code"
type="text"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
id="remember"
type="checkbox"
name="Remember"
class="tw-mr-2"
[(ngModel)]="remember"
/>
{{ "rememberMe" | i18n }}
</label>
</div>
<!-- Submit Buttons -->
<div class="buttons with-rows">
<div
class="buttons-row"
*ngIf="duoFrameless && selectedProviderType != null && isDuoProvider"
>
<button
(click)="launchDuoFrameless()"
type="button"
class="btn primary block"
[disabled]="form.loading"
>
<b> {{ "launchDuo" | i18n }} </b>
</button>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
<div class="buttons-row" *ngIf="selectedProviderType != null && !isDuoProvider">
<button type="submit" class="btn primary block" [disabled]="form.loading">
<span [hidden]="form.loading"
><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p>{{ "insertYubiKey" | i18n }}</p>
<img src="../../images/yubikey.jpg" alt="" />
<div class="box last">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input
id="code"
type="password"
name="Code"
[(ngModel)]="token"
required
appAutofocus
appInputVerbatim
/>
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
<div id="web-authn-frame">
<iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<ng-container
*ngIf="
selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo
"
>
<div id="duo-frame">
<iframe
id="duo_iframe"
sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
></iframe>
</div>
<div class="box last">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{ "rememberMe" | i18n }}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" />
</div>
</div>
</div>
</ng-container>
<div class="box last" *ngIf="selectedProviderType == null">
<div class="box-content">
<div class="box-content-row">
<p>{{ "noTwoStepProviders" | i18n }}</p>
<p>{{ "noTwoStepProviders2" | i18n }}</p>
</div>
</div>
</div>
<div class="box last" [hidden]="!showCaptcha()">
<div class="box-content">
<div class="box-content-row">
<iframe
id="hcaptcha_iframe"
height="80"
sandbox="allow-scripts allow-same-origin"
></iframe>
<button class="btn block" type="button" routerLink="/accessibility-cookie">
<i class="bwi bwi-universal-access" aria-hidden="true"></i>
{{ "loadAccessibilityCookie" | i18n }}
<div class="buttons-row">
<button type="button" routerLink="/login" class="btn block">
{{ "cancel" | i18n }}
</button>
</div>
</div>
<div class="sub-options">
<button type="button" class="text text-primary" appStopClick (click)="anotherMethod()">
<b>{{ "useAnotherTwoStepMethod" | i18n }}</b>
</button>
</div>
</div>
<div class="buttons">
<button
type="submit"
class="btn primary block"
[disabled]="form.loading"
*ngIf="
selectedProviderType != null &&
selectedProviderType !== providerType.Duo &&
selectedProviderType !== providerType.OrganizationDuo
"
>
<span [hidden]="form.loading"
><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}</span
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
</div>
<div class="sub-options">
<button type="button" appStopClick (click)="anotherMethod()">
{{ "useAnotherTwoStepMethod" | i18n }}
</button>
<button
type="button"
appStopClick
(click)="sendEmail(true)"
[appApiAction]="emailPromise"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
</button>
</div>
</div>
</form>
</form>
</div>
<ng-template #twoFactorOptions></ng-template>

29
apps/desktop/src/auth/two-factor.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
import { Component, Inject, NgZone, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
@ -11,6 +11,7 @@ import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@ -21,6 +22,8 @@ import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.serv
import { TwoFactorOptionsComponent } from "./two-factor-options.component";
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
@ -31,6 +34,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
twoFactorOptionsModal: ViewContainerRef;
showingModal = false;
duoCallbackSubscriptionEnabled: boolean = false;
constructor(
loginStrategyService: LoginStrategyServiceAbstraction,
@ -40,8 +44,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
platformUtilsService: PlatformUtilsService,
syncService: SyncService,
environmentService: EnvironmentService,
private broadcasterService: BroadcasterService,
private modalService: ModalService,
stateService: StateService,
private ngZone: NgZone,
route: ActivatedRoute,
logService: LogService,
twoFactorService: TwoFactorService,
@ -115,4 +121,25 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
content.setAttribute("style", "width:335px");
}
}
protected override setupDuoResultListener() {
if (!this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
await this.ngZone.run(async () => {
if (message.command === "duoCallback") {
this.token = message.code;
await this.submit();
}
});
});
this.duoCallbackSubscriptionEnabled = true;
}
}
ngOnDestroy(): void {
if (this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
this.duoCallbackSubscriptionEnabled = false;
}
}
}

BIN
apps/desktop/src/images/yubikey.avif Normal file
View File

Binary file not shown.

BIN
apps/desktop/src/images/yubikey.webp Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 13 KiB

9
apps/desktop/src/locales/en/messages.json
View File

@ -2525,6 +2525,15 @@
}
}
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredByOrgForAccount": {
"message": "Duo two-step login is required for your account."
},
"launchDuo": {
"message": "Launch Duo in Browser"
},
"importFormatError": {
"message": "Data is not formatted correctly. Please check your import file and try again."
},

19
apps/desktop/src/main.ts
View File

@ -277,15 +277,24 @@ export class Main {
const url = new URL(s);
const code = url.searchParams.get("code");
const receivedState = url.searchParams.get("state");
let message = "";
if (code == null || receivedState == null) {
if (code === null) {
return;
}
const message =
s.indexOf("bitwarden://import-callback-lp") === 0
? "importCallbackLastPass"
: "ssoCallback";
if (s.indexOf("bitwarden://duo-callback") === 0) {
message = "duoCallback";
} else if (receivedState === null) {
return;
}
if (s.indexOf("bitwarden://import-callback-lp") === 0) {
message = "importCallbackLastPass";
} else if (s.indexOf("bitwarden://sso-callback") === 0) {
message = "ssoCallback";
}
this.messagingService.send(message, { code: code, state: receivedState });
});
}

6
apps/web/src/locales/en/messages.json
View File

@ -5928,13 +5928,13 @@
}
},
"launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch DUO and follow the steps to finish logging in."
"message": "Launch Duo and follow the steps to finish logging in."
},
"duoRequiredByOrgForAccount": {
"message": "DUO two-step login is required for your account."
"message": "Duo two-step login is required for your account."
},
"launchDuo": {
"message": "Launch DUO"
"message": "Launch Duo"
},
"turnOn": {
"message": "Turn on"