Authentifizierung über Yahoo! mit JavaScript

Sie können Nutzern die Authentifizierung mit Firebase über OAuth-Anbieter wie Yahoo ermöglichen. Dazu müssen Sie die generische OAuth-Anmeldung mithilfe des Firebase SDK in Ihre App einbinden, um den gesamten Anmeldevorgang durchzuführen.

Hinweis

Wenn sich Nutzer mit Yahoo-Konten anmelden sollen, müssen Sie Yahoo zuerst als Anmelde anbieter für Ihr Firebase-Projekt aktivieren:

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
Öffnen Sie in der Firebase Konsole den Bereich Auth.
Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter Yahoo.
Fügen Sie der Anbieterkonfiguration die Client-ID und das Client-Secret aus der Entwicklerkonsole des Anbieters hinzu:
1. Folgen Sie der Yahoo-Entwickler dokumentation zum Registrieren einer Webanwendung bei Yahoo, um einen Yahoo-OAuth-Client zu registrieren.
  
  Wählen Sie die beiden OpenID Connect API-Berechtigungen profile und email aus.
2. Wenn Sie Apps bei diesen Anbietern registrieren, registrieren Sie die *.firebaseapp.com Domain für Ihr Projekt als Weiterleitungsdomain für Ihre App.
Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK verarbeiten

Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer mit Firebase über ihre Yahoo-Konten zu authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK verarbeiten.

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

Erstellen Sie eine Instanz von 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

Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden möchten.
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. Firebase-Parameter können nicht mit setCustomParameters() übergeben werden. Diese Parameter sind client_id, redirect_uri, response_type, scope und state.
Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche über profile und email hinaus an, die Sie vom Authentifizierungsanbieter anfordern möchten. Wenn Ihre Anwendung Zugriff auf private Nutzerdaten aus Yahoo APIs benötigt, müssen Sie in der Yahoo-Entwicklerkonsole unter API-Berechtigungen Berechtigungen für Yahoo APIs anfordern. Die angeforderten OAuth-Bereiche müssen genau mit den vorkonfigurierten Bereichen in den API-Berechtigungen der App übereinstimmen. Wenn beispielsweise Lese-/Schreibzugriff auf Nutzerkontakte angefordert 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 Vorgang fehl und dem Endnutzer wird ein Fehler 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.

Authentifizieren Sie sich mit Firebase über das OAuth-Anbieterobjekt. Sie können Nutzer auffordern, sich mit ihren Yahoo-Konten anzumelden, indem Sie entweder ein Pop-up-Fenster öffnen oder auf die Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.

Rufen Sie signInWithPopup auf, um sich mit einem 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, indem Sie auf die Anmeldeseite weiterleiten:

  firebase.auth().signInWithRedirect(provider);

Nachdem sich der Nutzer angemeldet hat und zur Seite zurückgekehrt ist, können Sie das Anmeldeergebnis mit 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 können das OAuth-ID-Token und das Zugriffstoken, die mit dem Anbieter verknüpft sind, aus dem firebase.auth.UserCredential zurückgegebenen Objekt 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

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

In den obigen Beispielen geht es um Anmeldevorgänge. Sie haben aber auch die Möglichkeit, einen Yahoo-Anbieter mit linkWithPopup/linkWithRedirect mit einem vorhandenen Nutzer zu verknüpfen. So können Sie beispielsweise mehrere Anbieter mit demselben Nutzer verknüpfen, sodass er sich mit beiden 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

Dasselbe Muster kann mit reauthenticateWithPopup/reauthenticateWithRedirect verwendet werden, um neue Anmeldedaten für vertrauliche 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 „account-exists-with-different-credential“ bearbeiten

