Prüfung der Funktionserkennung der Credential Management API

Eiji Kitamura

Zusammenfassung

WebAuthn erhöht die Sicherheit, indem es eine auf Anmeldedaten mit öffentlichem Schlüssel basierende Authentifizierung im Web bereitstellt. Es wird demnächst in Chrome, Firefox und Edge unterstützt (mit der aktualisierten Spezifikation). Es wird eine neue Art von Credential-Objekt hinzugefügt, das jedoch Websites beeinträchtigt, die die Credential Management API verwenden, ohne die von ihnen verwendeten spezifischen Anmeldedatentypen zu erkennen.

Wenn Sie das derzeit für die Funktionserkennung tun

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

Stattdessen diese Schritte ausführen

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

Der Änderungen am Beispielcode dient als Beispiel.

Lesen Sie weiter, um mehr zu erfahren.

Hinweis : Wenn Sie die Google-Identität als primäre Methode zur Anmeldung für Ihre Nutzer verwenden, sollten Sie die JavaScript-Bibliothek für Registrierung mit einmaligem Tippen und automatische Anmeldung verwenden, die auf der Credential Management API basiert. Die Google-Anmeldung und die passwortbasierte Anmeldung werden in einem API-Aufruf kombiniert. Außerdem wird die Erstellung von Konten mit nur einem Tippen unterstützt.

Was ist die Credential Management API?

Die Credential Management API (CM API) ermöglicht Websites programmatischen Zugriff auf den Anmeldedatenspeicher des User-Agents, um Nutzeranmeldedaten für den aufrufenden Ursprung zu speichern/abrufen.

Grundlegende APIs:

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

In der ursprünglichen CM API-Spezifikation sind zwei Arten von Anmeldedaten definiert:

• PasswordCredential
• FederatedCredential

Die PasswordCredential sind Anmeldedaten, die die ID und das Passwort des Nutzers enthalten. Das FederatedCredential ist ein Ausweisdokument, das die Nutzer-ID und einen String enthält, der einen Identitätsanbieter darstellt.

Mit diesen beiden Anmeldedaten können Websites Folgendes:

• Nutzern die Anmeldung mit zuvor gespeicherten passwortbasierten oder föderierten Anmeldedaten ermöglichen, sobald sie landen (automatische Anmeldung)
• Passwortbasierte oder föderierte Anmeldedaten speichern, mit denen sich der Nutzer angemeldet hat
• Halten Sie die Anmeldedaten des Nutzers auf dem neuesten Stand, z. B. nach einer Passwortänderung.

Was ist WebAuthn?

WebAuthn (Webauthentifizierung) fügt der CM API Anmeldedaten mit öffentlichem Schlüssel hinzu. Websites erhalten beispielsweise eine standardisierte Möglichkeit, die Zwei-Faktor-Authentifizierung mit FIDO 2.0-konformen Authenticator-Geräten zu implementieren.

Auf technischer Ebene erweitert WebAuthn die CM API um die PublicKeyCredential-Schnittstelle.

Was ist das Problem?

Bisher haben wir Entwicklern gezeigt, wie sie die CM API mit folgendem Code erkennen können:

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

Sehen Sie sich die tatsächlichen Änderungen am Beispielcode als Beispiel an.

So erkennen Sie PublicKeyCredential, die in WebAuthn hinzugefügt wurden:

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

Zeitplan

Die früheste verfügbare Implementierung von WebAuthn ist Firefox. Die Anwendung soll ab Anfang Mai 2018 stabil sein.

Finally

Wenn Sie Fragen haben, senden Sie sie an @agektmr [e-mail].