Implementa le passkey con la compilazione automatica dei moduli in un'app web

// TODO: Add an ability to create a passkey: Create the registerCredential() function. export async function registerCredential() {    // TODO: Add an ability to create a passkey: Obtain the challenge and other options from the server endpoint.    // TODO: Add an ability to create a passkey: Create a credential.    // TODO: Add an ability to create a passkey: Register the credential to the server endpoint.  }; 

// TODO: Add an ability to create a passkey: Obtain the challenge and other options from the server endpoint. const options = await _fetch('/auth/registerRequest'); 

{   challenge: *****,   rp: {     id: "example.com",   },   user: {     id: *****,     name: "john78",     displayName: "John",   },     pubKeyCredParams: [{     alg: -7, type: "public-key"   },{     alg: -257, type: "public-key"   }],   excludeCredentials: [{     id: *****,     type: 'public-key',     transports: ['internal', 'hybrid'],   }],   authenticatorSelection: {     authenticatorAttachment: "platform",     requireResidentKey: true,   } } 

// TODO: Add an ability to create a passkey: Create a credential. // Base64URL decode some values. options.user.id = base64url.decode(options.user.id); options.challenge = base64url.decode(options.challenge);  if (options.excludeCredentials) {   for (let cred of options.excludeCredentials) {     cred.id = base64url.decode(cred.id);   } } 

// Use platform authenticator and discoverable credential. options.authenticatorSelection = {   authenticatorAttachment: 'platform',   requireResidentKey: true } 

// Invoke the WebAuthn create() method. const cred = await navigator.credentials.create({   publicKey: options, }); 

{   "id": *****,   "rawId": *****,   "type": "public-key",   "response": {     "clientDataJSON": *****,     "attestationObject": *****,     "transports": ["internal", "hybrid"]   },   "authenticatorAttachment": "platform" } 

// TODO: Add an ability to create a passkey: Register the credential to the server endpoint. const credential = {}; credential.id = cred.id; credential.rawId = cred.id; // Pass a Base64URL encoded ID string. credential.type = cred.type;  // The authenticatorAttachment string in the PublicKeyCredential object is a new addition in WebAuthn L3. if (cred.authenticatorAttachment) {   credential.authenticatorAttachment = cred.authenticatorAttachment; }  // Base64URL encode some values. const clientDataJSON = base64url.encode(cred.response.clientDataJSON); const attestationObject = base64url.encode(cred.response.attestationObject);  // Obtain transports. const transports = cred.response.getTransports ? cred.response.getTransports() : [];  credential.response = {   clientDataJSON,   attestationObject,   transports }; 

return await _fetch('/auth/registerResponse', credential); 

// TODO: Add an ability to create a passkey: Create the registerCredential() function. export async function registerCredential() {    // TODO: Add an ability to create a passkey: Obtain the challenge and other options from server endpoint.   const options = await _fetch('/auth/registerRequest');      // TODO: Add an ability to create a passkey: Create a credential.   // Base64URL decode some values.    options.user.id = base64url.decode(options.user.id);   options.challenge = base64url.decode(options.challenge);    if (options.excludeCredentials) {     for (let cred of options.excludeCredentials) {       cred.id = base64url.decode(cred.id);     }   }    // Use platform authenticator and discoverable credential.   options.authenticatorSelection = {     authenticatorAttachment: 'platform',     requireResidentKey: true   }    // Invoke the WebAuthn create() method.   const cred = await navigator.credentials.create({     publicKey: options,   });    // TODO: Add an ability to create a passkey: Register the credential to the server endpoint.   const credential = {};   credential.id = cred.id;   credential.rawId = cred.id; // Pass a Base64URL encoded ID string.   credential.type = cred.type;    // The authenticatorAttachment string in the PublicKeyCredential object is a new addition in WebAuthn L3.   if (cred.authenticatorAttachment) {     credential.authenticatorAttachment = cred.authenticatorAttachment;   }    // Base64URL encode some values.   const clientDataJSON = base64url.encode(cred.response.clientDataJSON);   const attestationObject =     base64url.encode(cred.response.attestationObject);    // Obtain transports.   const transports = cred.response.getTransports ?    cred.response.getTransports() : [];    credential.response = {     clientDataJSON,     attestationObject,     transports   };    return await _fetch('/auth/registerResponse', credential); }; 

