Überprüfung der Funktionserkennung der Credential Management API

Eiji Kitamura

Zusammenfassung

WebAuthn trägt zur Erhöhung der Sicherheit bei, indem es die Authentifizierung auf Basis von Anmeldedaten mit öffentlichem Schlüssel ins Web bringt. Es wird bald in Chrome, Firefox und Edge unterstützt (mit der aktualisierten Spezifikation). Es wird ein neuer Typ von Credential-Objekt hinzugefügt, was jedoch zu Problemen auf Websites führen kann, die die Credential Management API verwenden, ohne die spezifischen verwendeten Arten von Anmeldedaten zu erkennen.

Wenn Sie dies derzeit für die Feature-Erkennung tun,

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

Stattdessen ausprobieren

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 Änderungen am Beispielcode an.

Lesen Sie weiter, um zusätzliche Informationen zu erhalten!

Hinweis : Wenn Sie Google Identity als primäre Methode für die Anmeldung Ihrer Nutzer verwenden, sollten Sie die JavaScript-Bibliothek für die Registrierung mit One-Tap und die automatische Anmeldung verwenden, die auf der Credential Management API basiert. Sie kombiniert die Anmeldung über Google und die passwortbasierte Anmeldung in einem API-Aufruf und unterstützt die Kontoerstellung mit nur einem Tippen.

Was ist die Credential Management API?

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

Grundlegende APIs sind:

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

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

• PasswordCredential
• FederatedCredential

PasswordCredential sind Anmeldedaten, die die ID und das Passwort des Nutzers enthalten. Der FederatedCredential ist ein Berechtigungsnachweis, der die ID des Nutzers und einen String enthält, der einen Identitätsanbieter darstellt.

Mit diesen beiden Arten von Anmeldedaten können Websites Folgendes tun:

• Nutzer können sich mit zuvor gespeicherten passwortbasierten oder föderierten Anmeldedaten anmelden, sobald sie auf der Seite landen (automatische Anmeldung).
• Speichere die passwortbasierten oder föderierten Anmeldedaten, mit denen sich der Nutzer angemeldet hat.
• Anmeldedaten des Nutzers auf dem neuesten Stand halten (z.B. nach einer Passwortänderung)

Was ist WebAuthn?

WebAuthn (Web Authentication) fügt der CM API Anmeldedaten mit öffentlichem Schlüssel hinzu. So bietet sie Websites beispielsweise eine standardisierte Möglichkeit, die Zwei-Faktor-Authentifizierung mit FIDO 2.0-konformen Authentifizierungsgeräten zu implementieren.

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

Was ist das Problem?

Bisher haben wir Entwicklern empfohlen, die CM API mit dem folgenden Code zu erkennen:

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 browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >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 an.

Hier ist ein Beispiel dafür, wie du PublicKeyCredential in WebAuthn erkennen kannst:

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

Zeitplan

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

Finally

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