Update user.html
This commit is contained in:
jakani24
@@ -1,71 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>lbuchs/WebAuthn Test</title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body>
|
||||
<h1>lbuchs/WebAuthn</h1>
|
||||
<div>
|
||||
<button type="button" onclick="createRegistration()">Register</button>
|
||||
<button type="button" onclick="checkRegistration()">Login</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* creates a new FIDO2 registration
|
||||
* @returns {undefined}
|
||||
*/
|
||||
async function createRegistration() {
|
||||
try {
|
||||
|
||||
// check browser support
|
||||
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
|
||||
throw new Error('Browser not supported.');
|
||||
}
|
||||
|
||||
let rep = await window.fetch('server.php?fn=getCreateArgs', { method: 'GET', cache: 'no-cache' });
|
||||
// get create args
|
||||
let rep = await window.fetch('server.php?fn=getCreateArgs' + getGetParams(), {method:'GET', cache:'no-cache'});
|
||||
const createArgs = await rep.json();
|
||||
|
||||
// error handling
|
||||
if (createArgs.success === false) {
|
||||
throw new Error(createArgs.msg || 'Unknown error occurred');
|
||||
throw new Error(createArgs.msg || 'unknown error occured');
|
||||
}
|
||||
|
||||
// replace binary base64 data with ArrayBuffer. a other way to do this
|
||||
// is the reviver function of JSON.parse()
|
||||
recursiveBase64StrToArrayBuffer(createArgs);
|
||||
|
||||
// create credentials
|
||||
const cred = await navigator.credentials.create(createArgs);
|
||||
|
||||
// create object
|
||||
const authenticatorAttestationResponse = {
|
||||
transports: cred.response.getTransports ? cred.response.getTransports() : null,
|
||||
clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
|
||||
attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
|
||||
};
|
||||
|
||||
rep = await window.fetch('server.php?fn=processCreate', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(authenticatorAttestationResponse),
|
||||
cache: 'no-cache'
|
||||
// check auth on server side
|
||||
rep = await window.fetch('server.php?fn=processCreate' + getGetParams(), {
|
||||
method : 'POST',
|
||||
body : JSON.stringify(authenticatorAttestationResponse),
|
||||
cache : 'no-cache'
|
||||
});
|
||||
const authenticatorAttestationServerResponse = await rep.json();
|
||||
|
||||
// prompt server response
|
||||
if (authenticatorAttestationServerResponse.success) {
|
||||
window.alert(authenticatorAttestationServerResponse.msg || 'Registration success');
|
||||
reloadServerPreview();
|
||||
window.alert(authenticatorAttestationServerResponse.msg || 'registration success');
|
||||
|
||||
} else {
|
||||
throw new Error(authenticatorAttestationServerResponse.msg);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
window.alert(err.message || 'Unknown error occurred');
|
||||
reloadServerPreview();
|
||||
window.alert(err.message || 'unknown error occured');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* checks a FIDO2 registration
|
||||
* @returns {undefined}
|
||||
*/
|
||||
async function checkRegistration() {
|
||||
try {
|
||||
|
||||
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
|
||||
throw new Error('Browser not supported.');
|
||||
}
|
||||
|
||||
let rep = await window.fetch('server.php?fn=getGetArgs', { method: 'GET', cache: 'no-cache' });
|
||||
// get check args
|
||||
let rep = await window.fetch('server.php?fn=getGetArgs' + getGetParams(), {method:'GET',cache:'no-cache'});
|
||||
const getArgs = await rep.json();
|
||||
|
||||
// error handling
|
||||
if (getArgs.success === false) {
|
||||
throw new Error(getArgs.msg);
|
||||
}
|
||||
|
||||
// replace binary base64 data with ArrayBuffer. a other way to do this
|
||||
// is the reviver function of JSON.parse()
|
||||
recursiveBase64StrToArrayBuffer(getArgs);
|
||||
|
||||
// check credentials with hardware
|
||||
const cred = await navigator.credentials.get(getArgs);
|
||||
|
||||
// create object for transmission to server
|
||||
const authenticatorAttestationResponse = {
|
||||
id: cred.rawId ? arrayBufferToBase64(cred.rawId) : null,
|
||||
clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
|
||||
@@ -74,33 +99,257 @@
|
||||
userHandle: cred.response.userHandle ? arrayBufferToBase64(cred.response.userHandle) : null
|
||||
};
|
||||
|
||||
rep = await window.fetch('server.php?fn=processGet', {
|
||||
method: 'POST',
|
||||
// send to server
|
||||
rep = await window.fetch('server.php?fn=processGet' + getGetParams(), {
|
||||
method:'POST',
|
||||
body: JSON.stringify(authenticatorAttestationResponse),
|
||||
cache: 'no-cache'
|
||||
cache:'no-cache'
|
||||
});
|
||||
const authenticatorAttestationServerResponse = await rep.json();
|
||||
|
||||
// check server response
|
||||
if (authenticatorAttestationServerResponse.success) {
|
||||
window.alert(authenticatorAttestationServerResponse.msg || 'Login success');
|
||||
reloadServerPreview();
|
||||
window.alert(authenticatorAttestationServerResponse.msg || 'login success');
|
||||
} else {
|
||||
throw new Error(authenticatorAttestationServerResponse.msg);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
window.alert(err.message || 'Unknown error occurred');
|
||||
reloadServerPreview();
|
||||
window.alert(err.message || 'unknown error occured');
|
||||
}
|
||||
}
|
||||
|
||||
function clearRegistration() {
|
||||
window.fetch('server.php?fn=clearRegistrations' + getGetParams(), {method:'GET',cache:'no-cache'}).then(function(response) {
|
||||
return response.json();
|
||||
|
||||
}).then(function(json) {
|
||||
if (json.success) {
|
||||
reloadServerPreview();
|
||||
window.alert(json.msg);
|
||||
} else {
|
||||
throw new Error(json.msg);
|
||||
}
|
||||
}).catch(function(err) {
|
||||
reloadServerPreview();
|
||||
window.alert(err.message || 'unknown error occured');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function queryFidoMetaDataService() {
|
||||
window.fetch('server.php?fn=queryFidoMetaDataService' + getGetParams(), {method:'GET',cache:'no-cache'}).then(function(response) {
|
||||
return response.json();
|
||||
|
||||
}).then(function(json) {
|
||||
if (json.success) {
|
||||
window.alert(json.msg);
|
||||
} else {
|
||||
throw new Error(json.msg);
|
||||
}
|
||||
}).catch(function(err) {
|
||||
window.alert(err.message || 'unknown error occured');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* convert RFC 1342-like base64 strings to array buffer
|
||||
* @param {mixed} obj
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function recursiveBase64StrToArrayBuffer(obj) {
|
||||
let prefix = '=?BINARY?B?';
|
||||
let suffix = '?=';
|
||||
if (typeof obj === 'object') {
|
||||
for (let key in obj) {
|
||||
if (typeof obj[key] === 'string') {
|
||||
let str = obj[key];
|
||||
if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
|
||||
str = str.substring(prefix.length, str.length - suffix.length);
|
||||
|
||||
let binary_string = window.atob(str);
|
||||
let len = binary_string.length;
|
||||
let bytes = new Uint8Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
bytes[i] = binary_string.charCodeAt(i);
|
||||
}
|
||||
obj[key] = bytes.buffer;
|
||||
}
|
||||
} else {
|
||||
recursiveBase64StrToArrayBuffer(obj[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a ArrayBuffer to Base64
|
||||
* @param {ArrayBuffer} buffer
|
||||
* @returns {String}
|
||||
*/
|
||||
function arrayBufferToBase64(buffer) {
|
||||
let binary = '';
|
||||
let bytes = new Uint8Array(buffer);
|
||||
let len = bytes.byteLength;
|
||||
for (let i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
binary += String.fromCharCode( bytes[ i ] );
|
||||
}
|
||||
return window.btoa(binary);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get URL parameter
|
||||
* @returns {String}
|
||||
*/
|
||||
function getGetParams() {
|
||||
let url = '';
|
||||
|
||||
url += '&apple=' + (document.getElementById('cert_apple').checked ? '1' : '0');
|
||||
url += '&yubico=' + (document.getElementById('cert_yubico').checked ? '1' : '0');
|
||||
url += '&solo=' + (document.getElementById('cert_solo').checked ? '1' : '0');
|
||||
url += '&hypersecu=' + (document.getElementById('cert_hypersecu').checked ? '1' : '0');
|
||||
url += '&google=' + (document.getElementById('cert_google').checked ? '1' : '0');
|
||||
url += 'µsoft=' + (document.getElementById('cert_microsoft').checked ? '1' : '0');
|
||||
url += '&mds=' + (document.getElementById('cert_mds').checked ? '1' : '0');
|
||||
|
||||
url += '&requireResidentKey=' + (document.getElementById('requireResidentKey').checked ? '1' : '0');
|
||||
|
||||
url += '&type_usb=' + (document.getElementById('type_usb').checked ? '1' : '0');
|
||||
url += '&type_nfc=' + (document.getElementById('type_nfc').checked ? '1' : '0');
|
||||
url += '&type_ble=' + (document.getElementById('type_ble').checked ? '1' : '0');
|
||||
url += '&type_int=' + (document.getElementById('type_int').checked ? '1' : '0');
|
||||
url += '&type_hybrid=' + (document.getElementById('type_hybrid').checked ? '1' : '0');
|
||||
|
||||
url += '&fmt_android-key=' + (document.getElementById('fmt_android-key').checked ? '1' : '0');
|
||||
url += '&fmt_android-safetynet=' + (document.getElementById('fmt_android-safetynet').checked ? '1' : '0');
|
||||
url += '&fmt_apple=' + (document.getElementById('fmt_apple').checked ? '1' : '0');
|
||||
url += '&fmt_fido-u2f=' + (document.getElementById('fmt_fido-u2f').checked ? '1' : '0');
|
||||
url += '&fmt_none=' + (document.getElementById('fmt_none').checked ? '1' : '0');
|
||||
url += '&fmt_packed=' + (document.getElementById('fmt_packed').checked ? '1' : '0');
|
||||
url += '&fmt_tpm=' + (document.getElementById('fmt_tpm').checked ? '1' : '0');
|
||||
|
||||
url += '&rpId=' + encodeURIComponent(document.getElementById('rpId').value);
|
||||
|
||||
url += '&userId=' + encodeURIComponent(document.getElementById('userId').value);
|
||||
url += '&userName=' + encodeURIComponent(document.getElementById('userName').value);
|
||||
url += '&userDisplayName=' + encodeURIComponent(document.getElementById('userDisplayName').value);
|
||||
|
||||
if (document.getElementById('userVerification_required').checked) {
|
||||
url += '&userVerification=required';
|
||||
|
||||
} else if (document.getElementById('userVerification_preferred').checked) {
|
||||
url += '&userVerification=preferred';
|
||||
|
||||
} else if (document.getElementById('userVerification_discouraged').checked) {
|
||||
url += '&userVerification=discouraged';
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
function reloadServerPreview() {
|
||||
let iframe = document.getElementById('serverPreview');
|
||||
iframe.src = iframe.src;
|
||||
}
|
||||
|
||||
function setAttestation(attestation) {
|
||||
let inputEls = document.getElementsByTagName('input');
|
||||
for (const inputEl of inputEls) {
|
||||
if (inputEl.id && inputEl.id.match(/^(fmt|cert)\_/)) {
|
||||
inputEl.disabled = !attestation;
|
||||
}
|
||||
if (inputEl.id && inputEl.id.match(/^fmt\_/)) {
|
||||
inputEl.checked = attestation ? inputEl.id !== 'fmt_none' : inputEl.id === 'fmt_none';
|
||||
}
|
||||
if (inputEl.id && inputEl.id.match(/^cert\_/)) {
|
||||
inputEl.checked = attestation ? inputEl.id === 'cert_mds' : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* force https on load
|
||||
* @returns {undefined}
|
||||
*/
|
||||
window.onload = function() {
|
||||
if (location.protocol !== 'https:' && location.host !== 'localhost') {
|
||||
location.href = location.href.replace('http', 'https');
|
||||
}
|
||||
if (!document.getElementById('rpId').value) {
|
||||
document.getElementById('rpId').value = location.hostname;
|
||||
}
|
||||
|
||||
if (!document.getElementById('attestation_yes').checked) {
|
||||
setAttestation(false);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
font-family:sans-serif;
|
||||
margin: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
.splitter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.splitter > .form {
|
||||
flex: 1;
|
||||
min-width: 600px;
|
||||
}
|
||||
.splitter > .serverPreview {
|
||||
width: 740px;
|
||||
min-height: 700px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid grey;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.splitter > .serverPreview iframe {
|
||||
width: 700px;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="margin: 40px 10px 2px 0;">lbuchs/WebAuthn</h1>
|
||||
<div style="font-style: italic;">A simple PHP WebAuthn (FIDO2) server library.</div>
|
||||
<div class="splitter">
|
||||
<div class="form">
|
||||
<div> </div>
|
||||
<div> </div>
|
||||
<div>Simple working demo for the <a href="https://github.com/lbuchs/WebAuthn">lbuchs/WebAuthn</a> library.</div>
|
||||
<div>
|
||||
<div> </div>
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<td>
|
||||
<button type="button" onclick="createRegistration()">➕ new registration</button>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" onclick="checkRegistration()">❔ check registration</button>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" onclick="clearRegistration()">␡ clear all registrations</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="serverPreview">
|
||||
<p style="margin-left:10px;font-weight: bold;">Here you can see what's saved on the server:</p>
|
||||
<iframe src="server.php?fn=getStoredDataHtml" id="serverPreview"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user