angemeldete Nutzer

Eiji Kitamura

Meggin Kearney

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 auf der obersten Seite, sondern auch auf anderen Blattseiten. Dies ist nützlich, wenn Nutzer auf verschiedene Seiten Ihrer Website gelangen, über eine Suchmaschine.

So aktivieren Sie die automatische Anmeldung:

1. Anmeldedaten abrufen
2. Authentifizieren Sie den Nutzer.
3. 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 ihr 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:

1. Anmeldedaten abrufen und Kontoauswahl anzeigen
2. Authentifizieren Sie den Nutzer.
3. 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() anrufen. 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

Dank 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:

1. Authentifizieren Sie den Nutzer mit der Identität eines Drittanbieters.
2. Speichern Sie die Identitätsinformationen.
3. 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 spezifischen Authentifizierungsvorgang des 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:

• Google Log-in
• Facebook-Anmeldung
• Twitter-Anmeldung
• GitHub-OAuth

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.

Feedback