​​<!-- TODO: Add an ability to create a passkey: Add placeholder HTML. --> <section>   <h3 class="mdc-typography mdc-typography--headline6"> Your registered    passkeys:</h3>   <div id="list"></div> </section> <p id="message" class="instructions"></p> <mwc-button id="create-passkey" class="hidden" icon="fingerprint" raised>Create a passkey</mwc-button> 

// TODO: Add an ability to create a passkey: Check for passkey support. const createPasskey = $('#create-passkey'); // Feature detections if (window.PublicKeyCredential &&     PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&     PublicKeyCredential.isConditionalMediationAvailable) { 

try {   const results = await Promise.all([      // Is platform authenticator available in this browser?     PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),      // Is conditional UI available in this browser?     PublicKeyCredential.isConditionalMediationAvailable()   ]); 

    if (results.every(r => r === true)) {        // If conditional UI is available, reveal the Create a passkey button.       createPasskey.classList.remove('hidden');     } else {        // If conditional UI isn't available, show a message.       $('#message').innerText = 'This device does not support passkeys.';     }   } catch (e) {     console.error(e);   } } else {    // If WebAuthn isn't available, show a message.   $('#message').innerText = 'This device does not support passkeys.'; } 

// TODO: Add an ability to create a passkey: Render registered passkeys in a list. async function renderCredentials() {   const res = await _fetch('/auth/getKeys');   const list = $('#list');   const creds = html`${res.length > 0 ? html`     <mwc-list>       ${res.map(cred => html`         <mwc-list-item>           <div class="list-item">             <div class="entity-name">               <span>${cred.name || 'Unnamed' }</span>           </div>           <div class="buttons">             <mwc-icon-button data-cred-id="${cred.id}"               data-name="${cred.name || 'Unnamed' }" @click="${rename}"               icon="edit"></mwc-icon-button>             <mwc-icon-button data-cred-id="${cred.id}" @click="${remove}"              icon="delete"></mwc-icon-button>           </div>          </div>       </mwc-list-item>`)}   </mwc-list>` : html`   <mwc-list>     <mwc-list-item>No credentials found.</mwc-list-item>   </mwc-list>`}`;   render(creds, list); }; 

renderCredentials(); 

import {    $,    _fetch,    loading,    updateCredential,    unregisterCredential,  } from '/client.js'; 

// TODO: Add an ability to create a passkey: Create and register a passkey. import {   $,   _fetch,   loading,   updateCredential,   unregisterCredential,   registerCredential } from '/client.js'; 

// TODO: Add an ability to create a passkey: Create and register a passkey. async function register() {   try {      // Start the loading UI.     loading.start();      // Start creating a passkey.     await registerCredential();      // Stop the loading UI.     loading.stop();      // Render the updated passkey list.     renderCredentials(); 

  } catch (e) {      // Stop the loading UI.     loading.stop();      // An InvalidStateError indicates that a passkey already exists on the device.     if (e.name === 'InvalidStateError') {       alert('A passkey already exists for this device.');      // A NotAllowedError indicates that the user canceled the operation.     } else if (e.name === 'NotAllowedError') {       Return;      // Show other errors in an alert.     } else {       alert(e.message);       console.error(e);     }   } }; 

createPasskey.addEventListener('click', register); 

​​<!-- TODO: Add an ability to create a passkey: Add placeholder HTML. --> <section>   <h3 class="mdc-typography mdc-typography--headline6"> Your registered     passkeys:</h3>   <div id="list"></div> </section> <p id="message" class="instructions"></p> <mwc-button id="create-passkey" class="hidden" icon="fingerprint" raised>Create a passkey</mwc-button> 

// TODO: Add an ability to create a passkey: Create and register a passkey. import {    $,    _fetch,    loading,    updateCredential,    unregisterCredential,    registerCredential  } from '/client.js'; 

// TODO: Add an ability to create a passkey: Check for passkey support. const createPasskey = $('#create-passkey');  // Feature detections if (window.PublicKeyCredential &&     PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&     PublicKeyCredential.isConditionalMediationAvailable) {   try {     const results = await Promise.all([        // Is platform authenticator available in this browser?       PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),        // Is conditional UI available in this browser?       PublicKeyCredential.isConditionalMediationAvailable()     ]);     if (results.every(r => r === true)) {        // If conditional UI is available, reveal the Create a passkey button.       createPasskey.classList.remove('hidden');     } else {        // If conditional UI isn't available, show a message.       $('#message').innerText = 'This device does not support passkeys.';     }   } catch (e) {     console.error(e);   } } else {    // If WebAuthn isn't available, show a message.   $('#message').innerText = 'This device does not support passkeys.'; }  // TODO: Add an ability to create a passkey: Render registered passkeys in a list. async function renderCredentials() {   const res = await _fetch('/auth/getKeys');   const list = $('#list');   const creds = html`${res.length > 0 ? html`   <mwc-list>     ${res.map(cred => html`       <mwc-list-item>         <div class="list-item">           <div class="entity-name">             <span>${cred.name || 'Unnamed' }</span>           </div>           <div class="buttons">             <mwc-icon-button data-cred-id="${cred.id}" data-name="${cred.name || 'Unnamed' }" @click="${rename}" icon="edit"></mwc-icon-button>             <mwc-icon-button data-cred-id="${cred.id}" @click="${remove}" icon="delete"></mwc-icon-button>           </div>         </div>       </mwc-list-item>`)}   </mwc-list>` : html`   <mwc-list>     <mwc-list-item>No credentials found.</mwc-list-item>   </mwc-list>`}`;   render(creds, list); };  renderCredentials();  // TODO: Add an ability to create a passkey: Create and register a passkey. async function register() {   try {      // Start the loading UI.     loading.start();      // Start creating a passkey.     await registerCredential();      // Stop the loading UI.     loading.stop();      // Render the updated passkey list.     renderCredentials();   } catch (e) {      // Stop the loading UI.     loading.stop();      // An InvalidStateError indicates that a passkey already exists on the device.     if (e.name === 'InvalidStateError') {       alert('A passkey already exists for this device.');      // A NotAllowedError indicates that the user canceled the operation.     } else if (e.name === 'NotAllowedError') {       Return;      // Show other errors in an alert.     } else {       alert(e.message);       console.error(e);     }   } };  createPasskey.addEventListener('click', register); 

// TODO: Add an ability to authenticate with a passkey: Create the authenticate() function. export async function authenticate() {    // TODO: Add an ability to authenticate with a passkey: Obtain the challenge and other options from the server endpoint.    // TODO: Add an ability to authenticate with a passkey: Locally verify the user and get a credential.    // TODO: Add an ability to authenticate with a passkey: Verify the credential.  }; 

// TODO: Add an ability to authenticate with a passkey: Obtain the challenge and other options from the server endpoint. const options = await _fetch('/auth/signinRequest'); 

{   "challenge": *****,   "rpId": "passkeys-codelab.glitch.me",   "allowCredentials": [] } 

// TODO: Add an ability to authenticate with a passkey: Locally verify the user and get a credential. // Base64URL decode the challenge. options.challenge = base64url.decode(options.challenge); 

// An empty allowCredentials array invokes an account selector by discoverable credentials. options.allowCredentials = []; 

// Invoke the WebAuthn get() method. const cred = await navigator.credentials.get({   publicKey: options,    // Request a conditional UI.   mediation: 'conditional' }); 

{   "id": *****,   "rawId": *****,   "type": "public-key",   "response": {     "clientDataJSON": *****,     "authenticatorData": *****,     "signature": *****,     "userHandle": *****   },   authenticatorAttachment: "platform" } 

// TODO: Add an ability to authenticate with a passkey: Verify the credential. const credential = {}; credential.id = cred.id; credential.rawId = cred.id; // Pass a Base64URL encoded ID string. credential.type = cred.type;  // Base64URL encode some values. const clientDataJSON = base64url.encode(cred.response.clientDataJSON); const authenticatorData = base64url.encode(cred.response.authenticatorData); const signature = base64url.encode(cred.response.signature); const userHandle = base64url.encode(cred.response.userHandle);  credential.response = {   clientDataJSON,   authenticatorData,   signature,   userHandle, }; 

return await _fetch(`/auth/signinResponse`, credential); 

// TODO: Add an ability to authenticate with a passkey: Create the authenticate() function. export async function authenticate() {    // TODO: Add an ability to authenticate with a passkey: Obtain the    challenge and other options from the server endpoint.   const options = await _fetch('/auth/signinRequest');    // TODO: Add an ability to authenticate with a passkey: Locally verify    the user and get a credential.   // Base64URL decode the challenge.   options.challenge = base64url.decode(options.challenge);    // The empty allowCredentials array invokes an account selector    by discoverable credentials.   options.allowCredentials = [];    // Invoke the WebAuthn get() function.   const cred = await navigator.credentials.get({     publicKey: options,      // Request a conditional UI.     mediation: 'conditional'   });    // TODO: Add an ability to authenticate with a passkey: Verify the credential.   const credential = {};   credential.id = cred.id;   credential.rawId = cred.id; // Pass a Base64URL encoded ID string.   credential.type = cred.type;    // Base64URL encode some values.   const clientDataJSON = base64url.encode(cred.response.clientDataJSON);   const authenticatorData =    base64url.encode(cred.response.authenticatorData);   const signature = base64url.encode(cred.response.signature);   const userHandle = base64url.encode(cred.response.userHandle);    credential.response = {     clientDataJSON,     authenticatorData,     signature,     userHandle,   };    return await _fetch(`/auth/signinResponse`, credential); }; 

<!-- TODO: Add passkeys to the browser autofill: Enable conditional UI. --> <input   type="text"   id="username"   class="mdc-text-field__input"   aria-labelledby="username-label"   name="username"   autocomplete="username webauthn"   autofocus /> 

// TODO: Add passkeys to the browser autofill: Detect features, invoke WebAuthn, and enable a conditional UI. import {   $,   _fetch,   loading,   authenticate  } from "/client.js"; 

// TODO: Add passkeys to the browser autofill: Detect features, invoke WebAuthn, and enable a conditional UI. if (   window.PublicKeyCredential &&   PublicKeyCredential.isConditionalMediationAvailable ) {   try {      // Is conditional UI available in this browser?     const cma =       await PublicKeyCredential.isConditionalMediationAvailable();     if (cma) {        // If conditional UI is available, invoke the authenticate() function.       const user = await authenticate();       if (user) {          // Proceed only when authentication succeeds.         $("#username").value = user.username;         loading.start();         location.href = "/home";       } else {         throw new Error("User not found.");       }     }   } catch (e) {     loading.stop();      // A NotAllowedError indicates that the user canceled the operation.     if (e.name !== "NotAllowedError") {       console.error(e);       alert(e.message);     }   } } 

<!-- TODO: Add passkeys to the browser autofill: Enable conditional UI. --> <input   type="text"   id="username"   class="mdc-text-field__input"   aria-labelledby="username-label"   name="username"   autocomplete="username webauthn"   autofocus  /> 

// TODO: Add passkeys to the browser autofill: Detect features, invoke WebAuthn, and enable a conditional UI. import {    $,    _fetch,    loading,    authenticate  } from '/client.js'; 

// TODO: Add passkeys to the browser autofill: Detect features, invoke WebAuthn, and enable a conditional UI.         // Is WebAuthn avaiable in this browser? if (window.PublicKeyCredential &&     PublicKeyCredential.isConditionalMediationAvailable) {   try {      // Is a conditional UI available in this browser?     const cma= await PublicKeyCredential.isConditionalMediationAvailable();     if (cma) {        // If a conditional UI is available, invoke the authenticate() function.       const user = await authenticate();       if (user) {          // Proceed only when authentication succeeds.         $('#username').value = user.username;         loading.start();         location.href = '/home';       } else {         throw new Error('User not found.');       }     }   } catch (e) {     loading.stop();      // A NotAllowedError indicates that the user canceled the operation.     if (e.name !== 'NotAllowedError') {       console.error(e);       alert(e.message);     }   } }