Diese Seite wurde von der Cloud Translation API übersetzt.

Authentifizierung über Yahoo! mit JavaScript

Sie können Ihren Nutzern die Authentifizierung bei Firebase mithilfe von OAuth-Anbietern wie Yahoo durch Integration des generischen OAuth-Logins in Ihre App mithilfe des Firebase SDK den gesamten Anmeldevorgang ausführen.

Hinweis

Wenn Sie Nutzer mit Yahoo!-Konten anmelden möchten, müssen Sie zuerst Yahoo für die Anmeldung aktivieren für Ihr Firebase-Projekt erstellen:

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
Öffnen Sie in der Firebase Console den Bereich Auth.
Aktivieren Sie auf dem Tab Anmeldemethode den Yahoo!-Anbieter.
Fügen Sie die Client-ID und das Client-Secret aus der Entwicklerkonsole des Anbieters zur Anbieterkonfiguration hinzu:
1. Um einen Yahoo-OAuth-Client zu registrieren, folgen Sie dem Yahoo-Entwickler Dokumentation zu Registrierung einer Webanwendung bei Yahoo.
  
  Wählen Sie die beiden OpenID Connect API-Berechtigungen profile und email aus.
2. Achten Sie bei der Registrierung von Apps bei diesen Anbietern darauf, die *.firebaseapp.com-Domain für Ihr Projekt als Weiterleitungsdomain für Ihr
Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer mit Firebase übernimmt die gesamte Anmeldung über die Yahoo-Konten. mit dem Firebase JavaScript SDK.

So führen Sie den Anmeldevorgang mit dem Firebase JavaScript SDK aus:

Instanz eines OAuthProviders mithilfe der Anbieter-ID erstellen 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

Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden.
Web

Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.
```
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.
Optional: Geben Sie neben profile und weiteren OAuth 2.0-Bereichen weitere OAuth 2.0-Bereiche an. email, die Sie 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 dem vorkonfigurierten Berechtigungen in den API-Berechtigungen der App. Wenn beispielsweise Der Zugriff wird an die Kontakte der Nutzer angefordert und in der API der App vorkonfiguriert. Berechtigungen, muss sdct-w anstelle des schreibgeschützten OAuth-Bereichs übergeben werden sdct-r. Andernfalls schlägt der Ablauf fehl und der Endanwendenden.
Web

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-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
```
// 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.

Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts. 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.

Rufe signInWithPopup auf, um dich über ein Pop-up-Fenster anzumelden:

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:

  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 erfolgreichem Abschluss werden das zugehörige OAuth-ID-Token und das Zugriffstoken mit dem Anbieter kann aus dem firebase.auth.UserCredential abgerufen werden. zurückgegeben.

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

Um beispielsweise die grundlegenden Profilinformationen abzurufen, verwendet die folgende REST API kann folgendermaßen 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-Nutzers, die über das Feld firebase.auth().currentUser.providerData[0].uid oder aus result.additionalUserInfo.profile

Die obigen Beispiele konzentrieren sich zwar auf Anmeldeabläufe, Sie haben aber auch die Möglichkeit, einen Yahoo-Anbieter mithilfe von linkWithPopup/linkWithRedirect. Sie können beispielsweise mehrere demselben Nutzer zu, damit sie sich mit beiden anmelden können.

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

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

Fehler beim Vorhandensein eines Kontos mit unterschiedlichen Anmeldedaten beheben

Wenn Sie in der Firebase-Konsole die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben, Ein Nutzer versucht, sich mit einer E-Mail-Adresse bei einem Anbieter (z. B. Yahoo) anzumelden, der bereits für den Anbieter eines anderen Firebase-Nutzers (z. B. Google) existiert, wird der Fehler auth/account-exists-with-different-credential wird zusammen mit einem AuthCredential-Objekt (Yahoo-Anmeldedaten) Um die Anmeldung beim gewünschten Anbieter abzuschließen, muss sich der Nutzer zuerst beim bestehenden Anbieter (Google) anmelden und dann eine Verknüpfung zum ehemaligen AuthCredential (Yahoo-Anmeldedaten) herstellen.

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

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) {
  // ...
}

Weiterleitungsmodus

Dieser Fehler wird im Weiterleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehenden Anmeldedaten zwischen den Seitenweiterleitungen im Cache gespeichert werden müssen (z. B. mit Sitzungsspeicher).

Im Gegensatz zu anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook, und Twitter, wo die Anmeldung direkt mit einem OAuth-Zugriffstoken erfolgen kann Anmeldedaten basieren, unterstützt Firebase Auth nicht die gleiche wie Yahoo, da das Firebase-Plug-in Authentifizierungsserver zur Überprüfung der Zielgruppe der Yahoo-OAuth-Zugriffstokens Dies ist eine kritische Sicherheitsanforderung und könnte Anwendungen und Websites zur Wiederholung von Angriffen, bei denen ein Yahoo-OAuth-Zugriffstoken Ein Projekt (Angreifer) kann zur Anmeldung bei einem anderen Projekt (Opfer) verwendet werden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Ablauf Autorisierungscode-Austausch mit OAuth-Client-ID und -Secret die in der Firebase Console konfiguriert wurden. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/einem bestimmten Secret verwendet werden kann, kann ein Autorisierungscode, der für ein Projekt abgerufen wurde, nicht für ein anderes verwendet werden.

Wenn diese Anbieter in nicht unterstützten Umgebungen verwendet werden müssen, die OAuth-Bibliothek eines Drittanbieters Benutzerdefinierte Firebase-Authentifizierung erforderlich sind. Ersteres ist erforderlich, um sich beim Anbieter zu authentifizieren, und letzteres, um die Anmeldedaten des Anbieters gegen ein benutzerdefiniertes Token einzutauschen.

Mit Firebase in einer Chrome-Erweiterung authentifizieren

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

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

Diese wird auch als Weiterleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domain muss für alle unterstützten OAuth-Anbieter zulässig sein. Das bedeutet jedoch, dass Nutzer diese Domain möglicherweise sehen, während sie sich bei Yahoo anmelden, bevor sie zur Anwendung weitergeleitet werden: Weiter zu: https://my-app-12345.firebaseapp.com.

Wenn Sie Ihre Subdomain nicht anzeigen lassen möchten, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

Führen Sie die Schritte 1 bis 3 unter Domain für Hosting einrichten aus. Nach der Bestätigung Ihrer Domaininhaberschaft erhalten, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
Fügen Sie Ihre benutzerdefinierte Domain der Liste der autorisierten Domains in der Firebase-Konsole: 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 Sie in Ihrer benutzerdefinierten Domain zugreifen können: https://auth.custom.domain.com/__/auth/handler

Beim Initialisieren der JavaScript-Bibliothek geben Sie Ihre benutzerdefinierte Domain mit dem Feld authDomain:

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 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.

Um den Authentifizierungsstatus Ihrer Nutzer in Ihren Apps zu ermitteln, gehen Sie folgendermaßen vor: einen Beobachter für das Auth-Objekt festlegen. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.
In Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen, und steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich mit Mehrfachauthentifizierung in Ihrer App anzumelden indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem eines bestehenden Nutzerkontos.

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