Authentifizieren Sie sich mit Yahoo mit JavaScript

Sie können Ihren Benutzern ermöglichen, sich bei Firebase mit OAuth-Anbietern wie Yahoo zu authentifizieren, indem Sie die generische OAuth-Anmeldung mithilfe des Firebase SDK in Ihre App integrieren, um den End-to-End-Anmeldeablauf durchzuführen.

Bevor Sie beginnen

Um Benutzer mit Yahoo-Konten anzumelden, müssen Sie zunächst Yahoo als Anmeldeanbieter für Ihr Firebase-Projekt aktivieren:

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu .
  2. Öffnen Sie in der Firebase-Konsole den Abschnitt Auth .
  3. Aktivieren Sie auf der Registerkarte Anmeldemethode den Yahoo- Anbieter.
  4. Fügen Sie die Client-ID und das Client-Geheimnis aus der Entwicklerkonsole dieses Anbieters zur Anbieterkonfiguration hinzu:
    1. Um einen Yahoo-OAuth-Client zu registrieren, befolgen Sie die Yahoo-Entwicklerdokumentation zum Registrieren einer Webanwendung bei Yahoo .

      Stellen Sie sicher, dass Sie die beiden OpenID Connect-API-Berechtigungen auswählen: profile und E- email .

    2. Achten Sie beim Registrieren von Apps bei diesen Anbietern darauf, die Domäne *.firebaseapp.com für Ihr Projekt als Umleitungsdomäne für Ihre App zu registrieren.
  5. Klicken Sie auf Speichern .

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Benutzer am einfachsten mit ihren Yahoo-Konten bei Firebase authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase-JavaScript-SDK abwickeln.

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu verarbeiten:

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. Optional : Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anforderung senden möchten.

    Web version 9

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

    Web version 8

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

    Informationen zu den von Yahoo unterstützten Parametern finden Sie in der Yahoo OAuth-Dokumentation . Beachten Sie, dass Sie für Firebase erforderliche Parameter nicht mit setCustomParameters() können. Diese Parameter sind client_id , relay_uri , response_type , scope und state .

  3. Optional : Geben Sie zusätzliche OAuth 2.0-Bereiche neben profile und E- email an, die Sie vom Authentifizierungsanbieter anfordern möchten. Wenn Ihre Anwendung Zugriff auf private Benutzerdaten von Yahoo-APIs erfordert, müssen Sie in der Yahoo-Entwicklerkonsole unter API -Berechtigungen Berechtigungen für Yahoo-APIs anfordern. Angeforderte OAuth-Bereiche müssen genau mit den vorkonfigurierten in den API-Berechtigungen der App übereinstimmen. Wenn beispielsweise Lese-/Schreibzugriff auf Benutzerkontakte angefordert und in den API-Berechtigungen der App vorkonfiguriert wird, muss sdct-w anstelle des schreibgeschützten OAuth-Bereichs sdct-r werden. Andernfalls schlägt der Flow fehl und dem Endbenutzer wird ein Fehler angezeigt.

    Web version 9

    // 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');

    Web version 8

    // 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');

    Weitere Informationen finden Sie in der Yahoo-Scopes-Dokumentation .

  4. Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts. Sie können Ihre Benutzer auffordern, sich mit ihren Yahoo-Konten anzumelden, indem Sie entweder ein Popup-Fenster öffnen oder auf die Anmeldeseite umleiten. Die Umleitungsmethode wird auf Mobilgeräten bevorzugt.

    • Um sich mit einem Popup-Fenster anzumelden, rufen signInWithPopup :

      Web version 9

      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.
        });

      Web version 8

      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.
        });
    • Um sich durch Umleitung zur Anmeldeseite anzumelden, rufen signInWithRedirect :

      firebase.auth().signInWithRedirect(provider);
      

      Nachdem der Benutzer die Anmeldung abgeschlossen hat und zur Seite zurückgekehrt ist, können Sie das Anmeldeergebnis abrufen, indem getRedirectResult aufrufen.

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);

    Nach erfolgreichem Abschluss können das dem Anbieter zugeordnete OAuth-ID-Token und Zugriffstoken aus dem zurückgegebenen Objekt firebase.auth.UserCredential abgerufen werden.

    Mit dem OAuth-Zugriffstoken können Sie die Yahoo-API aufrufen.

    Um beispielsweise die grundlegenden Profilinformationen abzurufen, kann die folgende REST-API aufgerufen werden:

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

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

  5. Während sich die obigen Beispiele auf Anmeldeabläufe konzentrieren, haben Sie auch die Möglichkeit, einen Yahoo-Anbieter mit einem vorhandenen Benutzer zu verknüpfen, indem linkWithPopup / linkWithRedirect . Beispielsweise können Sie mehrere Anbieter mit demselben Benutzer verknüpfen, sodass er sich bei beiden anmelden kann.

    Web version 9

    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.
        });

    Web version 8

    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.
        });
  6. Dasselbe Muster kann mit reauthenticateWithPopup / reauthenticateWithRedirect verwendet werden, mit dem neue Anmeldeinformationen für vertrauliche Vorgänge abgerufen werden können, die eine kürzlich erfolgte Anmeldung erfordern.

    Web version 9

    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.
        });

    Web version 8

    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.
        });

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

Wenn Sie eine Chrome-Erweiterungs-App erstellen, müssen Sie Ihre Chrome-Erweiterungs-ID hinzufügen:

  1. Öffnen Sie Ihr Projekt in der Firebase-Konsole .
  2. Öffnen Sie im Abschnitt Authentifizierung die Seite Anmeldemethode .
  3. Fügen Sie der Liste der autorisierten Domänen einen URI wie den folgenden hinzu:
    chrome-extension://CHROME_EXTENSION_ID

Für Chrome-Erweiterungen sind nur Popup-Vorgänge ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) verfügbar, da Chrome-Erweiterungen keine HTTP-Weiterleitungen verwenden können. Sie sollten diese Methoden von einem Hintergrundseitenskript und nicht von einem Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup-Methoden dürfen nur in Erweiterungen mit Manifest V2 verwendet werden. Das neuere Manifest V3 erlaubt nur Hintergrundskripte in Form von Service Workern, die die Popup-Operationen gar nicht durchführen können.

Stellen Sie in der Manifestdatei Ihrer Chrome-Erweiterung sicher, dass Sie die URL https://apis.google.com zur Zulassungsliste content_security_policy hinzufügen.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen verknüpft – d. h. dem Benutzernamen und Kennwort, der Telefonnummer oder den Authentifizierungsanbieterinformationen –, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Apps besteht die empfohlene Möglichkeit, den Authentifizierungsstatus Ihres Benutzers zu erfahren, darin, einen Beobachter für das Auth festzulegen. Sie können dann die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .

  • In Ihren Sicherheitsregeln für die Firebase-Echtzeitdatenbank und den Cloud-Speicher können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der Variablen auth und damit steuern, auf welche Daten ein Benutzer zugreifen kann.

Sie können Benutzern erlauben, sich mit mehreren Authentifizierungsanbietern bei Ihrer App anzumelden, indem Sie die Anmeldeinformationen des Authentifizierungsanbieters mit einem vorhandenen Benutzerkonto verknüpfen.

Um einen Benutzer abzumelden, rufen signOut :

Web version 9

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

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

Web version 8

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