Rufen Sie zum Anmelden von Nutzern die Anmeldedaten aus dem Passwortmanager des Browsers ab und verwenden Sie diese, um Nutzer automatisch anzumelden. Nutzer mit mehreren Konten sollten über die Kontoauswahl mit nur einem Tippen das gewünschte Konto auswählen können.
Automatische Anmeldung
Die automatische Anmeldung kann überall auf Ihrer Website erfolgen, nicht nur auf der obersten Seite, sondern auch auf anderen Blattseiten. Das ist nützlich, wenn Nutzer über eine Suchmaschine verschiedene Seiten Ihrer Website aufrufen.
So aktivieren Sie die automatische Anmeldung:
- Anmeldedaten 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 Anmeldedaten abzurufen.
Geben Sie den Typ der angeforderten Anmeldedaten an. Geben Sie dazu password
oder federated
an.
Verwenden Sie immer mediation: 'silent'
für automatische Anmeldungen, damit Sie den Vorgang in folgenden Fällen einfach beenden können:
- Es sind keine Anmeldedaten gespeichert.
- Es sind mehrere Anmeldedaten gespeichert.
- Sie sind abgemeldet.
Bevor du Anmeldedaten abrufen kannst, 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 Versprechen wird entweder mit einem Anmeldedatenobjekt oder null
aufgelöst.
Ob es sich um ein PasswordCredential
- oder ein FederatedCredential
-Objekt handelt, sehen Sie an der .type
-Eigenschaft des Objekts. Diese ist entweder password
oder federated
.
Wenn .type
= federated
ist, ist die Property .provider
ein String, der den Identitätsanbieter darstellt.
Nutzer authentifizieren
Führen Sie nach Erhalt der Anmeldedaten je nach Anmeldedatentyp password
oder federated
einen Authentifizierungsablauf aus:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Prüfe nach, ob du ein Anmeldedatenobjekt erhalten hast. Andernfalls konnte die automatische Anmeldung nicht erfolgen. Die automatische Anmeldung wird ohne Benachrichtigung beendet.
Benutzeroberfläche aktualisieren
Wenn die Authentifizierung erfolgreich war, aktualisiere die Benutzeroberfläche oder leite den Nutzer zur personalisierten Seite weiter:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Vergessen Sie nicht, die Authentifizierungsfehlermeldung anzuzeigen
Um Verwirrung zu vermeiden, sollte beim Abrufen des Anmeldeobjekts eine blaue Benachrichtigung mit dem Text „Anmelden“ angezeigt werden:
Wichtiger Hinweis: Wenn Sie ein Anmeldedatenobjekt abrufen können, die Authentifizierung des Nutzers aber fehlschlägt, sollten Sie eine Fehlermeldung anzeigen:
}).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, kannst du ihn über die Kontoauswahl anmelden und das normale Anmeldeformular überspringen. Beispiel:
Die Schritte zur Anmeldung über die Kontoauswahl sind dieselben wie bei der automatischen Anmeldung, mit einem zusätzlichen Aufruf, um die Kontoauswahl im Rahmen der Abruf von Anmeldedaten anzuzeigen:
- Rufe die Anmeldedaten ab und zeige die Kontoauswahl an.
- Authentifizieren Sie den Nutzer.
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie eine personalisierte Seite auf.
Anmeldedaten abrufen und Kontoauswahl anzeigen
Eine Kontoauswahl als Reaktion auf eine definierte Nutzeraktion anzeigen, 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 die Kontoauswahl angezeigt, um sich anzumelden.
Mit dieser Option können Nutzer mit mehreren Konten ganz einfach zwischen ihnen wechseln.
Wenn mediation
= optional
ist, wird dem Nutzer nach einem navigator.credentials.preventSilentAccess()
-Aufruf explizit eine Kontoauswahl angezeigt, über die er sich anmelden kann.
Normalerweise soll damit verhindert werden, dass eine automatische Anmeldung erfolgt, nachdem sich der Nutzer abgemeldet oder abgemeldet hat.
Beispiel für 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 der Nutzer die Kontoauswahl bricht oder keine Anmeldedaten gespeichert werden, wird das Promise mit null
aufgelöst.
In diesem Fall solltest du zum Anmeldeformular zurückkehren.
Vergessen Sie nicht, auf das Anmeldeformular zurückzugreifen
Sie sollten aus einem der folgenden Gründe auf ein Anmeldeformular zurückgreifen:
- Es werden 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';
});
}
});
Anmeldung im Verbund
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 einer Drittanbieter-Identität.
- Speichern Sie die Identitätsinformationen.
- Die Benutzeroberfläche aktualisieren oder zu einer personalisierten Seite weitergeleitet werden (wie bei der automatischen Anmeldung).
Nutzer mit Drittanbieter-Identität authentifizieren
Wenn ein Nutzer auf eine Schaltfläche für die Anmeldung über eine föderierte Identität tippt, führen Sie den Authentifizierungsablauf des jeweiligen Identitätsanbieters mit FederatedCredential
aus.
Wenn der Anbieter beispielsweise Google ist, verwenden Sie die JavaScript-Bibliothek für Google Sign-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 zur Authentifizierung mit föderierten Konten finden Sie in der Dokumentation des jeweiligen Anbieters föderierter Identität. Beispiele:
Informationen zur Identität des Händlers
Nach der Authentifizierung können Sie die Identitätsinformationen speichern.
Hier speichern Sie die id
des Identitätsanbieters und einen Anbieterstring, der den Identitätsanbieter darstellt. name
und iconURL
sind optional.
Weitere Informationen finden Sie in der Spezifikation für die Anmeldedatenverwaltung.
Instanziieren Sie zum Speichern von Details zu föderierten Konten ein neues FederatedCredential
-Objekt mit der Nutzer-ID und der Anbieter-ID.
Rufe dann navigator.credentials.store()
auf, um die Identitätsinformationen zu speichern.
Instanziieren Sie nach erfolgreicher Föderation ein FederatedCredential
synchron oder asynchron:
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 werden abgemeldet, 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, bleibt Ihnen überlassen.
Automatische Anmeldung für zukünftige Besuche deaktivieren
Rufen Sie navigator.credentials.preventSilentAccess()
auf:
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
So wird sichergestellt, dass die automatische Anmeldung erst erfolgt, wenn der Nutzer die Funktion das nächste Mal aktiviert. Wenn ein Nutzer die automatische Anmeldung fortsetzen möchte, kann er sich manuell anmelden, indem er in der Kontoauswahl das Konto auswählt, mit dem er sich anmelden möchte. Dann ist der Nutzer immer wieder angemeldet, bis er sich ausdrücklich abmeldet.