Controllo rilevamento funzionalità API Credential Management

Eiji Kitamura

Riepilogo

WebAuthn contribuisce ad aumentare la sicurezza introducendo lautenticazione basata su credenziali con chiave pubblica sul web e sarà supportata a breve in Chrome, Firefox ed Edge (con la specifica aggiornata). Aggiunge un nuovo tipo di oggetto Credential, che però potrebbe causare il malfunzionamento dei siti web che utilizzano l'API Credential Management senza rilevare i tipi di credenziali specifici in uso.

Se al momento lo stai facendo per il rilevamento delle funzionalità

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

Prova invece a eseguire le seguenti operazioni

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()
}

Come esempio, consulta le modifiche apportate al codice di esempio.

Per saperne di più, continua a leggere quanto segue.

Nota: se utilizzi l'identità Google come metodo principale per l'accesso dei tuoi utenti, ti consigliamo di utilizzare la libreria JavaScript per la registrazione e l'accesso automatico con un solo tocco basata sull'API Credential Management. Combina l'accesso con Google e l'accesso con 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 (CM API) consente ai siti web di accedere in modo programmatico al magazzino delle credenziali dell'agente utente per memorizzare/recuperare le credenziali utente per l'origine della chiamata.

Le API di base sono:

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

La specifica dell'API CM originale 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 utente e una stringa che rappresenta un provider di identità.

Con queste due credenziali, i siti web possono:

• Consenti all'utente di accedere con una credenziale federata o basata su password salvata in precedenza non appena arriva sulla pagina (accesso automatico).
• Memorizza le credenziali federate o basate su password con cui l'utente ha eseguito l'accesso.
• Mantieni aggiornate le credenziali di accesso dell'utente (ad es. dopo la modifica di una password)

Che cos'è WebAuthn

WebAuthn (Web Authentication) aggiunge le credenziali con 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 a FIDO 2.0.

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

Qual è il problema?

In precedenza, abbiamo aiutato gli sviluppatori a rilevare l'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()
}

Come esempio, consulta le modifiche effettive apportate al codice di esempio.

Come riferimento, ecco come rilevare PublicKeyCredential aggiunto in WebAuthn:

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

Cronologia

La prima implementazione disponibile di WebAuthn è Firefox e è prevista per essere stabile all'inizio di maggio 2018.

Finally

Per qualsiasi domanda, inviala a @agektmr o [e-mail].