osb/public/passkey/passkey.js

/*
 * Passkey Implementation
 */
let passkey_debug = false;

/**
 * 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 ] );
	}
	return window.btoa(binary);
}

/**
 * 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]);
			}
		}
	}
}

function passkey_check_browser()
{
	// check browser support
	if ((! window.fetch) || (! navigator.credentials) || (! navigator.credentials.create))
		throw new Error('Browser not supported.');

	/*
	// Availability of `window.PublicKeyCredential` means WebAuthn is usable.
	// `isUserVerifyingPlatformAuthenticatorAvailable` means the feature detection is usable.
	// `isConditionalMediationAvailable` means the feature detection is usable.
	if (window.PublicKeyCredential &&
		PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&
		PublicKeyCredential.isConditionalMediationAvailable) {
		// Check if user verifying platform authenticator is available.
		Promise.all([
			PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
			PublicKeyCredential.isConditionalMediationAvailable(),
		]).then(results => {
			if (results.every(r => r === true)) {
				// Display "Create a new passkey" button
			}
		});
	}
	*/

	if (passkey_debug)
		console.log('Passkey: Browser OK');

	return true;
}

/**
 * Register/Create a passkey for a user
 */
async function passkey_register(csrf_token,icon_dom,icon,icon_shell_current,icon_shell_success,icon_shell_fail)
{
	try {
		if (! passkey_check_browser())
			return;

		// Change our icon so that it is obvious we are doing something
		icon_dom.find('i').removeClass(icon).addClass('spinner-grow spinner-grow-sm');

		// Get our arguments
		var createArgs;
		$.ajax({
			url: '/passkey/register',
			type: 'GET',
			dataType: 'json',
			async: false,
			cache: false,
			success: function(data) {
				if (passkey_debug)
					console.log('Passkey: Get Register Success');

				recursiveBase64StrToArrayBuffer(data);
				createArgs = data;
			},
			error: function(e,status,error) {
				throw new Error(status || 'Unknown error occurred');
			}
		});

		// Create credentials
		try {
			const cred = await navigator.credentials.create(createArgs);

			const authenticatorAttestationResponse = {
				id: cred.id,
				rawId: arrayBufferToBase64(cred.rawId),
				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,
				authenticatorAttachment: cred.authenticatorAttachment,
				_token: csrf_token,
			};

			$.ajax({
				url: '/passkey/check',
				type: 'POST',
				data: authenticatorAttestationResponse,
				cache: false,
				success: function(data) {
					if (passkey_debug)
						console.log('Passkey: Registration Success');

					icon_dom.find('i').addClass(icon).removeClass('spinner-grow spinner-grow-sm');
					icon_dom.removeClass(icon_shell_current).addClass(icon_shell_success);
				},
				error: function(e,status,error) {
					throw new Error(status || 'Unknown error occurred');
				}
			});

		} catch (status) {
			if (passkey_debug)
				console.log(status || 'Passkey: User Aborted Register');

			// Restore the icon
			icon_dom.removeClass(icon_shell_current).addClass(icon_shell_fail).find('i').addClass(icon).removeClass('spinner-grow spinner-grow-sm');

			return;
		}

	} catch (err) {
		window.alert(err || 'An UNKNOWN error occurred?');
	}
}

/**
 * Check a passkey being presented
 */
async function passkey_check(csrf_token,redirect)
{
	if (passkey_debug)
		console.log('Passkey: Check User Passkey');

	try {
		if (! passkey_check_browser())
			return;

		// Get our arguments
		var getArgs;
		$.ajax({
			url: '/passkey/get',
			type: 'GET',
			dataType: 'json',
			async: false,
			cache: false,
			success: function(data) {
				if (passkey_debug)
					console.log('Passkey: Get Args Success');

				recursiveBase64StrToArrayBuffer(data);
				getArgs = data;
			},
			error: function(e,status,error) {
				throw new Error(status || 'Unknown error occurred');
			}
		});

		// 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,
			authenticatorData: cred.response.authenticatorData ? arrayBufferToBase64(cred.response.authenticatorData) : null,
			signature: cred.response.signature ? arrayBufferToBase64(cred.response.signature) : null,
			userHandle: cred.response.userHandle ? arrayBufferToBase64(cred.response.userHandle) : null,
			_token: csrf_token
		};

		$.ajax({
			url: '/passkey/process',
			type: 'POST',
			data: authenticatorAttestationResponse,
			cache: false,
			success: function(data) {
				if (passkey_debug)
					console.log('Passkey: Process Success');

				// Direct to the home page
				window.location.href = (redirect !== undefined) ? redirect : '/';
			},
			error: function(e,status,error) {
				throw new Error(status || 'Unknown error occurred');
			}
		});

	} catch (err) {
		window.alert(err || 'An UNKNOWN error occurred?');
	}
}

function passkey_create(object,csrf,icon,icon_class_current,icon_class_success,icon_class_nop)
{
	if (passkey_debug)
		console.log('Passkey: Create Click');

	// Availability of `window.PublicKeyCredential` means WebAuthn is usable.
	// `isUserVerifyingPlatformAuthenticatorAvailable` means the feature detection is usable.
	// `sConditionalMediationAvailable` means the feature detection is usable.
	if (window.PublicKeyCredential &&
		PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&
		PublicKeyCredential.isConditionalMediationAvailable) {
		// Check if user verifying platform authenticator is available.
		Promise.all([
			PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
			PublicKeyCredential.isConditionalMediationAvailable(),
		]).then(results => {
			if (passkey_debug)
				console.log('Passkey: Browser Supported');

			if (results.every(r => r === true)) {
				passkey_register(csrf,object,icon,icon_class_current,icon_class_success,icon_class_nop);
			} else {
				alert('It seems that passkey is NOT supported by your browse (B)');
			}
		});

	} else {
		alert('It seems that passkey is NOT supported by your browser (A)');
	}

	return false;
}