Authentifizieren Sie sich mit Yahoo mit JavaScript

Sie können Ihren Benutzern die Authentifizierung bei Firebase mithilfe von OAuth-Anbietern wie Yahoo ermöglichen, indem Sie die generische OAuth-Anmeldung mithilfe des Firebase SDK in Ihre App integrieren, um den End-to-End-Anmeldevorgang 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 Firebase zu Ihrem JavaScript-Projekt 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 von der Entwicklerkonsole dieses Anbieters zur Anbieterkonfiguration hinzu:

   1. Um einen Yahoo OAuth-Client zu registrieren, folgen Sie der Yahoo-Entwicklerdokumentation zur Registrierung einer Webanwendung bei Yahoo .

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

   2. Wenn Sie Apps bei diesen Anbietern registrieren, achten Sie darauf, die Domäne *.firebaseapp.com für Ihr Projekt als Weiterleitungsdomä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, besteht die einfachste Möglichkeit zur Authentifizierung Ihrer Benutzer bei Firebase mithilfe ihrer Yahoo-Konten darin, den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abzuwickeln.

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

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

   Web modular API

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

   Web namespaced API

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

2. Optional : Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden möchten.

   Web modular API

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

   Web namespaced API

   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 . Beachten Sie, dass Sie mit setCustomParameters() keine für Firebase erforderlichen Parameter übergeben können. Diese Parameter sind „client_id“ , „redirect_uri“ , „response_type“ , „scope“ und „state “.

3. Optional : Geben Sie über profile und email hinaus zusätzliche OAuth 2.0-Bereiche 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 Bereichen in den API-Berechtigungen der App übereinstimmen. Wenn beispielsweise Lese-/Schreibzugriff auf Benutzerkontakte angefordert wird und in den API-Berechtigungen der App vorkonfiguriert ist, muss sdct-w anstelle des schreibgeschützten OAuth-Bereichs sdct-r übergeben werden. Andernfalls schlägt der Ablauf fehl und dem Endbenutzer wird ein Fehler angezeigt.

   Web modular API

   // 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 namespaced API

   // 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. 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 zur Anmeldeseite weiterleiten. Auf Mobilgeräten wird die Weiterleitungsmethode bevorzugt.

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

     Web modular API

     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 namespaced API

     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

   • Um sich durch Umleitung zur Anmeldeseite anzumelden, rufen Sie signInWithRedirect auf:

   Befolgen Sie die Best Practices bei der Verwendung signInWithRedirect , linkWithRedirect oder reauthenticateWithRedirect .

     firebase.auth().signInWithRedirect(provider);
     

   Nachdem der Benutzer die Anmeldung abgeschlossen hat und zur Seite zurückkehrt, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult abrufen.

   Web modular API

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

   Web namespaced API

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

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

   Mithilfe des OAuth-Zugriffstokens 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
   

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

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

   Web modular API

   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 namespaced API

   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. Das gleiche Muster kann mit reauthenticateWithPopup / reauthenticateWithRedirect verwendet werden, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzliche Anmeldung erfordern.

   Web modular API

   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 namespaced API

   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

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

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

Wenn Sie eine Chrome-Erweiterungs-App erstellen, lesen Sie die Anleitung zu Offscreen-Dokumenten .

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – also dem Benutzernamen und dem Kennwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann zur Identifizierung eines Benutzers in jeder App in Ihrem Projekt verwendet werden, unabhängig davon, wie sich der Benutzer anmeldet.

• In Ihren Apps können Sie den Authentifizierungsstatus Ihres Benutzers am besten ermitteln, indem Sie einen Beobachter für das Auth Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .

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

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

Um einen Benutzer abzumelden, rufen Sie signOut auf:

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

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

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