Controllo rilevamento funzionalità API Credential Management

Eiji Kitamura

Riepilogo

WebAuthn aiuta ad aumentare la sicurezza portando sul web l'autenticazione basata su credenziali a chiave pubblica e sarà presto supportato in Chrome, Firefox ed Edge (con le specifiche aggiornate). Aggiunge un nuovo tipo di oggetto Credential, che, tuttavia, potrebbe danneggiare i siti web che utilizzano l'API Credential Management senza rilevare le funzionalità specifiche in uso.

Se stai svolgendo questa operazione per il rilevamento delle funzionalità

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Segui questa procedura

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Guarda le modifiche apportate al codice di esempio come esempio.

Continua a leggere per saperne di più.

Nota: se utilizzi l'identità Google come metodo principale per accedere agli utenti, valuta la possibilità di utilizzare la libreria JavaScript Registrazione con un tocco e accesso automatico integrata nell'API Credential Management. Combina l'accesso Google e quello basato su password in un'unica chiamata API e aggiunge il supporto per la creazione di account con un solo tocco.

Che cos'è l'API Credential Management

L'API Credential Management (API CM) fornisce ai siti web l'accesso programmatico all'archivio di credenziali dello user agent per l'archiviazione/il recupero delle credenziali utente per l'origine chiamante.

Le API di base sono:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

La specifica originale dell'API CM definisce due tipi di credenziali:

• PasswordCredential
• FederatedCredential

PasswordCredential è una credenziale che contiene l'ID e la password dell'utente. FederatedCredential è una credenziale che contiene l'ID dell'utente e una stringa che rappresenta un provider di identità.

Con queste due credenziali, i siti web possono:

• Consentire all'utente di accedere con una password basata su password o su una credenziale federata salvata in precedenza (accesso automatico),
• Archiviare le credenziali basate su password o federate con cui l'utente ha eseguito l'accesso.
• Mantieni aggiornate le credenziali di accesso dell'utente (ad es. dopo una modifica della password)

Che cos'è WebAuthn

WebAuthn (autenticazione web) aggiunge credenziali di chiave pubblica all'API CM. Ad esempio, offre ai siti web un modo standardizzato per implementare l'autenticazione a due fattori utilizzando dispositivi di autenticazione conformi allo standard FIDO 2.0.

A livello tecnico, WebAuthn estende l'API CM con l'interfaccia PublicKeyCredential.

Qual è il problema?

In precedenza abbiamo indicato agli sviluppatori il rilevamento delle funzionalità dell'API CM con il seguente codice:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Visualizza le modifiche effettive apportate al codice campione a titolo di esempio.

Come riferimento, ecco come rilevare l'elemento PublicKeyCredential aggiunto in WebAuthn:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Sequenza

La prima implementazione disponibile di WebAuthn è Firefox e prevediamo che sarà stabile intorno all'inizio di maggio 2018.

Finally

In caso di domande, inviale a @agektmr o [e-mail].