2021-03-16 17:44:31 +01:00
|
|
|
import { getQsParam } from './common';
|
|
|
|
import { b64Decode, buildDataString } from './common-webauthn';
|
|
|
|
|
|
|
|
// tslint:disable-next-line
|
|
|
|
require('./webauthn.scss');
|
|
|
|
|
|
|
|
let parentUrl: string = null;
|
|
|
|
let parentOrigin: string = null;
|
|
|
|
let sentSuccess = false;
|
|
|
|
|
|
|
|
let locales: any = {};
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
|
|
const locale = getQsParam('locale');
|
|
|
|
|
|
|
|
const filePath = `locales/${locale}/messages.json?cache=${process.env.CACHE_TAG}`;
|
|
|
|
const localesResult = await fetch(filePath);
|
|
|
|
locales = await localesResult.json();
|
|
|
|
|
|
|
|
document.getElementById('msg').innerText = translate('webAuthnFallbackMsg');
|
|
|
|
document.getElementById('remember-label').innerText = translate('rememberMe');
|
|
|
|
document.getElementById('webauthn-button').innerText = translate('webAuthnAuthenticate');
|
|
|
|
|
|
|
|
document.getElementById('spinner').classList.add('d-none');
|
|
|
|
const content = document.getElementById('content');
|
|
|
|
content.classList.add('d-block');
|
|
|
|
content.classList.remove('d-none');
|
|
|
|
});
|
|
|
|
|
|
|
|
function translate(id: string) {
|
|
|
|
return locales[id]?.message || '';
|
|
|
|
}
|
|
|
|
|
|
|
|
(window as any).init = () => {
|
|
|
|
start();
|
|
|
|
};
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
if (sentSuccess) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!('credentials' in navigator)) {
|
|
|
|
error(translate('webAuthnNotSupported'));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const data = getQsParam('data');
|
|
|
|
if (!data) {
|
|
|
|
error('No data.');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
parentUrl = getQsParam('parent');
|
|
|
|
if (!parentUrl) {
|
|
|
|
error('No parent.');
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
parentUrl = decodeURIComponent(parentUrl);
|
|
|
|
parentOrigin = new URL(parentUrl).origin;
|
|
|
|
}
|
|
|
|
|
|
|
|
let json: any;
|
|
|
|
try {
|
|
|
|
const jsonString = b64Decode(data);
|
|
|
|
json = JSON.parse(jsonString);
|
|
|
|
}
|
|
|
|
catch (e) {
|
|
|
|
error('Cannot parse data.');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
initWebAuthn(json);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function initWebAuthn(obj: any) {
|
|
|
|
const challenge = obj.challenge.replace(/-/g, '+').replace(/_/g, '/');
|
|
|
|
obj.challenge = Uint8Array.from(atob(challenge), c => c.charCodeAt(0));
|
|
|
|
|
|
|
|
// fix escaping. Change this to coerce
|
|
|
|
obj.allowCredentials.forEach((listItem: any) => {
|
|
|
|
const fixedId = listItem.id.replace(/\_/g, '/').replace(/\-/g, '+');
|
|
|
|
listItem.id = Uint8Array.from(atob(fixedId), c => c.charCodeAt(0));
|
|
|
|
});
|
|
|
|
|
|
|
|
try {
|
|
|
|
const assertedCredential = await navigator.credentials.get({ publicKey: obj }) as PublicKeyCredential;
|
|
|
|
|
|
|
|
if (sentSuccess) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const dataString = buildDataString(assertedCredential);
|
|
|
|
const remember = (document.getElementById('remember') as HTMLInputElement).checked;
|
|
|
|
window.postMessage({ command: 'webAuthnResult', data: dataString, remember: remember }, '*');
|
|
|
|
|
|
|
|
sentSuccess = true;
|
|
|
|
success(translate('webAuthnSuccess'));
|
|
|
|
} catch (err) {
|
|
|
|
error(err);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function error(message: string) {
|
|
|
|
const el = document.getElementById('msg');
|
2021-04-05 22:37:02 +02:00
|
|
|
resetMsgBox(el);
|
2021-03-16 17:44:31 +01:00
|
|
|
el.innerHTML = message;
|
|
|
|
el.classList.add('alert');
|
|
|
|
el.classList.add('alert-danger');
|
|
|
|
}
|
|
|
|
|
|
|
|
function success(message: string) {
|
|
|
|
(document.getElementById('webauthn-button') as HTMLButtonElement).disabled = true;
|
|
|
|
|
|
|
|
const el = document.getElementById('msg');
|
2021-04-05 22:37:02 +02:00
|
|
|
resetMsgBox(el);
|
2021-03-16 17:44:31 +01:00
|
|
|
el.innerHTML = message;
|
|
|
|
el.classList.add('alert');
|
|
|
|
el.classList.add('alert-success');
|
|
|
|
}
|
2021-04-05 22:37:02 +02:00
|
|
|
|
|
|
|
function resetMsgBox(el: HTMLElement) {
|
|
|
|
el.classList.remove('alert');
|
|
|
|
el.classList.remove('alert-danger');
|
|
|
|
el.classList.remove('alert-success');
|
|
|
|
}
|