70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
|
import WebAuthnError from './error';
|
||
|
|
import WebAuthnFlow from './flow';
|
||
|
|
import { supported, convertGetParams, convertGetResponse } from './util';
|
||
|
|
|
||
|
|
// Authenticate WebAuthn devices for users to authenticate with.
|
||
|
|
//
|
||
|
|
// State Flow #1: setup -> in_progress -> authenticated -> POST to server
|
||
|
|
// State Flow #2: setup -> in_progress -> error -> setup
|
||
|
|
export default class WebAuthnAuthenticate {
|
||
|
|
constructor(container, form, webauthnParams, fallbackButton, fallbackUI) {
|
||
|
|
this.container = container;
|
||
|
|
this.webauthnParams = convertGetParams(JSON.parse(webauthnParams.options));
|
||
|
|
this.renderInProgress = this.renderInProgress.bind(this);
|
||
|
|
|
||
|
|
this.form = form;
|
||
|
|
this.fallbackButton = fallbackButton;
|
||
|
|
this.fallbackUI = fallbackUI;
|
||
|
|
if (this.fallbackButton) {
|
||
|
|
this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
this.flow = new WebAuthnFlow(container, {
|
||
|
|
inProgress: '#js-authenticate-token-2fa-in-progress',
|
||
|
|
error: '#js-authenticate-token-2fa-error',
|
||
|
|
authenticated: '#js-authenticate-token-2fa-authenticated',
|
||
|
|
});
|
||
|
|
|
||
|
|
this.container.on('click', '#js-token-2fa-try-again', this.renderInProgress);
|
||
|
|
}
|
||
|
|
|
||
|
|
start() {
|
||
|
|
if (!supported()) {
|
||
|
|
this.switchToFallbackUI();
|
||
|
|
} else {
|
||
|
|
this.renderInProgress();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
authenticate() {
|
||
|
|
navigator.credentials
|
||
|
|
.get({ publicKey: this.webauthnParams })
|
||
|
|
.then(resp => {
|
||
|
|
const convertedResponse = convertGetResponse(resp);
|
||
|
|
this.renderAuthenticated(JSON.stringify(convertedResponse));
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
this.flow.renderError(new WebAuthnError(err, 'authenticate'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
renderInProgress() {
|
||
|
|
this.flow.renderTemplate('inProgress');
|
||
|
|
this.authenticate();
|
||
|
|
}
|
||
|
|
|
||
|
|
renderAuthenticated(deviceResponse) {
|
||
|
|
this.flow.renderTemplate('authenticated');
|
||
|
|
const container = this.container[0];
|
||
|
|
container.querySelector('#js-device-response').value = deviceResponse;
|
||
|
|
container.querySelector(this.form).submit();
|
||
|
|
this.fallbackButton.classList.add('hidden');
|
||
|
|
}
|
||
|
|
|
||
|
|
switchToFallbackUI() {
|
||
|
|
this.fallbackButton.classList.add('hidden');
|
||
|
|
this.container[0].classList.add('hidden');
|
||
|
|
this.fallbackUI.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
}
|