Wenn Sie in der Firebase console die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben und ein Nutzer versucht, sich bei einem Anbieter (z. B. Yahoo) mit einer E-Mail-Adresse anzumelden, die bereits für den Anbieter eines anderen Firebase-Nutzers (z. B. Google) vorhanden ist, wird der Fehler auth/account-exists-with-different-credential zusammen mit einem AuthCredential-Objekt (Yahoo-Anmeldedaten) ausgelöst. 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 vorherigen AuthCredential (Yahoo-Anmeldedaten) herstellen.

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

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 auf ähnliche Weise behandelt. Der Unterschied besteht darin, dass die ausstehenden Anmeldedaten zwischen den Seitenweiterleitungen gespeichert werden müssen (z. B. mit Sitzungsspeicher).

Im Gegensatz zu anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook, und Twitter, bei denen die Anmeldung direkt mit auf OAuth-Zugriffstokens basierenden Anmeldedaten erfolgen kann, unterstützt Firebase Auth diese Funktion für Anbieter wie Yahoo nicht. Das liegt daran, dass der Firebase Auth-Server die Zielgruppe von Yahoo-OAuth-Zugriffstokens nicht überprüfen kann. Dies ist eine wichtige Sicherheitsanforderung und könnte Anwendungen und Websites Replay-Angriffen aussetzen, bei denen ein für ein Projekt (Angreifer) erhaltenes Yahoo-OAuth-Zugriffstoken verwendet werden kann, um sich bei einem anderen Projekt (Opfer) anzumelden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Vorgang und den Austausch des Autorisierungscodes mit der in der Firebase Console konfigurierten OAuth-Client-ID und dem Client-Secret zu verarbeiten. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/einem bestimmten Client-Secret verwendet werden kann, kann ein für ein Projekt erhaltener Autorisierungscode nicht für ein anderes Projekt verwendet werden.

Wenn diese Anbieter in nicht unterstützten Umgebungen verwendet werden müssen, sind eine OAuth-Bibliothek eines Drittanbieters und die benutzerdefinierte Authentifizierung von Firebase erforderlich. Erstere ist erforderlich, um sich beim Anbieter zu authentifizieren und letztere, um die Anmeldedaten des Anbieters gegen ein benutzerdefiniertes Token auszutauschen.

Authentifizierung mit Firebase in einer Chrome-Erweiterung

Wenn Sie eine Chrome-Erweiterungs-App erstellen, lesen Sie den Leitfaden zu Offscreen-Dokumenten.

Beim Erstellen eines Projekts 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 zugelassen sein. Das bedeutet jedoch, dass Nutzer diese Domain möglicherweise sehen, wenn sie sich bei Yahoo anmelden, bevor sie zur Anwendung zurückgeleitet werden: Weiter zu: https://my-app-12345.firebaseapp.com.

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

Führen Sie die Schritte 1 bis 3 unter Domain für Hosting einrichten aus. Wenn Sie den Inhaberschaftsnachweis für Ihre Domain bestätigen, 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 hinzu: auth.custom.domain.com.
Setzen Sie in der Yahoo-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die Zulassungsliste, die über Ihre benutzerdefinierte Domain zugänglich ist: https://auth.custom.domain.com/__/auth/handler.

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

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Nächste Schritte

Wenn sich ein Nutzer zum ersten Mal anmeldet, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, mit denen sich der Nutzer angemeldet hat, also mit dem Nutzernamen und Passwort, der Telefon nummer oder den Informationen des Authentifizierungsanbieters. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps Ihres Projekts zu identifizieren, unabhängig davon, wie sich der Nutzer anmeldet.

In Ihren Apps ist es empfehlenswert, den Authentifizierungsstatus Ihres Nutzers zu ermitteln, indem Sie einen Beobachter für das Auth Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Nutzers aus dem User Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.
In den 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 die Anmeldung in Ihrer App mit mehreren Authentifizierungs anbietern ermöglichen, indem Sie Anmeldedaten von Authentifizierungsanbietern mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie signOut auf, um einen Nutzer abzumelden:

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

Authentifizierung über Yahoo! mit JavaScript Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.