From bf5d8cab1c8a14f477c93bc6af06470b2d32eb3e Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 27 Jun 2018 17:50:31 -0400 Subject: [PATCH] implement 2fa setup for u2f --- jslib | 2 +- src/app/app.module.ts | 3 + .../two-factor-authenticator.component.html | 2 +- .../settings/two-factor-duo.component.html | 2 +- .../settings/two-factor-email.component.html | 2 +- .../settings/two-factor-setup.component.ts | 7 + .../settings/two-factor-u2f.component.html | 81 +++++++++ src/app/settings/two-factor-u2f.component.ts | 155 ++++++++++++++++++ .../two-factor-yubikey.component.html | 2 +- src/locales/en/messages.json | 27 +++ webpack.config.js | 1 + 11 files changed, 279 insertions(+), 5 deletions(-) create mode 100644 src/app/settings/two-factor-u2f.component.html create mode 100644 src/app/settings/two-factor-u2f.component.ts diff --git a/jslib b/jslib index ec505b8c55..ccd10751e3 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit ec505b8c5508e4c8f6191c946b042a804c73c501 +Subproject commit ccd10751e3b4228f4117fd1ca2f87f8603eac130 diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 943973a0db..5463d81d3b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -46,6 +46,7 @@ import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authentic import { TwoFactorDuoComponent } from './settings/two-factor-duo.component'; import { TwoFactorEmailComponent } from './settings/two-factor-email.component'; import { TwoFactorSetupComponent } from './settings/two-factor-setup.component'; +import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component'; import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component'; import { ExportComponent } from './tools/export.component'; @@ -152,6 +153,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; TwoFactorDuoComponent, TwoFactorEmailComponent, TwoFactorOptionsComponent, + TwoFactorU2fComponent, TwoFactorYubiKeyComponent, TwoFactorSetupComponent, UserLayoutComponent, @@ -175,6 +177,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; TwoFactorDuoComponent, TwoFactorEmailComponent, TwoFactorOptionsComponent, + TwoFactorU2fComponent, TwoFactorYubiKeyComponent, ], providers: [], diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html index 520d85e38f..69207de362 100644 --- a/src/app/settings/two-factor-authenticator.component.html +++ b/src/app/settings/two-factor-authenticator.component.html @@ -74,7 +74,7 @@
diff --git a/src/app/settings/two-factor-duo.component.html b/src/app/settings/two-factor-duo.component.html index da2fcb2edf..d4268af7c6 100644 --- a/src/app/settings/two-factor-duo.component.html +++ b/src/app/settings/two-factor-duo.component.html @@ -59,7 +59,7 @@
diff --git a/src/app/settings/two-factor-email.component.html b/src/app/settings/two-factor-email.component.html index fc503669c1..7ea7bf3459 100644 --- a/src/app/settings/two-factor-email.component.html +++ b/src/app/settings/two-factor-email.component.html @@ -61,7 +61,7 @@
diff --git a/src/app/settings/two-factor-setup.component.ts b/src/app/settings/two-factor-setup.component.ts index aa3e1cc4ec..f87afb6743 100644 --- a/src/app/settings/two-factor-setup.component.ts +++ b/src/app/settings/two-factor-setup.component.ts @@ -19,6 +19,7 @@ import { ModalComponent } from '../modal.component'; import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component'; import { TwoFactorDuoComponent } from './two-factor-duo.component'; import { TwoFactorEmailComponent } from './two-factor-email.component'; +import { TwoFactorU2fComponent } from './two-factor-u2f.component'; import { TwoFactorYubiKeyComponent } from './two-factor-yubikey.component'; @Component({ @@ -108,6 +109,12 @@ export class TwoFactorSetupComponent implements OnInit { this.updateStatus(enabled, TwoFactorProviderType.Email); }); break; + case TwoFactorProviderType.U2f: + const u2fComp = this.openModal(this.u2fModalRef, TwoFactorU2fComponent); + u2fComp.onUpdated.subscribe((enabled: boolean) => { + this.updateStatus(enabled, TwoFactorProviderType.U2f); + }); + break; default: break; } diff --git a/src/app/settings/two-factor-u2f.component.html b/src/app/settings/two-factor-u2f.component.html new file mode 100644 index 0000000000..1581824d09 --- /dev/null +++ b/src/app/settings/two-factor-u2f.component.html @@ -0,0 +1,81 @@ +
+
+
+
+

+ {{'twoStepLogin' | i18n}} + FIDO U2F +

+ +
+
+
+

{{'twoStepLoginAuthDesc' | i18n}}

+ + +
+
+ + +
+
+
+
+ + {{'twoStepLoginProviderEnabled' | i18n}} + + +

{{'twoFactorU2fWarning' | i18n}}

+
    +
  • {{'twoFactorU2fSupportWeb' | i18n}}
    • +
+ + +

{{'twoFactorU2fAdd' | i18n}}:

+
    +
  1. {{'twoFactorU2fPlugIn' | i18n}}
    2. +
  2. {{'twoFactorU2fTouchButton' | i18n}}
    3. +
+
+
+ +

+ +

+ {{'twoFactorU2fWaiting' | i18n}}... + + +

+ +

+ {{'twoFactorU2fClickEnable' | i18n}} + + +

+ +

+ {{'twoFactorU2fProblemReading' | i18n}} + +
+ +
+
+ + +
+
+
+
+
diff --git a/src/app/settings/two-factor-u2f.component.ts b/src/app/settings/two-factor-u2f.component.ts new file mode 100644 index 0000000000..a0ba2e068d --- /dev/null +++ b/src/app/settings/two-factor-u2f.component.ts @@ -0,0 +1,155 @@ +import { + Component, + EventEmitter, + OnDestroy, + OnInit, + Output, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { ApiService } from 'jslib/abstractions/api.service'; +import { CryptoService } from 'jslib/abstractions/crypto.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; + +import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest'; +import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest'; + +import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType'; +import { UpdateTwoFactorU2fRequest } from 'jslib/models/request/updateTwoFactorU2fRequest'; +import { TwoFactorU2fResponse } from 'jslib/models/response/twoFactorU2fResponse'; + +@Component({ + selector: 'app-two-factor-u2f', + templateUrl: 'two-factor-u2f.component.html', +}) +export class TwoFactorU2fComponent implements OnInit, OnDestroy { + @Output() onUpdated = new EventEmitter(); + + enabled = false; + authed = false; + u2fChallenge: any; + u2fError: boolean; + u2fListening: boolean; + u2fResponse: string; + masterPassword: string; + u2fScript: HTMLScriptElement; + + authPromise: Promise; + formPromise: Promise; + + private masterPasswordHash: string; + + constructor(private apiService: ApiService, private i18nService: I18nService, + private analytics: Angulartics2, private toasterService: ToasterService, + private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService) { + this.u2fScript = window.document.createElement('script'); + this.u2fScript.src = 'scripts/u2f.js'; + this.u2fScript.async = true; + } + + ngOnInit() { + window.document.body.appendChild(this.u2fScript); + } + + ngOnDestroy() { + window.document.body.removeChild(this.u2fScript); + } + + async auth() { + if (this.masterPassword == null || this.masterPassword === '') { + this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), + this.i18nService.t('masterPassRequired')); + return; + } + + const request = new PasswordVerificationRequest(); + request.masterPasswordHash = this.masterPasswordHash = + await this.cryptoService.hashPassword(this.masterPassword, null); + try { + this.authPromise = this.apiService.getTwoFactorU2f(request); + const response = await this.authPromise; + this.authed = true; + await this.processResponse(response); + this.readDevice(); + } catch { } + } + + async submit() { + if (this.enabled) { + this.disable(); + } else { + this.enable(); + } + } + + private readDevice() { + if (this.enabled) { + return; + } + + // tslint:disable-next-line + console.log('listening for key...'); + + this.u2fResponse = null; + this.u2fError = false; + this.u2fListening = true; + + (window as any).u2f.register(this.u2fChallenge.AppId, [{ + version: this.u2fChallenge.Version, + challenge: this.u2fChallenge.Challenge, + }], [], (data: any) => { + this.u2fListening = false; + if (data.errorCode === 5) { + this.readDevice(); + return; + } else if (data.errorCode) { + this.u2fError = true; + // tslint:disable-next-line + console.log('error: ' + data.errorCode); + return; + } + this.u2fResponse = JSON.stringify(data); + }, 10); + } + + private async enable() { + const request = new UpdateTwoFactorU2fRequest(); + request.masterPasswordHash = this.masterPasswordHash; + request.deviceResponse = this.u2fResponse; + try { + this.formPromise = this.apiService.putTwoFactorU2f(request); + const response = await this.formPromise; + await this.processResponse(response); + this.analytics.eventTrack.next({ action: 'Enabled Two-step U2F' }); + this.onUpdated.emit(true); + } catch { } + } + + private async disable() { + const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'), + this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning'); + if (!confirmed) { + return; + } + + try { + const request = new TwoFactorProviderRequest(); + request.masterPasswordHash = this.masterPasswordHash; + request.type = TwoFactorProviderType.U2f; + this.formPromise = this.apiService.putTwoFactorDisable(request); + await this.formPromise; + this.enabled = false; + this.analytics.eventTrack.next({ action: 'Disabled Two-step U2F' }); + this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled')); + this.onUpdated.emit(false); + } catch { } + } + + private async processResponse(response: TwoFactorU2fResponse) { + this.u2fChallenge = response.challenge; + this.enabled = response.enabled; + } +} diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html index 9977f76a78..db73c21576 100644 --- a/src/app/settings/two-factor-yubikey.component.html +++ b/src/app/settings/two-factor-yubikey.component.html @@ -4,7 +4,7 @@

{{'twoStepLogin' | i18n}} - {{'yubiKeyTitle' | i18n}} + YubiKey