Authentifizierung über Yahoo! mit JavaScript

Sie können Ihren Nutzern die Authentifizierung bei Firebase mithilfe von OAuth-Anbietern wie Yahoo durch Integrieren 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:

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Öffnen Sie in der Firebase-Konsole den Abschnitt Auth.
  3. Aktivieren Sie auf dem Tab Anmeldemethode den Yahoo!-Anbieter.
  4. Fügen Sie die Client-ID und den Clientschlüssel aus der Entwicklerkonsole dieses Anbieters hinzu. Anbieterkonfiguration:

    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 aus: profile und email.

    2. Wenn Sie Apps bei diesen Anbietern registrieren, müssen Sie die *.firebaseapp.com-Domain für Ihr Projekt als Weiterleitungsdomain für Ihre App registrieren.
  5. 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 verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

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

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

    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 im Yahoo! OAuth-Dokumentation Beachten Sie, dass Sie keine für Firebase erforderlichen Parameter mit setCustomParameters() Diese Parameter sind client_id, redirect_uri, response_type, scope und state.

  3. 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 Ihr Anwendung Zugriff auf private Nutzerdaten von Yahoo-APIs benötigt, können Sie müssen Sie Berechtigungen für Yahoo! APIs unter API Permissions (API-Berechtigungen) im Yahoo!-Entwicklerkonsole Die angeforderten OAuth-Bereiche müssen genau mit dem vorkonfigurierten Berechtigungen in den API-Berechtigungen der App. Wenn beispielsweise Lese-/Schreibzugriff auf die Kontakte des Nutzers angefordert und in den API-Berechtigungen der App vorkonfiguriert wird, muss sdct-w anstelle des OAuth-Bereichs „Lesezugriff“ sdct-r übergeben werden. Andernfalls schlägt der Ablauf fehl und der Endanwendenden.

    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 im Dokumentation zu den Yahoo-Bereichen

  4. Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts. Sie können Ihre Nutzer können sich mit ihrem Yahoo-Konto anmelden, indem sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weitergeleitet werden. Die Weiterleitungsmethode ist 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

    • Wenn Sie sich durch Weiterleitung zur Anmeldeseite anmelden möchten, rufen Sie signInWithRedirect auf:

      firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer sich angemeldet und auf die Seite zurückgekehrt ist, können Sie Folgendes abrufen: das Anmeldeergebnis durch Aufrufen von getRedirectResult.

    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 können aus dem firebase.auth.UserCredential abgerufen werden. zurückgegeben.

    Mit dem OAuth-Zugriffstoken können Sie die Methode Yahoo! API

    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 aus dem Feld firebase.auth().currentUser.providerData[0].uid oder aus result.additionalUserInfo.profile abgerufen werden kann.

  5. 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 mit demselben Nutzer verknüpft, damit sie sich 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

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

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine App für eine Chrome-Erweiterung erstellen, lesen Sie die Leitfaden zu nicht sichtbaren Dokumenten.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, 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.

Rufen Sie auf, um einen Nutzer abzumelden. signOut:

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