bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 05:43:41 +00:00
Code Issues Releases Wiki Activity

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

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
8 changed files with 234 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2696,10 +2696,10 @@
} }
}, },
"launchDuoAndFollowStepsToFinishLoggingIn": { "launchDuoAndFollowStepsToFinishLoggingIn": {
"message": "Launch DUO and follow the steps to finish logging in." "message": "Launch Duo and follow the steps to finish logging in."
}, },
"duoRequiredByOrgForAccount": { "duoRequiredByOrgForAccount": {
"message": "DUO two-step login is required for your account." "message": "Duo two-step login is required for your account."
}, },
"openExtensionInNewWindowToCompleteLogin": { "openExtensionInNewWindowToCompleteLogin": {
"message": "Open the extension in a new window to complete login" "message": "Open the extension in a new window to complete login"
@@ -2708,7 +2708,7 @@
"message": "Popout extension" "message": "Popout extension"
}, },
"launchDuo": { "launchDuo": {
"message": "Launch DUO" "message": "Launch Duo"
}, },
"importFormatError": { "importFormatError": {
"message": "Data is not formatted correctly. Please check your import file and try again." "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 <div class="page-top-padding">
id="two-factor-page" <form
#form #form
(ngSubmit)="submit()" (ngSubmit)="submit()"
[appApiAction]="formPromise" [appApiAction]="formPromise"
attr.aria-hidden="{{ showingModal }}" class="container"
> autocomplete="off"
<div id="content" class="content"> id="two-factor-page"
<h1>{{ title }}</h1> attr.aria-hidden="{{ showingModal }}"
<p *ngIf="selectedProviderType === providerType.Authenticator"> >
{{ "enterVerificationCodeApp" | i18n }} <div id="content" class="content tw-mt-5">
</p> <img class="logo-image" alt="Bitwarden" />
<p *ngIf="selectedProviderType === providerType.Email"> <p class="lead text-center mb-4">{{ title }}</p>
{{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }} <!-- Providers -->
</p> <div class="box last">
<div <!-- Authenticator / Email TOTP -->
class="box last" <ng-container
*ngIf=" *ngIf="
selectedProviderType === providerType.Email || selectedProviderType === providerType.Email ||
selectedProviderType === providerType.Authenticator selectedProviderType === providerType.Authenticator
" "
> >
<div class="box-content"> <p *ngIf="selectedProviderType === providerType.Authenticator">
<div class="box-content-row" appBoxRow> {{ "enterVerificationCodeApp" | i18n }}
<label for="code">{{ "verificationCode" | i18n }}</label> </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 <input
id="code" id="remember"
type="text" type="checkbox"
name="Code" name="Remember"
[(ngModel)]="token" class="tw-mr-2"
required [(ngModel)]="remember"
appAutofocus
appInputVerbatim
/> />
{{ "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>
<div class="box-content-row box-content-row-checkbox" appBoxRow> <div class="buttons-row" *ngIf="selectedProviderType != null && !isDuoProvider">
<label for="remember">{{ "rememberMe" | i18n }}</label> <button type="submit" class="btn primary block" [disabled]="form.loading">
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember" /> <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> <div class="buttons-row">
</div> <button type="button" routerLink="/login" class="btn block">
<ng-container *ngIf="selectedProviderType === providerType.Yubikey"> {{ "cancel" | i18n }}
<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 }}
</button> </button>
</div> </div>
</div> </div>
<div class="sub-options">
<button type="button" class="text text-primary" appStopClick (click)="anotherMethod()">
<b>{{ "useAnotherTwoStepMethod" | i18n }}</b>
</button>
</div>
</div> </div>
<div class="buttons"> </form>
<button </div>
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>
<ng-template #twoFactorOptions></ng-template> <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 { ActivatedRoute, Router } from "@angular/router";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component"; 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 { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type"; import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service"; 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 { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.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"; import { TwoFactorOptionsComponent } from "./two-factor-options.component";
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({ @Component({
selector: "app-two-factor", selector: "app-two-factor",
templateUrl: "two-factor.component.html", templateUrl: "two-factor.component.html",
@@ -31,6 +34,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
twoFactorOptionsModal: ViewContainerRef; twoFactorOptionsModal: ViewContainerRef;
showingModal = false; showingModal = false;
duoCallbackSubscriptionEnabled: boolean = false;
constructor( constructor(
loginStrategyService: LoginStrategyServiceAbstraction, loginStrategyService: LoginStrategyServiceAbstraction,
@@ -40,8 +44,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
platformUtilsService: PlatformUtilsService, platformUtilsService: PlatformUtilsService,
syncService: SyncService, syncService: SyncService,
environmentService: EnvironmentService, environmentService: EnvironmentService,
private broadcasterService: BroadcasterService,
private modalService: ModalService, private modalService: ModalService,
stateService: StateService, stateService: StateService,
private ngZone: NgZone,
route: ActivatedRoute, route: ActivatedRoute,
logService: LogService, logService: LogService,
twoFactorService: TwoFactorService, twoFactorService: TwoFactorService,
@@ -115,4 +121,25 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
content.setAttribute("style", "width:335px"); 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.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  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": { "importFormatError": {
"message": "Data is not formatted correctly. Please check your import file and try again." "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 url = new URL(s);
const code = url.searchParams.get("code"); const code = url.searchParams.get("code");
const receivedState = url.searchParams.get("state"); const receivedState = url.searchParams.get("state");
let message = "";
if (code == null || receivedState == null) { if (code === null) {
return; return;
} }
const message = if (s.indexOf("bitwarden://duo-callback") === 0) {
s.indexOf("bitwarden://import-callback-lp") === 0 message = "duoCallback";
? "importCallbackLastPass" } else if (receivedState === null) {
: "ssoCallback"; 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 }); this.messagingService.send(message, { code: code, state: receivedState });
}); });
} }

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

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