Closed aaronpk closed 9 months ago
I hope that the user can customize the public key generated so that the user can customize the time of its rotation and pass it to the navigator.credentials.get function for use. This is what the browser needs to autofill. (https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI)
A workaround for me:
optionsResponse = null;
json = null;
publicKey = null;
publicKeyCredential = null;
async login(request = {}, response = {}, credentials = null) {
if (this.doesntSupportWebAuthn) {
alert('Your browser does not support this feature!');
return;
}
if (this.optionsResponse === null) {
this.prepareLogin({}, {}, false);
}
this.credentials = credentials;
if (this.credentials === null) {
let publicKey = this.publicKey;
this.credentials = await navigator.credentials.get({publicKey});
}
this.publicKeyCredential = this.mdu_parseOutgoingCredentials(this.credentials);
Object.assign(this.publicKeyCredential, response);
console.debug(this.publicKeyCredential);
return await this.mdu_fetch(this.publicKeyCredential, this.mdu_routes.login, response).then(WebAuthn.mdu_handleResponse);
}
async prepareLogin(request = {}, response = {}, wait = true) {
if (this.doesntSupportWebAuthn) {
return;
}
this.optionsResponse = await this.mdu_fetch(request, this.mdu_routes.loginOptions);
this.json = await this.optionsResponse.json();
this.publicKey = this.mdu_parseIncomingServerOptions(this.json);
if (wait) {
if (!PublicKeyCredential.isConditionalMediationAvailable || !PublicKeyCredential.isConditionalMediationAvailable()) {
return;
}
let credentials = await navigator.credentials.get({
mediation: 'conditional',
publicKey: this.publicKey
});
this.login({}, {}, credentials).then(function () {
location.href = '/';
}).catch(error => console.error('Login failed.'));
}
}
They're hard-coded, but you can easily override the function with your own:
/**
* Returns displayable data to be used to create WebAuthn Credentials.
*
* @return array{name: string, displayName: string}
*/
#[ArrayShape(['name' => "string", 'displayName' => "string"])]
public function webAuthnData(): array
{
return [
'name' => $this->username,
'displayName' => "$this->username ($this->email)",
];
}
``
I hope that the user can customize the public key generated so that the user can customize the time of its rotation and pass it to the navigator.credentials.get function for use. This is what the browser needs to autofill. (https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI)
I will look into this once I finish a project.
Added: I rewrote it (webAuthnData) in user model and it works.
Added: I rewrote it (webAuthnData) in user model and it works.
I shall consider this issue as resolved.
Please check these requirements
Description
It would be great if the fields used in the WebAuthn data were configurable instead of being hardcoded to the
email
andname
properties of the user.https://github.com/Laragear/WebAuthn/blob/1.x/src/WebAuthnAuthentication.php#L28
For example, I might want to use the user's
username
instead ofemail
as the visible name of the WebAuthn credential.It should be straightforward to add a configuration option to set these properties.
Code sample