First release
This commit is contained in:
Italo
313
resources/js/webauthn.js
Normal file
313
resources/js/webauthn.js
Normal file
@@ -0,0 +1,313 @@
|
||||
/**
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) Italo Israel Baeza Cabrera
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
class WebAuthn {
|
||||
/**
|
||||
* Routes for WebAuthn assertion (login) and attestation (register).
|
||||
*
|
||||
* @type {{registerOptions: string, register: string, loginOptions: string, login: string, }}
|
||||
*/
|
||||
#routes = {
|
||||
registerOptions: "webauthn/register/options",
|
||||
register: "webauthn/register",
|
||||
loginOptions: "webauthn/login/options",
|
||||
login: "webauthn/login",
|
||||
}
|
||||
|
||||
/**
|
||||
* Headers to use in ALL requests done.
|
||||
*
|
||||
* @type {{Accept: string, "Content-Type": string, "X-Requested-With": string}}
|
||||
*/
|
||||
#headers = {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"X-Requested-With": "XMLHttpRequest"
|
||||
};
|
||||
|
||||
/**
|
||||
* If set to true, the credentials option will be set to 'include' on all fetch calls,
|
||||
* or else it will use the default 'same-origin'. Use this if the backend is not the
|
||||
* same origin as the client or the XSRF protection will break without the session.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
#includeCredentials = false
|
||||
|
||||
/**
|
||||
* Create a new WebAuthn instance.
|
||||
*
|
||||
* @param routes {{registerOptions: string, register: string, loginOptions: string, login: string}}
|
||||
* @param headers {{string}}
|
||||
* @param includeCredentials {boolean}
|
||||
* @param xsrfToken {string|null}
|
||||
*/
|
||||
constructor(routes = {}, headers = {}, includeCredentials = false, xsrfToken = null) {
|
||||
Object.assign(this.#routes, routes);
|
||||
Object.assign(this.#headers, headers);
|
||||
|
||||
this.#includeCredentials = includeCredentials;
|
||||
|
||||
// If the developer didn't issue an XSRF token, we will find it ourselves.
|
||||
this.#headers["X-CSRF-TOKEN"] ??= xsrfToken ?? WebAuthn.#firstInputWithXsrfToken;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the XSRF token if it exists as a form input tag.
|
||||
*
|
||||
* @returns string
|
||||
* @throws TypeError
|
||||
*/
|
||||
static get #firstInputWithXsrfToken() {
|
||||
// First, try finding an CSRF Token in the head.
|
||||
let token = Array.from(document.head.getElementsByTagName("meta"))
|
||||
.find(element => element.name === "csrf-token");
|
||||
|
||||
if (token) {
|
||||
return token.content;
|
||||
}
|
||||
|
||||
// Then, try to find a hidden input containing the CSRF token.
|
||||
token = Array.from(document.getElementsByTagName('input'))
|
||||
.find(input => input.name === "_token" && input.type === "hidden")
|
||||
|
||||
if (token) {
|
||||
return token.value;
|
||||
}
|
||||
|
||||
// We didn't find it, and since is required, we will bail out.
|
||||
throw new TypeError('Ensure a CSRF token is manually set, or there is meta tag named "csrf-token".');
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a fetch promise to resolve later.
|
||||
*
|
||||
* @param data {Object}
|
||||
* @param route {string}
|
||||
* @param headers {{string}}
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
#fetch(data, route, headers = {}) {
|
||||
return fetch(route, {
|
||||
method: "POST",
|
||||
credentials: this.#includeCredentials ? "include" : "same-origin",
|
||||
redirect: "error",
|
||||
headers: {...this.#headers, ...headers},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Decodes a BASE64 URL string into a normal string.
|
||||
*
|
||||
* @param input {string}
|
||||
* @returns {string|Iterable}
|
||||
*/
|
||||
static #base64UrlDecode(input) {
|
||||
input = input.replace(/-/g, "+").replace(/_/g, "/");
|
||||
|
||||
const pad = input.length % 4;
|
||||
|
||||
if (pad) {
|
||||
if (pad === 1) {
|
||||
throw new Error("InvalidLengthError: Input base64url string is the wrong length to determine padding");
|
||||
}
|
||||
|
||||
input += new Array(5 - pad).join("=");
|
||||
}
|
||||
|
||||
return atob(input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform a string into Uint8Array instance.
|
||||
*
|
||||
* @param input {string}
|
||||
* @param useAtob {boolean}
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
static #uint8Array(input, useAtob = false) {
|
||||
return Uint8Array.from(
|
||||
useAtob ? atob(input) : WebAuthn.#base64UrlDecode(input), c => c.charCodeAt(0)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Encodes an array of bytes to a BASE64 URL string
|
||||
*
|
||||
* @param arrayBuffer {ArrayBuffer|Uint8Array}
|
||||
* @returns {string}
|
||||
*/
|
||||
static #arrayToBase64String(arrayBuffer) {
|
||||
return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses the Public Key Options received from the Server for the browser.
|
||||
*
|
||||
* @param publicKey {Object}
|
||||
* @returns {Object}
|
||||
*/
|
||||
#parseIncomingServerOptions(publicKey) {
|
||||
console.debug(publicKey);
|
||||
|
||||
publicKey.challenge = WebAuthn.#uint8Array(publicKey.challenge);
|
||||
|
||||
if ('user' in publicKey) {
|
||||
publicKey.user = {
|
||||
...publicKey.user,
|
||||
id: WebAuthn.#uint8Array(publicKey.user.id)
|
||||
};
|
||||
}
|
||||
|
||||
[
|
||||
"excludeCredentials",
|
||||
"allowCredentials"
|
||||
]
|
||||
.filter(key => key in publicKey)
|
||||
.forEach(key => {
|
||||
publicKey[key] = publicKey[key].map(data => {
|
||||
return {...data, id: WebAuthn.#uint8Array(data.id)};
|
||||
});
|
||||
});
|
||||
|
||||
console.log(publicKey);
|
||||
|
||||
return publicKey;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses the outgoing credentials from the browser to the server.
|
||||
*
|
||||
* @param credentials {Credential|PublicKeyCredential}
|
||||
* @return {{response: {string}, rawId: string, id: string, type: string}}
|
||||
*/
|
||||
#parseOutgoingCredentials(credentials) {
|
||||
let parseCredentials = {
|
||||
id: credentials.id,
|
||||
type: credentials.type,
|
||||
rawId: WebAuthn.#arrayToBase64String(credentials.rawId),
|
||||
response: {}
|
||||
};
|
||||
|
||||
[
|
||||
"clientDataJSON",
|
||||
"attestationObject",
|
||||
"authenticatorData",
|
||||
"signature",
|
||||
"userHandle"
|
||||
]
|
||||
.filter(key => key in credentials.response)
|
||||
.forEach(key => parseCredentials.response[key] = WebAuthn.#arrayToBase64String(credentials.response[key]));
|
||||
|
||||
return parseCredentials;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the response from the Server.
|
||||
*
|
||||
* Throws the entire response if is not OK (HTTP 2XX).
|
||||
*
|
||||
* @param response {Response}
|
||||
* @returns Promise<JSON|ReadableStream>
|
||||
* @throws Response
|
||||
*/
|
||||
static #handleResponse(response) {
|
||||
if (!response.ok) {
|
||||
throw response;
|
||||
}
|
||||
|
||||
// Here we will do a small trick. Since most of the responses from the server
|
||||
// are JSON, we will automatically parse the JSON body from the response. If
|
||||
// it's not JSON, we will push the body verbatim and let the dev handle it.
|
||||
return new Promise((resolve) => {
|
||||
response
|
||||
.json()
|
||||
.then((json) => resolve(json))
|
||||
.catch(() => resolve(response.body));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the user credentials from the browser/device.
|
||||
*
|
||||
* You can add request input if you are planning to register a user with WebAuthn from scratch.
|
||||
*
|
||||
* @param request {{string}}
|
||||
* @param response {{string}}
|
||||
* @returns Promise<JSON|ReadableStream>
|
||||
*/
|
||||
async register(request = {}, response = {}) {
|
||||
const optionsResponse = await this.#fetch(request, this.#routes.registerOptions);
|
||||
const json = await optionsResponse.json();
|
||||
const publicKey = this.#parseIncomingServerOptions(json);
|
||||
const credentials = await navigator.credentials.create({publicKey});
|
||||
const publicKeyCredential = this.#parseOutgoingCredentials(credentials);
|
||||
|
||||
Object.assign(publicKeyCredential, response);
|
||||
|
||||
return await this.#fetch(publicKeyCredential, this.#routes.register).then(WebAuthn.#handleResponse);
|
||||
}
|
||||
|
||||
/**
|
||||
* Log in a user with his credentials.
|
||||
*
|
||||
* If no credentials are given, the app may return a blank assertion for userless login.
|
||||
*
|
||||
* @param request {{string}}
|
||||
* @param response {{string}}
|
||||
* @returns Promise<JSON|ReadableStream>
|
||||
*/
|
||||
async login(request = {}, response = {}) {
|
||||
const optionsResponse = await this.#fetch(request, this.#routes.loginOptions);
|
||||
const json = await optionsResponse.json();
|
||||
const publicKey = this.#parseIncomingServerOptions(json);
|
||||
const credentials = await navigator.credentials.get({publicKey});
|
||||
const publicKeyCredential = this.#parseOutgoingCredentials(credentials);
|
||||
|
||||
Object.assign(publicKeyCredential, response);
|
||||
|
||||
console.log(publicKeyCredential);
|
||||
|
||||
return await this.#fetch(publicKeyCredential, this.#routes.login, response).then(WebAuthn.#handleResponse);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the browser supports WebAuthn.
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static supportsWebAuthn() {
|
||||
return typeof PublicKeyCredential != "undefined";
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the browser doesn't support WebAuthn.
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
static doesntSupportWebAuthn() {
|
||||
return !this.supportsWebAuthn();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user