Wenn Sie Nutzer anmelden möchten, rufen Sie die Anmeldedaten aus dem Browserpasswort ab und diese zur automatischen Anmeldung von Nutzern verwenden. Bei Nutzern mit mehreren Konten und kann das Konto mit nur einmal tippen über die Kontoauswahl auswählen.
Automatisch anmelden
Die automatische Anmeldung kann überall auf Ihrer Website erfolgen. nicht nur die oberste Seite, sondern auch andere Blattseiten. Dies ist nützlich, wenn Nutzer auf verschiedene Seiten Ihrer Website gelangen, über eine Suchmaschine.
So aktivieren Sie die automatische Anmeldung:
- Anmeldedaten abrufen
- Authentifizieren Sie den Nutzer.
- Aktualisieren Sie die Benutzeroberfläche oder gehen Sie zur personalisierten Seite.
Anmeldedaten abrufen
Um Anmeldedaten abzurufen, rufen Sie
navigator.credentials.get()
Geben Sie den Typ der anzufordernden Anmeldedaten an
indem Sie password oder federated zuweisen.
Für automatische Anmeldungen immer mediation: 'silent' verwenden
So können Sie den Vorgang in folgenden Fällen einfach abbrechen:
- Es sind keine Anmeldedaten gespeichert.
- Es sind mehrere Anmeldedaten gespeichert.
- nicht angemeldet ist.
Bevor Sie ein Ausweisdokument erhalten, Vergessen Sie nicht zu 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 aufgelöst
mit einem Berechtigungsnachweisobjekt oder null.
So ermitteln Sie, ob es sich um PasswordCredential oder FederatedCredential handelt:
sehen Sie sich einfach die .type-Eigenschaft des Objekts an,
entweder password oder federated.
Wenn .type federated ist,
Das Attribut .provider ist ein String, der den Identitätsanbieter darstellt.
Nutzer authentifizieren
Sobald Sie das Ausweisdokument haben,
einen Authentifizierungsvorgang abhängig
vom Anmeldedatentyp ausführen,
password oder federated:
}).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 Versprechen aufgelöst ist, Prüfen Sie, ob Sie ein Berechtigungsnachweisobjekt erhalten haben. Andernfalls konnte die automatische Anmeldung nicht durchgeführt werden. Automatische Anmeldung stillschweigend beenden.
UI aktualisieren
Ist die Authentifizierung erfolgreich, Aktualisieren Sie die Benutzeroberfläche oder leiten Sie den Nutzer auf die personalisierte Seite weiter:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Vergessen Sie nicht, die Authentifizierungsfehlermeldung anzuzeigen
Um Verwirrung bei den Nutzenden zu vermeiden, wird ein blauer Toast mit der Meldung „Anmelden“ angezeigt. zum Zeitpunkt des Abrufens des Berechtigungsnachweisobjekts:
Wichtiger Tipp: Wenn Sie ein Berechtigungsnachweisobjekt erhalten aber den Nutzer nicht authentifizieren kann, sollte eine Fehlermeldung angezeigt werden:
}).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 Kontoauswahl anmelden
Wenn ein Nutzer die Vermittlung benötigt oder mehrere Konten hat, die Kontoauswahl verwenden, damit sich der Nutzer anmelden kann, das normale Anmeldeformular überspringen, zum Beispiel:
Die Schritte zur Anmeldung über die Kontoauswahl sind dieselben wie in automatische Anmeldung um die Kontoauswahl anzuzeigen. im Rahmen des Abrufens von Anmeldedaten:
- Anmeldedaten abrufen und Kontoauswahl anzeigen
- Authentifizieren Sie den Nutzer.
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie eine personalisierte Seite auf.
Anmeldedaten abrufen und Kontoauswahl anzeigen
Kontoauswahl als Reaktion auf eine definierte Nutzeraktion anzeigen
Beispiel: Der Nutzer tippt auf die Schaltfläche „Anmelden“. Schaltfläche. Anruf
navigator.credentials.get(),
und fügen Sie mediation: 'optional' oder mediation: 'required' hinzu, damit die Kontoauswahl angezeigt wird.
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 den Wert optional hat,
Dem Nutzer wird explizit eine Kontoauswahl angezeigt, über die er sich anmelden kann, nachdem er
navigator.credentials.preventSilentAccess()
aufrufen.
Dies geschieht normalerweise, um eine automatische Anmeldung zu verhindern.
nachdem der Nutzer sich ab- 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,
das Versprechen mit dem Berechtigungsnachweis aufgelöst wird.
Wenn Nutzer die Kontoauswahl abbrechen,
oder keine Anmeldedaten gespeichert sind,
wird das Versprechen mit null aufgelöst.
Nutzen Sie in diesem Fall das Anmeldeformular.
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 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 Identitätsinformationen.
- Aktualisieren Sie die Benutzeroberfläche oder rufen Sie eine personalisierte Seite auf (wie bei der automatischen Anmeldung).
Nutzer mit der Identität eines Drittanbieters authentifizieren
Wenn Nutzende auf eine
föderierte Anmeldeschaltfläche tippen,
den Authentifizierungsvorgang des jeweiligen Identitätsanbieters mit der
FederatedCredential
Handelt es sich bei dem Anbieter beispielsweise um Google, verwenden Sie das Google Log-in-JavaScript-Bibliothek:
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 als Authentifizierungsnachweis ein ID-Token aus.
Im Allgemeinen basieren föderierte Anmeldungen auf Standardprotokollen wie OpenID Connect oder OAuth. Weitere Informationen zur Authentifizierung bei föderierten Konten Weitere Informationen finden Sie in der Dokumentation. Beliebte Beispiele:
Identitätsinformationen speichern
Sobald die Authentifizierung abgeschlossen ist, können Sie die Identitätsinformationen speichern.
Die hier gespeicherten Informationen sind 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 der Anmeldedatenverwaltung
Instanziieren Sie zum Speichern von föderierten Kontodetails ein neues
FederatedCredential
-Objekt mit der Nutzer- und der Anbieter-ID.
Rufen Sie dann
navigator.credentials.store()
zum Speichern der Identitätsinformationen.
Nach erfolgreicher Föderation
Instanziieren Sie 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
Melden Sie Ihre Nutzer ab, wenn Sie auf die Abmeldeschaltfläche tippen. Beenden Sie zuerst die Sitzung, und deaktiviere die automatische Anmeldung für zukünftige Besuche. Wie Sie Ihre Sitzungen beenden, bleibt Ihnen überlassen.
Automatische Anmeldung für zukünftige Besuche deaktivieren
Anruf
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Dadurch wird sichergestellt, dass die automatische Anmeldung erst dann erfolgt, wenn der Nutzer die automatische Anmeldung das nächste Mal aktiviert. Damit die automatische Anmeldung fortgesetzt werden kann, kann der Nutzer sich auch bewusst 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.