update webauthn-autenticate.ftl
This commit is contained in:
Joseph Garrone
parent
570fbd5632
commit
5cfb289736
@ -340,6 +340,14 @@ export declare namespace KcContext {
|
||||
displayInfo: boolean;
|
||||
};
|
||||
login: {};
|
||||
realm: {
|
||||
password: boolean;
|
||||
registrationAllowed: boolean;
|
||||
};
|
||||
registrationDisabled?: boolean;
|
||||
url: {
|
||||
registrationUrl?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export namespace WebauthnAuthenticate {
|
||||
@ -347,7 +355,7 @@ export declare namespace KcContext {
|
||||
credentialId: string;
|
||||
transports: {
|
||||
iconClass: string;
|
||||
displayNameProperties: MessageKey[];
|
||||
displayNameProperties?: MessageKey[];
|
||||
};
|
||||
label: string;
|
||||
createdAt: string;
|
||||
|
||||
@ -25,23 +25,19 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
|
||||
<Template
|
||||
{...{ kcContext, i18n, doUseDefaultCss, classes }}
|
||||
displayMessage={!messagesPerField.existsError("username", "password")}
|
||||
displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
|
||||
headerNode={msg("loginAccountTitle")}
|
||||
displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
|
||||
infoNode={
|
||||
<>
|
||||
{realm.password && realm.registrationAllowed && !registrationDisabled && (
|
||||
<div id="kc-registration-container">
|
||||
<div id="kc-registration">
|
||||
<span>
|
||||
{msg("noAccount")}{" "}
|
||||
<a tabIndex={8} href={url.registrationUrl}>
|
||||
{msg("doRegister")}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<div id="kc-registration-container">
|
||||
<div id="kc-registration">
|
||||
<span>
|
||||
{msg("noAccount")}{" "}
|
||||
<a tabIndex={8} href={url.registrationUrl}>
|
||||
{msg("doRegister")}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
socialProvidersNode={
|
||||
<>
|
||||
|
||||
@ -1,204 +1,244 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, Fragment } from "react";
|
||||
import { clsx } from "keycloakify/tools/clsx";
|
||||
import type { MessageKey } from "keycloakify/login/i18n/i18n";
|
||||
import { base64url } from "rfc4648";
|
||||
import { useConstCallback } from "keycloakify/tools/useConstCallback";
|
||||
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
||||
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
|
||||
import { assert } from "tsafe/assert";
|
||||
import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
|
||||
import type { KcContext } from "../kcContext";
|
||||
import type { I18n } from "../i18n";
|
||||
import { assert } from "tsafe/assert";
|
||||
import { is } from "tsafe/is";
|
||||
import { typeGuard } from "tsafe/typeGuard";
|
||||
|
||||
const { useInsertScriptTags } = createUseInsertScriptTags();
|
||||
|
||||
export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
|
||||
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
||||
|
||||
const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
|
||||
|
||||
const { url } = kcContext;
|
||||
const {
|
||||
url,
|
||||
isUserIdentified,
|
||||
challenge,
|
||||
userVerification,
|
||||
rpId,
|
||||
createTimeout,
|
||||
messagesPerField,
|
||||
realm,
|
||||
registrationDisabled,
|
||||
authenticators,
|
||||
shouldDisplayAuthenticators
|
||||
} = kcContext;
|
||||
|
||||
const { msg, msgStr } = i18n;
|
||||
|
||||
const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
|
||||
const createTimeout = Number(kcContext.createTimeout);
|
||||
const isUserIdentified = kcContext.isUserIdentified == "true";
|
||||
const { insertScriptTags } = useInsertScriptTags({
|
||||
"scriptTags": [
|
||||
{
|
||||
"type": "text/javascript",
|
||||
"src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
|
||||
},
|
||||
{
|
||||
"type": "text/javascript",
|
||||
"src": `${url.resourcesPath}/js/base64url.js`
|
||||
},
|
||||
{
|
||||
"type": "text/javascript",
|
||||
"textContent": `
|
||||
|
||||
const formElementRef = useRef<HTMLFormElement>(null);
|
||||
function webAuthnAuthenticate() {
|
||||
let isUserIdentified = ${isUserIdentified};
|
||||
if (!isUserIdentified) {
|
||||
doAuthenticate([]);
|
||||
return;
|
||||
}
|
||||
checkAllowCredentials();
|
||||
}
|
||||
|
||||
const webAuthnAuthenticate = useConstCallback(async () => {
|
||||
if (!isUserIdentified) {
|
||||
return;
|
||||
}
|
||||
function checkAllowCredentials() {
|
||||
let allowCredentials = [];
|
||||
let authn_use = document.forms['authn_select'].authn_use_chk;
|
||||
|
||||
if (authn_use !== undefined) {
|
||||
if (authn_use.length === undefined) {
|
||||
allowCredentials.push({
|
||||
id: base64url.decode(authn_use.value, {loose: true}),
|
||||
type: 'public-key',
|
||||
});
|
||||
} else {
|
||||
for (let i = 0; i < authn_use.length; i++) {
|
||||
allowCredentials.push({
|
||||
id: base64url.decode(authn_use[i].value, {loose: true}),
|
||||
type: 'public-key',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
doAuthenticate(allowCredentials);
|
||||
}
|
||||
|
||||
const submitForm = async (): Promise<void> => {
|
||||
const formElement = formElementRef.current;
|
||||
|
||||
if (formElement === null) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
return submitForm();
|
||||
function doAuthenticate(allowCredentials) {
|
||||
|
||||
// Check if WebAuthn is supported by this browser
|
||||
if (!window.PublicKeyCredential) {
|
||||
$("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
|
||||
$("#webauth").submit();
|
||||
return;
|
||||
}
|
||||
|
||||
let challenge = "${challenge}";
|
||||
let userVerification = "${userVerification}";
|
||||
let rpId = "${rpId}";
|
||||
let publicKey = {
|
||||
rpId : rpId,
|
||||
challenge: base64url.decode(challenge, { loose: true })
|
||||
};
|
||||
|
||||
let createTimeout = ${createTimeout};
|
||||
if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
|
||||
|
||||
if (allowCredentials.length) {
|
||||
publicKey.allowCredentials = allowCredentials;
|
||||
}
|
||||
|
||||
if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
|
||||
|
||||
navigator.credentials.get({publicKey})
|
||||
.then((result) => {
|
||||
window.result = result;
|
||||
|
||||
let clientDataJSON = result.response.clientDataJSON;
|
||||
let authenticatorData = result.response.authenticatorData;
|
||||
let signature = result.response.signature;
|
||||
|
||||
$("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
|
||||
$("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
|
||||
$("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
|
||||
$("#credentialId").val(result.id);
|
||||
if(result.response.userHandle) {
|
||||
$("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
|
||||
}
|
||||
$("#webauth").submit();
|
||||
})
|
||||
.catch((err) => {
|
||||
$("#error").val(err);
|
||||
$("#webauth").submit();
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
`
|
||||
}
|
||||
|
||||
formElement.submit();
|
||||
};
|
||||
|
||||
const allowCredentials = authenticators.authenticators.map(
|
||||
authenticator =>
|
||||
({
|
||||
id: base64url.parse(authenticator.credentialId, { loose: true }),
|
||||
type: "public-key"
|
||||
} as PublicKeyCredentialDescriptor)
|
||||
);
|
||||
// Check if WebAuthn is supported by this browser
|
||||
if (!window.PublicKeyCredential) {
|
||||
setError(msgStr("webauthn-unsupported-browser-text"));
|
||||
submitForm();
|
||||
return;
|
||||
}
|
||||
|
||||
const publicKey: PublicKeyCredentialRequestOptions = {
|
||||
rpId,
|
||||
challenge: base64url.parse(challenge, { loose: true })
|
||||
};
|
||||
|
||||
if (createTimeout !== 0) {
|
||||
publicKey.timeout = createTimeout * 1000;
|
||||
}
|
||||
|
||||
if (allowCredentials.length) {
|
||||
publicKey.allowCredentials = allowCredentials;
|
||||
}
|
||||
|
||||
if (userVerification !== "not specified") {
|
||||
publicKey.userVerification = userVerification;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await navigator.credentials.get({ publicKey });
|
||||
if (!result || result.type != "public-key") {
|
||||
return;
|
||||
}
|
||||
assert(is<PublicKeyCredential>(result));
|
||||
if (!("authenticatorData" in result.response)) {
|
||||
return;
|
||||
}
|
||||
const response = result.response;
|
||||
|
||||
const clientDataJSON = response.clientDataJSON;
|
||||
|
||||
assert(
|
||||
typeGuard<AuthenticatorAssertionResponse>(response, "signature" in response && response.authenticatorData instanceof ArrayBuffer),
|
||||
"response not an AuthenticatorAssertionResponse"
|
||||
);
|
||||
|
||||
const authenticatorData = response.authenticatorData;
|
||||
const signature = response.signature;
|
||||
|
||||
setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { "pad": false }));
|
||||
setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { "pad": false }));
|
||||
setSignature(base64url.stringify(new Uint8Array(signature), { "pad": false }));
|
||||
setCredentialId(result.id);
|
||||
setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { "pad": false }));
|
||||
} catch (err) {
|
||||
setError(String(err));
|
||||
}
|
||||
|
||||
submitForm();
|
||||
]
|
||||
});
|
||||
|
||||
const [clientDataJSON, setClientDataJSON] = useState("");
|
||||
const [authenticatorData, setAuthenticatorData] = useState("");
|
||||
const [signature, setSignature] = useState("");
|
||||
const [credentialId, setCredentialId] = useState("");
|
||||
const [userHandle, setUserHandle] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
useEffect(() => {
|
||||
insertScriptTags();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
|
||||
<Template
|
||||
{...{ kcContext, i18n, doUseDefaultCss, classes }}
|
||||
displayMessage={!messagesPerField.existsError("username")}
|
||||
displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
|
||||
infoNode={
|
||||
<div id="kc-registration">
|
||||
<span>
|
||||
{msg("noAccount")}{" "}
|
||||
<a tabIndex={6} href={url.registrationUrl}>
|
||||
{msg("doRegister")}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
headerNode={msg("webauthn-login-title")}
|
||||
>
|
||||
<div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
|
||||
<form id="webauth" action={url.loginAction} ref={formElementRef} method="post">
|
||||
<input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
|
||||
<input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
|
||||
<input type="hidden" id="signature" name="signature" value={signature} />
|
||||
<input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
|
||||
<input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
|
||||
<input type="hidden" id="error" name="error" value={error} />
|
||||
<form id="webauth" action={url.loginAction} method="post">
|
||||
<input type="hidden" id="clientDataJSON" name="clientDataJSON" />
|
||||
<input type="hidden" id="authenticatorData" name="authenticatorData" />
|
||||
<input type="hidden" id="signature" name="signature" />
|
||||
<input type="hidden" id="credentialId" name="credentialId" />
|
||||
<input type="hidden" id="userHandle" name="userHandle" />
|
||||
<input type="hidden" id="error" name="error" />
|
||||
</form>
|
||||
<div className={getClassName("kcFormGroupClass")}>
|
||||
{authenticators &&
|
||||
(() => (
|
||||
<div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
|
||||
{authenticators && (
|
||||
<>
|
||||
<form id="authn_select" className={getClassName("kcFormClass")}>
|
||||
{authenticators.authenticators.map(authenticator => (
|
||||
<input type="hidden" name="authn_use_chk" value={authenticator.credentialId} key={authenticator.credentialId} />
|
||||
<input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
|
||||
))}
|
||||
</form>
|
||||
))()}
|
||||
{authenticators &&
|
||||
shouldDisplayAuthenticators &&
|
||||
(() => (
|
||||
<>
|
||||
{authenticators.authenticators.length > 1 && (
|
||||
<p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
|
||||
)}
|
||||
<div className={getClassName("kcFormClass")}>
|
||||
{authenticators.authenticators.map(authenticator => (
|
||||
<div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
|
||||
<div className={getClassName("kcSelectAuthListItemIconClass")}>
|
||||
<i
|
||||
className={clsx(
|
||||
(() => {
|
||||
const className = getClassName(authenticator.transports.iconClass as any);
|
||||
return className.includes(" ")
|
||||
? className
|
||||
: [className, getClassName("kcWebAuthnDefaultIcon")];
|
||||
})(),
|
||||
getClassName("kcSelectAuthListItemIconPropertyClass")
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className={getClassName("kcSelectAuthListItemBodyClass")}>
|
||||
<div
|
||||
id="kc-webauthn-authenticator-label"
|
||||
className={getClassName("kcSelectAuthListItemHeadingClass")}
|
||||
>
|
||||
{authenticator.label}
|
||||
</div>
|
||||
|
||||
{authenticator.transports && authenticator.transports.displayNameProperties.length && (
|
||||
<div
|
||||
id="kc-webauthn-authenticator-transport"
|
||||
className={getClassName("kcSelectAuthListItemDescriptionClass")}
|
||||
>
|
||||
{authenticator.transports.displayNameProperties.map(
|
||||
(transport: MessageKey, index: number) => (
|
||||
<>
|
||||
<span>{msg(transport)}</span>
|
||||
{index < authenticator.transports.displayNameProperties.length - 1 && (
|
||||
<span>{", "}</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
{shouldDisplayAuthenticators && (
|
||||
<>
|
||||
{authenticators.authenticators.length > 1 && (
|
||||
<p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
|
||||
)}
|
||||
<div className={getClassName("kcFormOptionsClass")}>
|
||||
{authenticators.authenticators.map((authenticator, i) => (
|
||||
<div key={i} id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
|
||||
<div className={getClassName("kcSelectAuthListItemIconClass")}>
|
||||
<i
|
||||
className={clsx(
|
||||
(() => {
|
||||
const className = getClassName(authenticator.transports.iconClass as any);
|
||||
if (className === authenticator.transports.iconClass) {
|
||||
return getClassName("kcWebAuthnDefaultIcon");
|
||||
}
|
||||
return className;
|
||||
})(),
|
||||
getClassName("kcSelectAuthListItemIconPropertyClass")
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className={getClassName("kcSelectAuthListItemArrowIconClass")}>
|
||||
<div
|
||||
id="kc-webauthn-authenticator-label"
|
||||
className={getClassName("kcSelectAuthListItemHeadingClass")}
|
||||
>
|
||||
{msg(authenticator.label as MessageKey)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
|
||||
<span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
|
||||
<span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
|
||||
{authenticator.transports.displayNameProperties?.length && (
|
||||
<div
|
||||
id="kc-webauthn-authenticator-transport"
|
||||
className={getClassName("kcSelectAuthListItemDescriptionClass")}
|
||||
>
|
||||
{authenticator.transports.displayNameProperties
|
||||
.map((nameProperty, i, arr) => ({ nameProperty, "hasNext": i !== arr.length - 1 }))
|
||||
.map(({ nameProperty, hasNext }) => (
|
||||
<Fragment key={nameProperty}>
|
||||
<span>{msg(nameProperty)}</span>
|
||||
{hasNext && <span>, </span>}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
|
||||
<span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
|
||||
<span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
|
||||
</div>
|
||||
<div className={getClassName("kcSelectAuthListItemFillClass")} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={getClassName("kcSelectAuthListItemFillClass")} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
))()}
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
|
||||
<input
|
||||
id="authenticateWebAuthnButton"
|
||||
type="button"
|
||||
onClick={webAuthnAuthenticate}
|
||||
autoFocus={true}
|
||||
onClick={() => {
|
||||
assert("webAuthnAuthenticate" in window);
|
||||
assert(window.webAuthnAuthenticate instanceof Function);
|
||||
window.webAuthnAuthenticate();
|
||||
}}
|
||||
autoFocus
|
||||
value={msgStr("webauthn-doAuthenticate")}
|
||||
className={clsx(
|
||||
getClassName("kcButtonClass"),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user