Um Nutzer anzumelden, rufen Sie die Anmeldedaten aus dem Passwortmanager des Browsers ab und verwenden Sie diese, um Nutzer automatisch anzumelden. Nutzer mit mehreren Konten können das Konto mit nur einem Tippen über die Kontoauswahl auswählen.
Automatisch anmelden
Die automatische Anmeldung kann überall auf deiner Website erfolgen, nicht nur auf der obersten, sondern auch auf anderen Blattseiten. Dies ist nützlich, wenn Nutzer über eine Suchmaschine verschiedene Seiten Ihrer Website aufrufen.
So aktivieren Sie die automatische Anmeldung:
- Anmeldedateninformationen abrufen.
- Authentifizieren Sie den Nutzer.
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie die personalisierte Seite auf.
Anmeldedaten abrufen
Rufen Sie navigator.credentials.get() auf, um Informationen zu Anmeldedaten abzurufen.
Geben Sie den Typ der angeforderten Anmeldedaten an. Dazu geben Sie password oder federated an.
Verwenden Sie für automatische Anmeldungen immer mediation: 'silent', damit Sie den Vorgang in den folgenden Fällen einfach abbrechen können:
- Es sind keine Anmeldedaten gespeichert.
- Es sind mehrere Anmeldedaten gespeichert.
- Wenn der Nutzer abgemeldet ist.
Bevor du Anmeldedaten erhältst, solltest du prüfen, ob der Nutzer bereits angemeldet ist:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
Das von navigator.credentials.get() zurückgegebene Promise wird entweder mit einem Anmeldedatenobjekt oder null aufgelöst.
Um zu ermitteln, ob es sich um PasswordCredential oder FederatedCredential handelt, sehen Sie sich einfach das Attribut .type des Objekts an – entweder password oder federated.
Wenn .type den Wert federated hat, ist das Attribut .provider ein String, der den Identitätsanbieter darstellt.
Nutzer authentifizieren
Sobald Sie die Anmeldedaten haben, führen Sie je nach Art der Anmeldedaten, password oder federated, einen Authentifizierungsvorgang aus:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Wenn das Promise aufgelöst wird, solltest du prüfen, ob du ein Anmeldedatenobjekt erhalten hast. Andernfalls ist eine automatische Anmeldung nicht möglich. Die automatische Anmeldung wird automatisch abgelehnt.
UI aktualisieren
Wenn die Authentifizierung erfolgreich ist, aktualisieren Sie die Benutzeroberfläche oder leiten Sie den Nutzer zur personalisierten Seite weiter:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Vergiss nicht, die Fehlermeldung zur Authentifizierung anzuzeigen
Um Verwirrung bei den Nutzern zu vermeiden, sollte beim Abrufen des Berechtigungsobjekts ein blauer Toast mit dem Hinweis „Anmeldung“ angezeigt werden:
Wichtiger Tipp: Wenn Sie ein Anmeldedatenobjekt abrufen können, den Nutzer aber nicht authentifizieren können, wird eine Fehlermeldung angezeigt:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Vollständiges Codebeispiel
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
showError('Sign-in Failed');
});
}
}
Über die Kontoauswahl anmelden
Wenn ein Nutzer eine Vermittlung benötigt oder mehrere Konten hat, verwenden Sie die Kontoauswahl, damit sich der Nutzer anmelden kann. Überspringen Sie dabei das gewöhnliche Anmeldeformular. Beispiel:
Die Schritte für die Anmeldung über die Kontoauswahl sind die gleichen wie bei der automatischen Anmeldung, mit einem zusätzlichen Aufruf, um die Kontoauswahl beim Abrufen von Anmeldedateninformationen anzuzeigen:
- Rufen Sie die Anmeldedaten ab und zeigen Sie die Kontoauswahl an.
- Nutzer authentifizieren
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie eine personalisierte Seite auf.
Anmeldedaten abrufen und Kontoauswahl anzeigen
Kontoauswahl als Reaktion auf eine festgelegte Nutzeraktion einblenden, z. B. wenn der Nutzer auf die Schaltfläche „Anmelden“ tippt. Rufen Sie navigator.credentials.get() auf und fügen Sie mediation: 'optional' oder mediation: 'required' hinzu, um die Kontoauswahl aufzurufen.
Wenn mediation den Wert required hat, wird dem Nutzer immer eine Kontoauswahl zur Anmeldung angezeigt.
Mit dieser Option können Nutzer mit mehreren Konten ganz einfach zwischen ihnen wechseln.
Wenn mediation den Wert optional hat, wird dem Nutzer nach einem navigator.credentials.preventSilentAccess()-Aufruf explizit eine Kontoauswahl angezeigt.
Damit wird normalerweise verhindert, dass sich der Nutzer automatisch anmeldet, nachdem er sich ab- oder abgemeldet hat.
Beispiel für die Darstellung von mediation: 'optional':
var signin = document.querySelector('#signin');
signin.addEventListener('click', e => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials.get({
password: true,
federated: {
providers: [
'https://accounts.google.com'
]
},
mediation: 'optional'
}).then(c => {
Sobald der Nutzer ein Konto ausgewählt hat, wird das Promise mit den Anmeldedaten aufgelöst.
Wenn die Nutzer die Kontoauswahl abbrechen oder keine Anmeldedaten gespeichert sind, wird das Promise mit null aufgelöst.
Verwenden Sie in diesem Fall das Anmeldeformular.
Vergessen Sie nicht, auf das Anmeldeformular zurückzugreifen
Aus folgenden Gründen solltest du auf ein Anmeldeformular zurückgreifen:
- Es sind keine Anmeldedaten gespeichert.
- Der Nutzer hat die Kontoauswahl geschlossen, ohne ein Konto auszuwählen.
- Die API ist nicht verfügbar.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Vollständiges Codebeispiel
var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'optional',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
})
.catch((error) => {
location.href = '/signin';
});
}
});
Föderierte Anmeldung
Mit der föderierten Anmeldung können sich Nutzer mit nur einmal tippen anmelden, ohne sich zusätzliche Anmeldedaten für Ihre Website merken zu müssen.
So implementieren Sie die föderierte Anmeldung:
- Authentifizieren Sie den Nutzer mit der Identität eines Drittanbieters.
- Speichern Sie die Informationen zur Identität.
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie eine personalisierte Seite auf (wie bei der automatischen Anmeldung).
Nutzer mit Drittanbieteridentität authentifizieren
Wenn ein Nutzer auf eine Schaltfläche für die föderierte Anmeldung tippt, führen Sie mit FederatedCredential den spezifischen Authentifizierungsvorgang des Identitätsanbieters aus.
Wenn der Anbieter beispielsweise Google ist, verwende die JavaScript-Bibliothek für Google Log-in:
navigator.credentials
.get({
password: true,
mediation: 'optional',
federated: {
providers: ['https://account.google.com'],
},
})
.then(function (cred) {
if (cred) {
// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();
// Is this user already signed in?
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
// Same user as in the credential object?
if (googleUser.getBasicProfile().getEmail() === cred.id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || '',
});
}
});
Google Log-in führt zu einem ID-Token als Authentifizierungsnachweis.
Im Allgemeinen basieren föderierte Anmeldungen auf Standardprotokollen wie OpenID Connect oder OAuth. Informationen zum Authentifizieren bei föderierten Konten finden Sie in der Dokumentation der jeweiligen Anbieter föderierter Identität. Beliebte Beispiele:
Informationen zur Identität speichern
Sobald die Authentifizierung abgeschlossen ist, können Sie die Informationen zur Identität speichern.
Hier speichern Sie die id des Identitätsanbieters und einen Anbieterstring, der den Identitätsanbieter darstellt. name und iconURL sind optional.
Weitere Informationen zu diesen Informationen finden Sie in der Spezifikation zur Anmeldedatenverwaltung.
Instanziieren Sie zum Speichern föderierter Konten ein neues FederatedCredential-Objekt mit der Nutzer-ID und der Anbieter-ID.
Rufen Sie dann navigator.credentials.store() auf, um die Identitätsinformationen zu speichern.
Nach erfolgreicher Föderation müssen Sie einen FederatedCredential synchron oder asynchron instanziieren:
Beispiel für einen synchronen Ansatz:
// Create credential object synchronously.
var cred = new FederatedCredential({
id: id, // id in IdP
provider: 'https://account.google.com', // A string representing IdP
name: name, // name in IdP
iconURL: iconUrl, // Profile image url
});
Beispiel für einen asynchronen Ansatz:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Speichern Sie dann das Anmeldedatenobjekt:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Abmelden
Nutzer abmelden, wenn auf die Schaltfläche „Abmelden“ getippt wird Beenden Sie zuerst die Sitzung und deaktivieren Sie dann die automatische Anmeldung für zukünftige Besuche. (Wie Sie Ihre Sitzungen beenden, liegt ganz bei Ihnen.)
Automatische Anmeldung für zukünftige Besuche deaktivieren
navigator.credentials.preventSilentAccess() aufrufen:
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Dadurch wird sichergestellt, dass die automatische Anmeldung erst erfolgt, wenn der Nutzer das nächste Mal die automatische Anmeldung aktiviert. Um die automatische Anmeldung fortzusetzen, kann ein Nutzer sich absichtlich anmelden, indem er das Konto, mit dem er sich anmelden möchte, in der Kontoauswahl auswählt. Der Nutzer ist dann immer wieder angemeldet, bis er sich explizit abmeldet.