Mobile WebAuthn connector updates (#1236)

* support for returning to app via button press and updated mobile connector UI

* added client-driven header text and fixed lint issues
This commit is contained in:
Matt Portune 2021-10-14 11:53:34 -04:00 committed by GitHub
parent db9ab9f51e
commit df9733081b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 5 deletions

View File

@ -6,13 +6,19 @@
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Bitwarden Mobile WebAuthn Connector</title>
<title>Bitwarden WebAuthn Connector</title>
</head>
<body style="background: transparent;">
<img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3">
<div class="text-center">
<button id="webauthn-button" class="btn btn-primary"></button>
<div class="row justify-content-md-center mt-5">
<div>
<img src="../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
<p id="webauthn-header" class="lead text-center mx-4 mb-4"></p>
<img src="../images/u2fkey-mobile.jpg" class="rounded img-fluid">
<div class="text-center mt-4">
<button id="webauthn-button" class="btn btn-primary btn-lg"></button>
</div>
</div>
</div>
</body>

View File

@ -6,7 +6,9 @@ require('./webauthn.scss');
let parsed = false;
let webauthnJson: any;
let headerText: string = null;
let btnText: string = null;
let btnReturnText: string = null;
let parentUrl: string = null;
let parentOrigin: string = null;
let callbackUri: string = null;
@ -18,6 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
init();
parseParameters();
if (headerText) {
const header = document.getElementById('webauthn-header');
header.innerText = decodeURI(headerText);
}
if (btnText) {
const button = document.getElementById('webauthn-button');
button.innerText = decodeURI(btnText);
@ -63,11 +69,13 @@ function parseParametersV1() {
}
webauthnJson = b64Decode(data);
headerText = getQsParam('headerText');
btnText = getQsParam('btnText');
btnReturnText = getQsParam('btnReturnText');
}
function parseParametersV2() {
let dataObj: { data: any, btnText: string; callbackUri?: string } = null;
let dataObj: { data: any, headerText: string; btnText: string; btnReturnText: string; callbackUri?: string } = null;
try {
dataObj = JSON.parse(b64Decode(getQsParam('data')));
}
@ -78,7 +86,9 @@ function parseParametersV2() {
callbackUri = dataObj.callbackUri;
webauthnJson = dataObj.data;
headerText = dataObj.headerText;
btnText = dataObj.btnText;
btnReturnText = dataObj.btnReturnText;
}
function start() {
@ -140,6 +150,7 @@ function onMessage() {
function error(message: string) {
if (callbackUri) {
document.location.replace(callbackUri + '?error=' + encodeURIComponent(message));
returnButton(callbackUri + '?error=' + encodeURIComponent(message));
} else {
parent.postMessage('error|' + message, parentUrl);
}
@ -154,6 +165,7 @@ function success(assertedCredential: PublicKeyCredential) {
if (callbackUri) {
document.location.replace(callbackUri + '?data=' + encodeURIComponent(dataString));
returnButton(callbackUri + '?data=' + encodeURIComponent(dataString));
} else {
parent.postMessage('success|' + dataString, parentUrl);
sentSuccess = true;
@ -168,3 +180,10 @@ function info(message: string) {
parent.postMessage('info|' + message, parentUrl);
}
function returnButton(uri: string) {
// provides 'return' button in case scripted navigation is blocked
const button = document.getElementById('webauthn-button');
button.innerText = decodeURI(btnReturnText);
button.onclick = () => { document.location.replace(uri); };
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 KiB