Uwierzytelnij się za pomocą Yahoo z JavaScript

Możesz pozwolić użytkownikom uwierzytelnianie z użyciem Firebase dostawców jak Yahoo OAuth integrując rodzajowe OAuth logowanie do aplikacji przy użyciu Firebase SDK do przeprowadzenia końca do końca logowania przepływu.

Zanim zaczniesz

Aby zalogować się z wykorzystaniem kont użytkowników Yahoo, należy najpierw włączyć Yahoo jako logowania operatora do projektu Firebase:

  1. Dodaj Firebase do swojego projektu JavaScript .
  2. W konsoli Firebase otwórz sekcję Auth .
  3. Na karcie Logowanie w metodzie umożliwienia usługodawcy Yahoo .
  4. Dodaj identyfikator klienta oraz tajny z konsoli programisty dostawcy do konfiguracji operatora:
    1. Aby zarejestrować klienta Yahoo OAuth, wykonaj dokumentację programistów Yahoo sprawie rejestracji aplikacji internetowych z Yahoo .

      Koniecznie wybierz dwa uprawnienia API OpenID Connect: profile i e- email .

    2. Przy rejestracji aplikacje z tych dostawców, należy zarejestrować *.firebaseapp.com domenę dla swojego projektu jako przekierowania domeny dla swojej aplikacji.
  5. Kliknij przycisk Zapisz .

Obsługuj proces logowania za pomocą pakietu Firebase SDK

Jeśli budujesz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników z Firebase używając konta Yahoo jest ich obsługiwać całą logowania przepływu z Firebase JavaScript SDK.

Aby obsłużyć logowania przepływu z Firebase JavaScript SDK, wykonaj następujące kroki:

  1. Utwórz instancję OAuthProvider wykorzystaniem identyfikatora dostawcy yahoo.com .

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. Opcjonalnie : Określ dodatkowe parametry niestandardowe OAuth że chcesz wysłać z prośbą OAuth.

    Web version 9

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

    Web version 8

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

    Na podporach parametry Yahoo, zobacz dokumentację Yahoo OAuth . Należy pamiętać, że nie można przejść Firebase-wymagane parametry z setCustomParameters() . Parametry te są client_id , redirect_uri , response_type , zakres i stan .

  3. Opcjonalnie : określić dodatkowe zakresy OAuth 2.0 poza profile i email -mail , który chcesz wniosek dostawcy uwierzytelniania. Jeśli aplikacja wymaga dostępu do prywatnych danych użytkownika z Yahoo API, musisz żądanie uprawnieniami do Yahoo API pod Uprawnienia API w konsoli programisty Yahoo. Prośby zakresy OAuth muszą być dokładne dopasowania do nich wstępnie uprawnieniami API aplikacji. Na przykład, jeżeli odczytu / zapisu jest wymagany dostęp do kontaktów użytkownika i wstępnie skonfigurowane w uprawnieniach API aplikacji, sdct-w ma zostać przekazany zamiast tylko do odczytu zakresu OAuth sdct-r . W przeciwnym razie nie będzie przepływu i błąd będzie widoczna dla użytkownika końcowego.

    Web version 9

    // 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');

    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');

    Aby dowiedzieć się więcej, zapoznaj się z dokumentacją zakresów Yahoo .

  4. Uwierzytelniania Firebase użyciu obiektu dostawcy OAuth. Można skłonić użytkowników do logowania się z ich kont Yahoo albo przez otwarcie okna pop-up lub przekierowanie do strony logowania. Sposób przekierowania jest korzystne w urządzeniach przenośnych.

    • Aby zalogować się za pomocą wyskakującego okienka, call signInWithPopup :

      Web version 9

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

      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.
        });
    • Aby zalogować się poprzez przekierowanie do strony logowania, zadzwoń signInWithRedirect :

      firebase.auth().signInWithRedirect(provider);
      

      Po uzupełnia użytkowników zalogować się i wraca na stronie można uzyskać logowania efekcie wywołując getRedirectResult .

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

    Po pomyślnym zakończeniu, identyfikator tokenu OAuth i token dostępu związany z dostawcą może być pobierane z firebase.auth.UserCredential obiekt zwrócony.

    Korzystanie z tokenu dostępu OAuth, możesz zadzwonić do API Yahoo .

    Na przykład, aby uzyskać podstawowe informacje o profilu następujący REST API można nazwać:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    Gdzie YAHOO_USER_UID jest identyfikator użytkownika Yahoo, które mogą być pobierane z firebase.auth().currentUser.providerData[0].uid pola lub result.additionalUserInfo.profile .

  5. Choć powyższe przykłady koncentrują się na znaku w przepływach, masz również możliwość połączenia dostawcy Yahoo do istniejącego użytkownika z wykorzystaniem linkWithPopup / linkWithRedirect . Na przykład, można połączyć wielu dostawców do tego samego użytkownika, pozwalając im zalogować się z innym.

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

    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.
        });
  6. Ten sam wzór może być stosowany z reauthenticateWithPopup / reauthenticateWithRedirect które mogą być wykorzystywane do pobierania świeże poświadczenia dla wrażliwych operacji, które wymagają ostatnie logowanie.

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

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

Uwierzytelniania Firebase w rozszerzeniu Chrome

Jeśli budujesz wydłużania aplikację Chrome, trzeba dodać rozszerzenie Chrome ID:

  1. Otwórz swój projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otworzyć stronę logowania metody .
  3. Dodaj URI takiego do listy autoryzowanych dziedzinach:
    chrome-extension://CHROME_EXTENSION_ID

Tylko operacje popup ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, a rozszerzenia Chrome nie może użyć przekierowania HTTP. Należy zadzwonić te metody ze skryptu widoku tło zamiast popup działania przeglądarki, jako popup uwierzytelniania anuluje popup działania przeglądarki. Metody popup może być stosowane wyłącznie w rozszerzeniach korzystających Manifest V2 . Nowsza Oczywisty V3 pozwala tylko skrypty tło w postaci pracowników usług, które nie mogą wykonywać operacje popup w ogóle.

W oczywisty make plików twojego rozszerzenia Chrome pewność, że dodasz https://apis.google.com URL do content_security_policy allowlist.

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto są przechowywane jako część projektu Firebase, i mogą być wykorzystane do identyfikacji użytkowników w każdej aplikacji w projekcie, niezależnie od tego jak użytkownik zaloguje.

  • W aplikacjach zalecanym sposobem poznania stanu uwierzytelniania użytkownika jest ustawienie obserwatora na obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika od User obiektu. Patrz Zarządzanie użytkownikami .

  • W regułach bezpieczeństwa bazy danych czasu rzeczywistego i usługi Cloud Storage Firebase możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i używać go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Można zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania przez łączenie auth poświadczenia dostawcy do istniejącego konta użytkownika.

Aby wylogować użytkownika, zadzwoń signOut :

Web version 9

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

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

Web version 8

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