Authentifizierung über Yahoo! mit JavaScript

Sie können Ihre Nutzer über OAuth-Anbieter wie Yahoo mit Firebase authentifizieren, indem Sie mit dem Firebase SDK eine generische OAuth-Anmeldung in Ihre App einbinden, um den End-to-End-Anmeldevorgang durchzuführen.

Hinweis

Wenn Sie Nutzer mit Yahoo-Konten anmelden möchten, müssen Sie zuerst Yahoo als Anmeldeanbieter für Ihr Firebase-Projekt aktivieren:

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Öffnen Sie in der Firebase Console den Bereich Auth.
  3. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter Yahoo.
  4. Fügen Sie die Client-ID und das Client-Secret aus der Entwicklerkonsole des Anbieters zur Anbieterkonfiguration hinzu:

    1. Wenn Sie einen Yahoo OAuth-Client registrieren möchten, folgen Sie der Dokumentation für Yahoo-Entwickler zum Registrieren einer Webanwendung bei Yahoo.

      Wählen Sie die beiden OpenID Connect API-Berechtigungen profile und email aus.

    2. Wenn Sie Apps bei diesen Anbietern registrieren, müssen Sie die *.firebaseapp.com-Domain für Ihr Projekt als Weiterleitungsdomain für Ihre App registrieren.
  5. Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Webanwendung entwickeln, ist die einfachste Möglichkeit, Ihre Nutzer mit Firebase über ihre Yahoo-Konten zu authentifizieren, den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK zu verarbeiten.

So verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz eines OAuthProvider mit der Anbieter-ID yahoo.com.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    yahoo-oauth.js

  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die mit der OAuth-Anfrage gesendet werden sollen.

    Web

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    auth_yahoo_provider_params.js

    Web

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    yahoo-oauth.js

    Informationen zu den von Yahoo unterstützten Parametern finden Sie in der Yahoo OAuth-Dokumentation. Hinweis: Sie können keine für Firebase erforderlichen Parameter mit setCustomParameters() übergeben. Diese Parameter sind client_id, redirect_uri, response_type, scope und state.

  3. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie zusätzlich zu profile und email vom Authentifizierungsanbieter anfordern möchten. Wenn Ihre Anwendung Zugriff auf private Nutzerdaten von Yahoo APIs benötigt, müssen Sie in der Yahoo Developer Console unter API-Berechtigungen Berechtigungen für Yahoo APIs anfordern. Die angeforderten OAuth-Bereiche müssen genau mit den in den API-Berechtigungen der App vorkonfigurierten Bereichen übereinstimmen. Wenn beispielsweise Lese-/Schreibzugriff auf Nutzerkontakte angefordert und in den API-Berechtigungen der App vorkonfiguriert wird, muss sdct-w anstelle des OAuth-Bereichs „Lesezugriff“ sdct-r übergeben werden. Andernfalls schlägt der Ablauf fehl und dem Endnutzer wird eine Fehlermeldung angezeigt.

    Web

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    auth_yahoo_provider_scopes.js

    Web

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    yahoo-oauth.js

    Weitere Informationen finden Sie in der Dokumentation zu Yahoo-Bereichen.

  4. Authentifizierung mit Firebase über das OAuth-Anbieterobjekt Du kannst Nutzer auffordern, sich mit ihren Yahoo-Konten anzumelden. Dazu kannst du ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.

    • Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie signInWithPopup:

      Web

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      auth_yahoo_signin_popup.js

      Web

      firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    const credential = result.credential;

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      yahoo-oauth.js

    • Rufen Sie signInWithRedirect auf, um sich anzumelden und zur Anmeldeseite weitergeleitet zu werden:

    Beachten Sie die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden. 

      firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer die Anmeldung abgeschlossen und zur Seite zurückgekehrt ist, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult abrufen.

    Web

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    yahoo-oauth.js

    Nach Abschluss können das OAuth-ID-Token und das Zugriffstoken, die mit dem Anbieter verknüpft sind, aus dem zurückgegebenen firebase.auth.UserCredential-Objekt abgerufen werden.

    Mit dem OAuth-Zugriffstoken kannst du die Yahoo API aufrufen.

    Wenn Sie beispielsweise die grundlegenden Profilinformationen abrufen möchten, können Sie die folgende REST API aufrufen:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

    Dabei ist YAHOO_USER_UID die ID des Yahoo-Nutzers, die aus dem Feld firebase.auth().currentUser.providerData[0].uid oder aus result.additionalUserInfo.profile abgerufen werden kann.

  5. In den obigen Beispielen liegt der Schwerpunkt auf den Anmeldeabläufen. Sie können aber auch einen Yahoo-Anbieter über linkWithPopup/linkWithRedirect mit einem vorhandenen Nutzer verknüpfen. So können Sie beispielsweise mehrere Anbieter mit demselben Nutzer verknüpfen, damit er sich mit jedem anmelden kann.

    Web

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_yahoo_link_popup.js

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

  6. Dasselbe Muster kann mit reauthenticateWithPopup/reauthenticateWithRedirect verwendet werden, um aktuelle Anmeldedaten für sensible Vorgänge abzurufen, für die eine aktuelle Anmeldung erforderlich ist.

    Web

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_yahoo_reauth_popup.js

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

In einer Chrome-Erweiterung mit Firebase authentifizieren

Wenn Sie eine Chrome-Erweiterung entwickeln, lesen Sie den Leitfaden zu Offscreen-Dokumenten.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.

  • In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das Auth-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js