${downloadFileHeader}
${downloadFileDescription}
${downloadFileDate} ${date}
`; + + const printWindow = window.open(); + + if (printWindow) { + printWindow.document.write(content); + printWindow.print(); + printWindow.close(); + } + }, + }; + }); +}); diff --git a/src/data/webAuthnAuthenticate.ts b/src/data/webAuthnAuthenticate.ts new file mode 100644 index 0000000..5b95f0a --- /dev/null +++ b/src/data/webAuthnAuthenticate.ts @@ -0,0 +1,145 @@ +import Alpine from 'alpinejs'; +import { base64url } from 'rfc4648'; + +type DataType = { + $refs: RefsType; + $store: StoreType; +}; + +type RefsType = { + authenticatorDataInput: HTMLInputElement; + authnSelectForm: HTMLFormElement; + clientDataJSONInput: HTMLInputElement; + credentialIdInput: HTMLInputElement; + errorInput: HTMLInputElement; + signatureInput: HTMLInputElement; + userHandleInput: HTMLInputElement; + webAuthnForm: HTMLFormElement; +}; + +type StoreType = { + webAuthnAuthenticate: { + challenge: string; + createTimeout: string; + isUserIdentified: string; + rpId: string; + unsupportedBrowserText: string; + userVerification: UserVerificationRequirement | 'not specified'; + }; +}; + +document.addEventListener('alpine:init', () => { + Alpine.data('webAuthnAuthenticate', function (this: DataType) { + const { + authenticatorDataInput, + authnSelectForm, + clientDataJSONInput, + credentialIdInput, + errorInput, + signatureInput, + userHandleInput, + webAuthnForm, + } = this.$refs; + const { + challenge, + createTimeout, + isUserIdentified, + rpId, + unsupportedBrowserText, + userVerification, + } = this.$store.webAuthnAuthenticate; + + const doAuthenticate = (allowCredentials: PublicKeyCredentialDescriptor[]) => { + if (!window.PublicKeyCredential) { + errorInput.value = unsupportedBrowserText; + webAuthnForm.submit(); + + return; + } + + const publicKey: PublicKeyCredentialRequestOptions = { + challenge: base64url.parse(challenge, { loose: true }), + rpId: rpId, + }; + + if (allowCredentials.length) { + publicKey.allowCredentials = allowCredentials; + } + + if (parseInt(createTimeout) !== 0) publicKey.timeout = parseInt(createTimeout) * 1000; + + if (userVerification !== 'not specified') publicKey.userVerification = userVerification; + + navigator.credentials + .get({ publicKey }) + .then((result) => { + if ( + result instanceof PublicKeyCredential && + result.response instanceof AuthenticatorAssertionResponse + ) { + window.result = result; + + authenticatorDataInput.value = base64url.stringify( + new Uint8Array(result.response.authenticatorData), + { pad: false } + ); + + clientDataJSONInput.value = base64url.stringify( + new Uint8Array(result.response.clientDataJSON), + { pad: false } + ); + + signatureInput.value = base64url.stringify(new Uint8Array(result.response.signature), { + pad: false, + }); + + credentialIdInput.value = result.id; + + if (result.response.userHandle) { + userHandleInput.value = base64url.stringify( + new Uint8Array(result.response.userHandle), + { pad: false } + ); + } + + webAuthnForm.submit(); + } + }) + .catch((error) => { + errorInput.value = error; + webAuthnForm.submit(); + }); + }; + + const checkAllowCredentials = () => { + const allowCredentials: PublicKeyCredentialDescriptor[] = []; + + const authnSelectFormElements = Array.from(authnSelectForm.elements); + + if (authnSelectFormElements.length) { + authnSelectFormElements.forEach((element) => { + if (element instanceof HTMLInputElement) { + allowCredentials.push({ + id: base64url.parse(element.value, { loose: true }), + type: 'public-key', + }); + } + }); + } + + doAuthenticate(allowCredentials); + }; + + return { + webAuthnAuthenticate: () => { + if (!isUserIdentified) { + doAuthenticate([]); + + return; + } + + checkAllowCredentials(); + }, + }; + }); +}); diff --git a/src/data/webAuthnRegister.ts b/src/data/webAuthnRegister.ts new file mode 100644 index 0000000..23744df --- /dev/null +++ b/src/data/webAuthnRegister.ts @@ -0,0 +1,225 @@ +import Alpine from 'alpinejs'; +import { base64url } from 'rfc4648'; + +type DataType = { + $refs: RefsType; + $store: StoreType; +}; + +type RefsType = { + attestationObjectInput: HTMLInputElement; + authenticatorLabelInput: HTMLInputElement; + clientDataJSONInput: HTMLInputElement; + errorInput: HTMLInputElement; + publicKeyCredentialIdInput: HTMLInputElement; + registerForm: HTMLFormElement; + transportsInput: HTMLInputElement; +}; + +type StoreType = { + webAuthnRegister: { + attestationConveyancePreference: AttestationConveyancePreference | 'not specified'; + authenticatorAttachment: AuthenticatorAttachment | 'not specified'; + challenge: string; + createTimeout: string; + excludeCredentialIds: string; + requireResidentKey: string; + rpEntityName: string; + rpId: string; + signatureAlgorithms: string; + unsupportedBrowserText: string; + userId: string; + userVerificationRequirement: UserVerificationRequirement | 'not specified'; + username: string; + }; +}; + +document.addEventListener('alpine:init', () => { + Alpine.data('webAuthnRegister', function (this: DataType) { + const { + attestationObjectInput, + authenticatorLabelInput, + clientDataJSONInput, + errorInput, + publicKeyCredentialIdInput, + registerForm, + transportsInput, + } = this.$refs; + const { + attestationConveyancePreference, + authenticatorAttachment, + challenge, + createTimeout, + excludeCredentialIds, + requireResidentKey, + rpEntityName, + rpId, + signatureAlgorithms, + unsupportedBrowserText, + userId, + userVerificationRequirement, + username, + } = this.$store.webAuthnRegister; + + const getPubKeyCredParams = (signatureAlgorithms: string) => { + const pubKeyCredParams: PublicKeyCredentialParameters[] = []; + + if (signatureAlgorithms === '') { + pubKeyCredParams.push({ alg: -7, type: 'public-key' }); + + return pubKeyCredParams; + } + + const signatureAlgorithmsList = signatureAlgorithms.split(','); + + signatureAlgorithmsList.forEach((value) => { + pubKeyCredParams.push({ + alg: parseInt(value), + type: 'public-key', + }); + }); + + return pubKeyCredParams; + }; + + const getExcludeCredentials = (excludeCredentialIds: string) => { + const excludeCredentials: PublicKeyCredentialDescriptor[] = []; + + if (excludeCredentialIds === '') return excludeCredentials; + + const excludeCredentialIdsList = excludeCredentialIds.split(','); + + excludeCredentialIdsList.forEach((value) => { + excludeCredentials.push({ + id: base64url.parse(value, { loose: true }), + type: 'public-key', + }); + }); + + return excludeCredentials; + }; + + const getTransportsAsString = (transportsList: string | string[]) => { + if (transportsList === '' || transportsList.constructor !== Array) return ''; + + let transportsString = ''; + + transportsList.forEach((value) => { + transportsString += value + ','; + }); + + return transportsString.slice(0, -1); + }; + + return { + registerSecurityKey: () => { + if (!window.PublicKeyCredential) { + errorInput.value = unsupportedBrowserText; + registerForm.submit(); + + return; + } + + const publicKey: PublicKeyCredentialCreationOptions = { + challenge: base64url.parse(challenge, { loose: true }), + pubKeyCredParams: getPubKeyCredParams(signatureAlgorithms), + rp: { + id: rpId, + name: rpEntityName, + }, + user: { + displayName: username, + id: base64url.parse(userId, { loose: true }), + name: username, + }, + }; + + if (attestationConveyancePreference !== 'not specified') + publicKey.attestation = attestationConveyancePreference; + + const authenticatorSelection: AuthenticatorSelectionCriteria = {}; + let isAuthenticatorSelectionSpecified = false; + + if (authenticatorAttachment !== 'not specified') { + authenticatorSelection.authenticatorAttachment = authenticatorAttachment; + isAuthenticatorSelectionSpecified = true; + } + + if (requireResidentKey !== 'not specified') { + if (requireResidentKey === 'Yes') authenticatorSelection.requireResidentKey = true; + else authenticatorSelection.requireResidentKey = false; + isAuthenticatorSelectionSpecified = true; + } + + if (userVerificationRequirement !== 'not specified') { + authenticatorSelection.userVerification = userVerificationRequirement; + isAuthenticatorSelectionSpecified = true; + } + + if (isAuthenticatorSelectionSpecified) + publicKey.authenticatorSelection = authenticatorSelection; + + const excludeCredentials = getExcludeCredentials(excludeCredentialIds); + if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials; + + if (parseInt(createTimeout) !== 0) publicKey.timeout = parseInt(createTimeout) * 1000; + + navigator.credentials + .create({ publicKey }) + .then((result) => { + if ( + result instanceof PublicKeyCredential && + result.response instanceof AuthenticatorAttestationResponse + ) { + const { getTransports } = result.response; + + window.result = result; + + const publicKeyCredentialId = result.rawId; + + attestationObjectInput.value = base64url.stringify( + new Uint8Array(result.response.attestationObject), + { pad: false } + ); + + clientDataJSONInput.value = base64url.stringify( + new Uint8Array(result.response.clientDataJSON), + { pad: false } + ); + + publicKeyCredentialIdInput.value = base64url.stringify( + new Uint8Array(publicKeyCredentialId), + { pad: false } + ); + + if (typeof getTransports === 'function') { + const transports = getTransports(); + + if (transports) { + transportsInput.value = getTransportsAsString(transports); + } + } else { + console.log( + 'Your browser is not able to recognize supported transport media for the authenticator.' + ); + } + + const initLabel = 'WebAuthn Authenticator (Default Label)'; + let labelResult = window.prompt( + "Please input your registered authenticator's label", + initLabel + ); + if (labelResult === null) labelResult = initLabel; + + authenticatorLabelInput.value = labelResult; + registerForm.submit(); + } + }) + .catch(function (error) { + error.value = error; + registerForm.submit(); + }); + }, + }; + }); +}); diff --git a/src/global.d.ts b/src/global.d.ts index bbf6664..a858d3e 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -3,5 +3,6 @@ import type { Alpine } from 'alpinejs'; declare global { interface Window { Alpine: Alpine; + result?: PublicKeyCredential; } } diff --git a/theme/keywind/login/components/molecules/username.ftl b/theme/keywind/login/components/molecules/username.ftl index 0c373cb..ba63393 100644 --- a/theme/keywind/login/components/molecules/username.ftl +++ b/theme/keywind/login/components/molecules/username.ftl @@ -3,7 +3,7 @@ <#macro kw linkHref="" linkTitle="" name="">${msg("loginTotpManualStep2")}
-${totp.totpSecretEncoded}
+${totp.totpSecretEncoded}
${msg("recovery-code-config-warning-message")}
+