Diese Seite wurde von der Cloud Translation API übersetzt.

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:

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu .
Öffnen Sie in der Firebase-Konsole den Abschnitt Auth .
Aktivieren Sie auf der Registerkarte Anmeldemethode den Yahoo- Anbieter.
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.
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:

Erstellen Sie eine Instanz eines OAuthProviders mit der Anbieter-ID yahoo.com .
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');auth_yahoo_provider_create.js
```
Web version 8
```
var provider = new firebase.auth.OAuthProvider('yahoo.com');yahoo-oauth.js
```
Optional : Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anforderung senden möchten.
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  auth_yahoo_provider_params.js
```
Web version 8
```
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 für Firebase erforderliche Parameter nicht mit setCustomParameters() können. Diese Parameter sind client_id , relay_uri , response_type , scope und state .
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
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von 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');auth_yahoo_provider_scopes.js
```
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');yahoo-oauth.js
```
Weitere Informationen finden Sie in der Yahoo-Scopes-Dokumentation .
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
  Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
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 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.
  });yahoo-oauth.js
```
- Um sich durch Umleitung zur Anmeldeseite anzumelden, rufen signInWithRedirect :
Befolgen Sie die Best Practices bei der Verwendung von signInWithRedirect , linkWithRedirect oder reauthenticateWithRedirect .
```
  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
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_yahoo_signin_redirect.js
```
Web version 8
```
firebase.auth().signInWithRedirect(provider);yahoo-oauth.js
```
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.

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

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

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

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

Behandeln von Konto-existiert-mit-anderen-Anmeldeinformationen-Fehlern

Wenn Sie die Einstellung Ein Konto pro E-Mail-Adresse in der Firebase-Konsole aktiviert haben und ein Benutzer versucht, sich bei einem Anbieter (z. B. Yahoo) mit einer E-Mail-Adresse anzumelden, die bereits für den Anbieter eines anderen Firebase-Benutzers (z. B. Google) existiert, wird der Fehler auth/account-exists-with-different-credential credential wird zusammen mit einem AuthCredential -Objekt (Yahoo-Credential) geworfen. Um die Anmeldung beim vorgesehenen Anbieter abzuschließen, muss sich der Benutzer zuerst beim bestehenden Anbieter (Google) anmelden und dann mit dem früheren AuthCredential (Yahoo-Credential) verknüpfen.

Wenn Sie signInWithPopup verwenden, können Sie auth/account-exists-with-different-credential Fehler mit Code wie im folgenden Beispiel behandeln:


// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Umleitungsmodus

Dieser Fehler wird im Umleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehenden Anmeldeinformationen zwischen Seitenumleitungen zwischengespeichert werden müssen (z. B. mithilfe des Sitzungsspeichers).

Im Gegensatz zu anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook und Twitter, bei denen die Anmeldung direkt mit OAuth-Zugriffstoken-basierten Anmeldeinformationen erfolgen kann, unterstützt Firebase Auth nicht die gleiche Funktion für Anbieter wie Yahoo aufgrund der Unfähigkeit des Firebase-Authentifizierungsserver zur Überprüfung der Zielgruppe von Yahoo-OAuth-Zugriffstoken. Dies ist eine kritische Sicherheitsanforderung und könnte Anwendungen und Websites Replay-Angriffen aussetzen, bei denen ein Yahoo-OAuth-Zugriffstoken, das für ein Projekt (Angreifer) erhalten wurde, verwendet werden kann, um sich bei einem anderen Projekt (Opfer) anzumelden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Fluss und den Autorisierungscode-Austausch mithilfe der in der Firebase-Konsole konfigurierten OAuth-Client-ID und dem geheimen Schlüssel abzuwickeln. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/geheimem Schlüssel verwendet werden kann, kann ein für ein Projekt erworbener Autorisierungscode nicht für ein anderes verwendet werden.

Wenn diese Anbieter in nicht unterstützten Umgebungen verwendet werden müssen, müssen eine OAuth-Bibliothek eines Drittanbieters und eine benutzerdefinierte Firebase-Authentifizierung verwendet werden. Ersteres wird benötigt, um sich beim Anbieter zu authentifizieren, und letzteres, um die Anmeldeinformationen des Anbieters gegen ein benutzerdefiniertes Token auszutauschen.

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:

Öffnen Sie Ihr Projekt in der Firebase-Konsole .
Öffnen Sie im Abschnitt Authentifizierung die Seite Anmeldemethode .
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.

Bei der Projekterstellung stellt Firebase eine eindeutige Subdomain für Ihr Projekt bereit: https://my-app-12345.firebaseapp.com .

Dies wird auch als Umleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domäne müsste für alle unterstützten OAuth-Anbieter zugelassen werden. Dies bedeutet jedoch, dass Benutzer diese Domäne möglicherweise sehen, während sie sich bei Yahoo anmelden, bevor sie zurück zur Anwendung umgeleitet werden: Weiter zu: https://my-app-12345.firebaseapp.com .

Um die Anzeige Ihrer Subdomain zu vermeiden, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

Befolgen Sie die Schritte 1 bis 3 unter Einrichten Ihrer Domain für das Hosting . Wenn Sie Ihre Domain-Inhaberschaft bestätigen, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
Fügen Sie Ihre benutzerdefinierte Domäne zur Liste der autorisierten Domänen in der Firebase-Konsole hinzu: auth.custom.domain.com .
Setzen Sie in der Yahoo-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die weiße Liste, auf die über Ihre benutzerdefinierte Domain zugegriffen werden kann: https://auth.custom.domain.com/__/auth/handler .

Geben Sie beim Initialisieren der JavaScript-Bibliothek Ihre benutzerdefinierte Domäne mit dem Feld authDomain an:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

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

Web version 8

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

Authentifizieren Sie sich mit Yahoo mit JavaScript

Bevor Sie beginnen

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Behandeln von Konto-existiert-mit-anderen-Anmeldeinformationen-Fehlern

Popup-Modus

Umleitungsmodus

Erweitert: Behandeln Sie den Anmeldefluss manuell

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

Anpassen der Umleitungsdomäne für die Yahoo-Anmeldung

Nächste Schritte

Web version 9

Web version 8