2fa support
This commit is contained in:
Kyle Spearrin
parent
0328977c14
commit
fd15c09406
|
|
@ -33,7 +33,7 @@
|
|||
"ts-loader": "^3.0.5",
|
||||
"tslint": "^5.8.0",
|
||||
"tslint-loader": "^3.5.3",
|
||||
"typescript": "^2.5.3",
|
||||
"typescript": "^2.6.2",
|
||||
"webpack": "^3.8.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"webpack-node-externals": "^1.6.0"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<img src="../../images/logo@2x.png" alt="bitwarden">
|
||||
<p>{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import { Router } from '@angular/router';
|
|||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { AuthResult } from 'jslib/models/domain/authResult';
|
||||
|
||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
|
|||
export class LoginComponent {
|
||||
email: string = '';
|
||||
masterPassword: string = '';
|
||||
formPromise: Promise<any>;
|
||||
formPromise: Promise<AuthResult>;
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService) { }
|
||||
|
|
@ -47,7 +49,6 @@ export class LoginComponent {
|
|||
if (response.twoFactor) {
|
||||
this.analytics.eventTrack.next({ action: 'Logged In To Two-step' });
|
||||
this.router.navigate(['2fa']);
|
||||
// TODO: pass 2fa info
|
||||
} else {
|
||||
this.analytics.eventTrack.next({ action: 'Logged In' });
|
||||
this.router.navigate(['vault']);
|
||||
|
|
|
|||
|
|
@ -1,24 +1,65 @@
|
|||
<form id="register-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<h1>{{title}}</h1>
|
||||
<div class="box last">
|
||||
<p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
|
||||
<p *ngIf="selectedProviderType === providerType.Email">{{'enterVerificationCodeEmail' | i18n}}</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>
|
||||
<input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="remember">{{'verificationCode' | i18n}}</label>
|
||||
<input id="remember" type="checkbox" [(ngModel)]="remember">
|
||||
<label for="remember">{{'rememberMe' | i18n}}</label>
|
||||
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
|
||||
</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>
|
||||
</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.Duo">
|
||||
<div id="duo-frame"><iframe id="duo_iframe"></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="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||
<span [hidden]="form.loading">{{'continue' | i18n}}</span>
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import * as template from './two-factor.component.html';
|
|||
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Router } from '@angular/router';
|
||||
|
|
@ -9,28 +10,99 @@ import { Router } from '@angular/router';
|
|||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { RegisterRequest } from 'jslib/models/request/registerRequest';
|
||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||
|
||||
import { TwoFactorEmailRequest } from 'jslib/models/request/twoFactorEmailRequest';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||
import { CryptoService } from 'jslib/abstractions/crypto.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
|
||||
import { TwoFactorProviders } from 'jslib/services/auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-two-factor',
|
||||
template: template,
|
||||
})
|
||||
export class TwoFactorComponent {
|
||||
export class TwoFactorComponent implements OnInit {
|
||||
token: string = '';
|
||||
remember: boolean = false;
|
||||
providerType: number;
|
||||
email: string;
|
||||
masterPassword: string;
|
||||
u2fReady: boolean = false;
|
||||
providers = TwoFactorProviders;
|
||||
providerType = TwoFactorProviderType;
|
||||
selectedProviderType: TwoFactorProviderType = TwoFactorProviderType.Authenticator;
|
||||
u2fSupported: boolean = false;
|
||||
u2f: any = null;
|
||||
title: string = '';
|
||||
useVerificationCode: boolean = false;
|
||||
twoFactorEmail: string = null;
|
||||
formPromise: Promise<any>;
|
||||
emailPromise: Promise<any>;
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService,
|
||||
private cryptoService: CryptoService, private apiService: ApiService) { }
|
||||
private toasterService: ToasterService, private i18nService: I18nService, private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService) {
|
||||
this.u2fSupported = this.platformUtilsService.supportsU2f(window);
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
if (this.authService.email == null || this.authService.masterPasswordHash == null ||
|
||||
this.authService.twoFactorProviders == null) {
|
||||
this.router.navigate(['login']);
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedProviderType = this.authService.getDefaultTwoFactorProvider(this.u2fSupported);
|
||||
await this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.useVerificationCode = this.selectedProviderType === TwoFactorProviderType.Email ||
|
||||
this.selectedProviderType === TwoFactorProviderType.Authenticator ||
|
||||
this.selectedProviderType === TwoFactorProviderType.Yubikey;
|
||||
|
||||
if (this.selectedProviderType == null) {
|
||||
this.title = this.i18nService.t('loginUnavailable');
|
||||
return;
|
||||
}
|
||||
|
||||
this.title = (TwoFactorProviders as any)[this.selectedProviderType].name;
|
||||
const params = this.authService.twoFactorProviders.get(this.selectedProviderType);
|
||||
switch (this.selectedProviderType) {
|
||||
case TwoFactorProviderType.U2f:
|
||||
if (!this.u2fSupported) {
|
||||
break;
|
||||
}
|
||||
|
||||
const challenges = JSON.parse(params['Challenges']);
|
||||
// TODO: init u2f
|
||||
break;
|
||||
case TwoFactorProviderType.Duo:
|
||||
setTimeout(() => {
|
||||
(window as any).Duo.init({
|
||||
host: params['Host'],
|
||||
sig_request: params['Signature'],
|
||||
submit_callback: async (f: HTMLFormElement) => {
|
||||
const sig = f.querySelector('input[name="sig_response"]') as HTMLInputElement;
|
||||
if (sig != null) {
|
||||
this.token = sig.value;
|
||||
await this.submit();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
break;
|
||||
case TwoFactorProviderType.Email:
|
||||
this.twoFactorEmail = params['Email'];
|
||||
if (this.authService.twoFactorProviders.size > 1) {
|
||||
await this.sendEmail(false);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async submit() {
|
||||
if (this.token == null || this.token === '') {
|
||||
|
|
@ -39,17 +111,41 @@ export class TwoFactorComponent {
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.selectedProviderType === TwoFactorProviderType.U2f) {
|
||||
// TODO: stop U2f
|
||||
// TODO: normalize token
|
||||
} else if (this.selectedProviderType === TwoFactorProviderType.Email ||
|
||||
this.selectedProviderType === TwoFactorProviderType.Authenticator) {
|
||||
this.token = this.token.replace(' ', '').trim();
|
||||
}
|
||||
|
||||
try {
|
||||
this.formPromise = this.authService.logIn(this.email, this.masterPassword, this.providerType,
|
||||
this.token, this.remember);
|
||||
this.formPromise = this.authService.logInTwoFactor(this.selectedProviderType, this.token, this.remember);
|
||||
await this.formPromise;
|
||||
this.analytics.eventTrack.next({ action: 'Logged In From Two-step' });
|
||||
this.router.navigate(['vault']);
|
||||
} catch {
|
||||
// TODO: start U2F
|
||||
if (this.selectedProviderType === TwoFactorProviderType.U2f) {
|
||||
// TODO: start U2F again
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async sendEmail(doToast: boolean) {
|
||||
if (this.selectedProviderType !== TwoFactorProviderType.Email) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = new TwoFactorEmailRequest(this.authService.email, this.authService.masterPasswordHash);
|
||||
this.emailPromise = this.apiService.postTwoFactorEmail(request);
|
||||
await this.emailPromise;
|
||||
if (doToast) {
|
||||
// TODO toast
|
||||
}
|
||||
} catch { }
|
||||
}
|
||||
|
||||
anotherMethod() {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ import { ViewComponent } from './vault/view.component';
|
|||
TwoFactorComponent,
|
||||
VaultComponent,
|
||||
ViewComponent,
|
||||
WebviewDirective,
|
||||
],
|
||||
entryComponents: [
|
||||
AttachmentsComponent,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { enableProdMode } from '@angular/core';
|
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
require('../scss/styles.scss');
|
||||
require('../scripts/duo.js');
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ const syncService = new SyncService(userService, apiService, settingsService,
|
|||
const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService);
|
||||
const totpService = new TotpService(storageService);
|
||||
const containerService = new ContainerService(cryptoService, platformUtilsService);
|
||||
const authService: AuthServiceAbstraction = new AuthService(cryptoService, apiService,
|
||||
userService, tokenService, appIdService, platformUtilsService, constantsService,
|
||||
const authService = new AuthService(cryptoService, apiService,
|
||||
userService, tokenService, appIdService, i18nService, platformUtilsService, constantsService,
|
||||
messagingService);
|
||||
|
||||
const analytics = new Analytics(window, null, platformUtilsService, storageService, appIdService);
|
||||
|
|
@ -105,6 +105,7 @@ environmentService.setUrlsFromStorage().then(() => {
|
|||
function initFactory(i18n: I18nService, platformUtilsService: DesktopPlatformUtilsService): Function {
|
||||
return async () => {
|
||||
await i18n.init();
|
||||
await authService.init();
|
||||
const htmlEl = window.document.documentElement;
|
||||
htmlEl.classList.add('os_' + platformUtilsService.getDeviceString());
|
||||
htmlEl.classList.add('locale_' + i18n.translationLocale);
|
||||
|
|
|
|||
|
|
@ -445,5 +445,70 @@
|
|||
},
|
||||
"noItemsInList": {
|
||||
"message": "There are no items to list."
|
||||
},
|
||||
"verificationCode": {
|
||||
"message": "Verification Code"
|
||||
},
|
||||
"verificationCodeRequired": {
|
||||
"message": "Verification code is required."
|
||||
},
|
||||
"continue": {
|
||||
"message": "Continue"
|
||||
},
|
||||
"enterVerificationCodeApp": {
|
||||
"message": "Enter the 6 digit verification code from your authenticator app."
|
||||
},
|
||||
"enterVerificationCodeEmail": {
|
||||
"message": "Enter the 6 digit verification code that was emailed to"
|
||||
},
|
||||
"rememberMe": {
|
||||
"message": "Remember me"
|
||||
},
|
||||
"sendVerificationCodeEmailAgain": {
|
||||
"message": "Send verification code email again"
|
||||
},
|
||||
"useAnotherTwoStepMethod": {
|
||||
"message": "Use another two-step login method"
|
||||
},
|
||||
"insertYubiKey": {
|
||||
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
|
||||
},
|
||||
"insertU2f": {
|
||||
"message": "Insert your security key into your computer's USB port. If it has a button, touch it."
|
||||
},
|
||||
"recoveryCodeDesc": {
|
||||
"message": "Lost access to all of your two-factor providers? Use your recovery code to disable all two-factor providers from your account."
|
||||
},
|
||||
"recoveryCodeTitle": {
|
||||
"message": "Recovery Code"
|
||||
},
|
||||
"authenticatorAppTitle": {
|
||||
"message": "Authenticator App"
|
||||
},
|
||||
"authenticatorAppDesc": {
|
||||
"message": "Use an authenticator app (such as Authy or Google Authenticator) to generate time-based verification codes.",
|
||||
"description": "'Authy' and 'Google Authenticator' are product names and should not be translated."
|
||||
},
|
||||
"yubiKeyTitle": {
|
||||
"message": "YubiKey OTP Security Key"
|
||||
},
|
||||
"yubiKeyDesc": {
|
||||
"message": "Use a YubiKey to access your account. Works with YubiKey 4, 4 Nano, 4C, and NEO devices."
|
||||
},
|
||||
"duoDesc": {
|
||||
"message": "Verify with Duo Security using the Duo Mobile app, SMS, phone call, or U2F security key.",
|
||||
"description": "'Duo Security' and 'Duo Mobile' are product names and should not be translated."
|
||||
},
|
||||
"u2fDesc": {
|
||||
"message": "Use any FIDO U2F enabled security key to access your account."
|
||||
},
|
||||
"u2fTitle": {
|
||||
"message": "FIDO U2F Security Key"
|
||||
},
|
||||
"emailTitle": {
|
||||
"message": "Email"
|
||||
},
|
||||
"emailDesc": {
|
||||
"message": "Verification codes will be emailed to you."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ function createWindow() {
|
|||
// Create the browser window.
|
||||
win = new BrowserWindow({
|
||||
width: primaryScreenSize.width < 950 ? primaryScreenSize.width : 950,
|
||||
height: primaryScreenSize.height < 700 ? primaryScreenSize.height : 700,
|
||||
height: primaryScreenSize.height < 600 ? primaryScreenSize.height : 600,
|
||||
minWidth: 680,
|
||||
minHeight: 500,
|
||||
title: app.getName(),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,418 @@
|
|||
/**
|
||||
* Duo Web SDK v2
|
||||
* Copyright 2017, Duo Security
|
||||
*/
|
||||
|
||||
var Duo;
|
||||
(function (root, factory) {
|
||||
// Browser globals (root is window)
|
||||
var d = factory();
|
||||
// If the Javascript was loaded via a script tag, attempt to autoload
|
||||
// the frame.
|
||||
d._onReady(d.init);
|
||||
// Attach Duo to the `window` object
|
||||
root.Duo = Duo = d;
|
||||
}(window, function () {
|
||||
var DUO_MESSAGE_FORMAT = /^(?:AUTH|ENROLL)+\|[A-Za-z0-9\+\/=]+\|[A-Za-z0-9\+\/=]+$/;
|
||||
var DUO_ERROR_FORMAT = /^ERR\|[\w\s\.\(\)]+$/;
|
||||
var DUO_OPEN_WINDOW_FORMAT = /^DUO_OPEN_WINDOW\|/;
|
||||
var VALID_OPEN_WINDOW_DOMAINS = [
|
||||
'duo.com',
|
||||
'duosecurity.com',
|
||||
'duomobile.s3-us-west-1.amazonaws.com'
|
||||
];
|
||||
|
||||
var iframeId = 'duo_iframe',
|
||||
postAction = '',
|
||||
postArgument = 'sig_response',
|
||||
host,
|
||||
sigRequest,
|
||||
duoSig,
|
||||
appSig,
|
||||
iframe,
|
||||
submitCallback;
|
||||
|
||||
function throwError(message, url) {
|
||||
throw new Error(
|
||||
'Duo Web SDK error: ' + message +
|
||||
(url ? ('\n' + 'See ' + url + ' for more information') : '')
|
||||
);
|
||||
}
|
||||
|
||||
function hyphenize(str) {
|
||||
return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
|
||||
}
|
||||
|
||||
// cross-browser data attributes
|
||||
function getDataAttribute(element, name) {
|
||||
if ('dataset' in element) {
|
||||
return element.dataset[name];
|
||||
} else {
|
||||
return element.getAttribute('data-' + hyphenize(name));
|
||||
}
|
||||
}
|
||||
|
||||
// cross-browser event binding/unbinding
|
||||
function on(context, event, fallbackEvent, callback) {
|
||||
if ('addEventListener' in window) {
|
||||
context.addEventListener(event, callback, false);
|
||||
} else {
|
||||
context.attachEvent(fallbackEvent, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function off(context, event, fallbackEvent, callback) {
|
||||
if ('removeEventListener' in window) {
|
||||
context.removeEventListener(event, callback, false);
|
||||
} else {
|
||||
context.detachEvent(fallbackEvent, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function onReady(callback) {
|
||||
on(document, 'DOMContentLoaded', 'onreadystatechange', callback);
|
||||
}
|
||||
|
||||
function offReady(callback) {
|
||||
off(document, 'DOMContentLoaded', 'onreadystatechange', callback);
|
||||
}
|
||||
|
||||
function onMessage(callback) {
|
||||
on(window, 'message', 'onmessage', callback);
|
||||
}
|
||||
|
||||
function offMessage(callback) {
|
||||
off(window, 'message', 'onmessage', callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse the sig_request parameter, throwing errors if the token contains
|
||||
* a server error or if the token is invalid.
|
||||
*
|
||||
* @param {String} sig Request token
|
||||
*/
|
||||
function parseSigRequest(sig) {
|
||||
if (!sig) {
|
||||
// nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
// see if the token contains an error, throwing it if it does
|
||||
if (sig.indexOf('ERR|') === 0) {
|
||||
throwError(sig.split('|')[1]);
|
||||
}
|
||||
|
||||
// validate the token
|
||||
if (sig.indexOf(':') === -1 || sig.split(':').length !== 2) {
|
||||
throwError(
|
||||
'Duo was given a bad token. This might indicate a configuration ' +
|
||||
'problem with one of Duo\'s client libraries.',
|
||||
'https://www.duosecurity.com/docs/duoweb#first-steps'
|
||||
);
|
||||
}
|
||||
|
||||
var sigParts = sig.split(':');
|
||||
|
||||
// hang on to the token, and the parsed duo and app sigs
|
||||
sigRequest = sig;
|
||||
duoSig = sigParts[0];
|
||||
appSig = sigParts[1];
|
||||
|
||||
return {
|
||||
sigRequest: sig,
|
||||
duoSig: sigParts[0],
|
||||
appSig: sigParts[1]
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* This function is set up to run when the DOM is ready, if the iframe was
|
||||
* not available during `init`.
|
||||
*/
|
||||
function onDOMReady() {
|
||||
iframe = document.getElementById(iframeId);
|
||||
|
||||
if (!iframe) {
|
||||
throw new Error(
|
||||
'This page does not contain an iframe for Duo to use.' +
|
||||
'Add an element like <iframe id="duo_iframe"></iframe> ' +
|
||||
'to this page. ' +
|
||||
'See https://www.duosecurity.com/docs/duoweb#3.-show-the-iframe ' +
|
||||
'for more information.'
|
||||
);
|
||||
}
|
||||
|
||||
// we've got an iframe, away we go!
|
||||
ready();
|
||||
|
||||
// always clean up after yourself
|
||||
offReady(onDOMReady);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that a MessageEvent came from the Duo service, and that it
|
||||
* is a properly formatted payload.
|
||||
*
|
||||
* The Google Chrome sign-in page injects some JS into pages that also
|
||||
* make use of postMessage, so we need to do additional validation above
|
||||
* and beyond the origin.
|
||||
*
|
||||
* @param {MessageEvent} event Message received via postMessage
|
||||
*/
|
||||
function isDuoMessage(event) {
|
||||
return Boolean(
|
||||
event.origin === ('https://' + host) &&
|
||||
typeof event.data === 'string' &&
|
||||
(
|
||||
event.data.match(DUO_MESSAGE_FORMAT) ||
|
||||
event.data.match(DUO_ERROR_FORMAT) ||
|
||||
event.data.match(DUO_OPEN_WINDOW_FORMAT)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the request token and prepare for the iframe to become ready.
|
||||
*
|
||||
* All options below can be passed into an options hash to `Duo.init`, or
|
||||
* specified on the iframe using `data-` attributes.
|
||||
*
|
||||
* Options specified using the options hash will take precedence over
|
||||
* `data-` attributes.
|
||||
*
|
||||
* Example using options hash:
|
||||
* ```javascript
|
||||
* Duo.init({
|
||||
* iframe: "some_other_id",
|
||||
* host: "api-main.duo.test",
|
||||
* sig_request: "...",
|
||||
* post_action: "/auth",
|
||||
* post_argument: "resp"
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
* Example using `data-` attributes:
|
||||
* ```
|
||||
* <iframe id="duo_iframe"
|
||||
* data-host="api-main.duo.test"
|
||||
* data-sig-request="..."
|
||||
* data-post-action="/auth"
|
||||
* data-post-argument="resp"
|
||||
* >
|
||||
* </iframe>
|
||||
* ```
|
||||
*
|
||||
* @param {Object} options
|
||||
* @param {String} options.iframe The iframe, or id of an iframe to set up
|
||||
* @param {String} options.host Hostname
|
||||
* @param {String} options.sig_request Request token
|
||||
* @param {String} [options.post_action=''] URL to POST back to after successful auth
|
||||
* @param {String} [options.post_argument='sig_response'] Parameter name to use for response token
|
||||
* @param {Function} [options.submit_callback] If provided, duo will not submit the form instead execute
|
||||
* the callback function with reference to the "duo_form" form object
|
||||
* submit_callback can be used to prevent the webpage from reloading.
|
||||
*/
|
||||
function init(options) {
|
||||
if (options) {
|
||||
if (options.host) {
|
||||
host = options.host;
|
||||
}
|
||||
|
||||
if (options.sig_request) {
|
||||
parseSigRequest(options.sig_request);
|
||||
}
|
||||
|
||||
if (options.post_action) {
|
||||
postAction = options.post_action;
|
||||
}
|
||||
|
||||
if (options.post_argument) {
|
||||
postArgument = options.post_argument;
|
||||
}
|
||||
|
||||
if (options.iframe) {
|
||||
if (options.iframe.tagName) {
|
||||
iframe = options.iframe;
|
||||
} else if (typeof options.iframe === 'string') {
|
||||
iframeId = options.iframe;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof options.submit_callback === 'function') {
|
||||
submitCallback = options.submit_callback;
|
||||
}
|
||||
}
|
||||
|
||||
// if we were given an iframe, no need to wait for the rest of the DOM
|
||||
if (false && iframe) {
|
||||
ready();
|
||||
} else {
|
||||
// try to find the iframe in the DOM
|
||||
iframe = document.getElementById(iframeId);
|
||||
|
||||
// iframe is in the DOM, away we go!
|
||||
if (iframe) {
|
||||
ready();
|
||||
} else {
|
||||
// wait until the DOM is ready, then try again
|
||||
onReady(onDOMReady);
|
||||
}
|
||||
}
|
||||
|
||||
// always clean up after yourself!
|
||||
offReady(init);
|
||||
}
|
||||
|
||||
/**
|
||||
* This function is called when a message was received from another domain
|
||||
* using the `postMessage` API. Check that the event came from the Duo
|
||||
* service domain, and that the message is a properly formatted payload,
|
||||
* then perform the post back to the primary service.
|
||||
*
|
||||
* @param event Event object (contains origin and data)
|
||||
*/
|
||||
function onReceivedMessage(event) {
|
||||
if (isDuoMessage(event)) {
|
||||
if (event.data.match(DUO_OPEN_WINDOW_FORMAT)) {
|
||||
var url = event.data.substring("DUO_OPEN_WINDOW|".length);
|
||||
if (isValidUrlToOpen(url)) {
|
||||
// Open the URL that comes after the DUO_WINDOW_OPEN token.
|
||||
window.open(url, "_self");
|
||||
}
|
||||
}
|
||||
else {
|
||||
// the event came from duo, do the post back
|
||||
doPostBack(event.data);
|
||||
|
||||
// always clean up after yourself!
|
||||
offMessage(onReceivedMessage);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that this passed in URL is one that we will actually allow to
|
||||
* be opened.
|
||||
* @param url String URL that the message poster wants to open
|
||||
* @returns {boolean} true if we allow this url to be opened in the window
|
||||
*/
|
||||
function isValidUrlToOpen(url) {
|
||||
if (!url) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
|
||||
if (parser.protocol === "duotrustedendpoints:") {
|
||||
return true;
|
||||
} else if (parser.protocol !== "https:") {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = 0; i < VALID_OPEN_WINDOW_DOMAINS.length; i++) {
|
||||
if (parser.hostname.endsWith("." + VALID_OPEN_WINDOW_DOMAINS[i]) ||
|
||||
parser.hostname === VALID_OPEN_WINDOW_DOMAINS[i]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Point the iframe at Duo, then wait for it to postMessage back to us.
|
||||
*/
|
||||
function ready() {
|
||||
if (!host) {
|
||||
host = getDataAttribute(iframe, 'host');
|
||||
|
||||
if (!host) {
|
||||
throwError(
|
||||
'No API hostname is given for Duo to use. Be sure to pass ' +
|
||||
'a `host` parameter to Duo.init, or through the `data-host` ' +
|
||||
'attribute on the iframe element.',
|
||||
'https://www.duosecurity.com/docs/duoweb#3.-show-the-iframe'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (!duoSig || !appSig) {
|
||||
parseSigRequest(getDataAttribute(iframe, 'sigRequest'));
|
||||
|
||||
if (!duoSig || !appSig) {
|
||||
throwError(
|
||||
'No valid signed request is given. Be sure to give the ' +
|
||||
'`sig_request` parameter to Duo.init, or use the ' +
|
||||
'`data-sig-request` attribute on the iframe element.',
|
||||
'https://www.duosecurity.com/docs/duoweb#3.-show-the-iframe'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// if postAction/Argument are defaults, see if they are specified
|
||||
// as data attributes on the iframe
|
||||
if (postAction === '') {
|
||||
postAction = getDataAttribute(iframe, 'postAction') || postAction;
|
||||
}
|
||||
|
||||
if (postArgument === 'sig_response') {
|
||||
postArgument = getDataAttribute(iframe, 'postArgument') || postArgument;
|
||||
}
|
||||
|
||||
// point the iframe at Duo
|
||||
iframe.src = [
|
||||
'https://', host, '/frame/web/v1/auth?tx=', duoSig,
|
||||
'&parent=', encodeURIComponent(document.location.href),
|
||||
'&v=2.6'
|
||||
].join('');
|
||||
|
||||
// listen for the 'message' event
|
||||
onMessage(onReceivedMessage);
|
||||
}
|
||||
|
||||
/**
|
||||
* We received a postMessage from Duo. POST back to the primary service
|
||||
* with the response token, and any additional user-supplied parameters
|
||||
* given in form#duo_form.
|
||||
*/
|
||||
function doPostBack(response) {
|
||||
// create a hidden input to contain the response token
|
||||
var input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = postArgument;
|
||||
input.value = response + ':' + appSig;
|
||||
|
||||
// user may supply their own form with additional inputs
|
||||
var form = document.getElementById('duo_form');
|
||||
|
||||
// if the form doesn't exist, create one
|
||||
if (!form) {
|
||||
form = document.createElement('form');
|
||||
|
||||
// insert the new form after the iframe
|
||||
iframe.parentElement.insertBefore(form, iframe.nextSibling);
|
||||
}
|
||||
|
||||
// make sure we are actually posting to the right place
|
||||
form.method = 'POST';
|
||||
form.action = postAction;
|
||||
|
||||
// add the response token input to the form
|
||||
form.appendChild(input);
|
||||
|
||||
// away we go!
|
||||
if (typeof submitCallback === "function") {
|
||||
submitCallback.call(null, form);
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init: init,
|
||||
_onReady: onReady,
|
||||
_parseSigRequest: parseSigRequest,
|
||||
_isDuoMessage: isDuoMessage,
|
||||
_doPostBack: doPostBack
|
||||
};
|
||||
}));
|
||||
|
|
@ -104,3 +104,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
#duo-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,19 +23,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
#register-page, #hint-page {
|
||||
#register-page, #hint-page, #two-factor-page {
|
||||
margin-top: 20px;
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
#login-page, #register-page, #hint-page {
|
||||
p {
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
|
||||
#login-page, #register-page, #hint-page, #two-factor-page {
|
||||
.content {
|
||||
max-width: 300px;
|
||||
|
||||
p, h1 {
|
||||
p.lead, h1 {
|
||||
font-size: $font-size-large;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -117,4 +117,10 @@ export class DesktopPlatformUtilsService implements PlatformUtilsService {
|
|||
getApplicationVersion(): string {
|
||||
return (window as any).require('electron').remote.app.getVersion();
|
||||
}
|
||||
|
||||
supportsU2f(win: Window): boolean {
|
||||
// Not supported in Electron at this time.
|
||||
// ref: https://github.com/electron/electron/issues/3226
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue