Uwierzytelniaj przy użyciu Yahoo z JavaScriptem

Aby umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą dostawców protokołu OAuth, takich jak Yahoo, możesz zintegrować z aplikacją ogólne logowanie OAuth przy użyciu pakietu SDK Firebase, aby umożliwić przeprowadzenie pełnego logowania.

Zanim zaczniesz

Aby logować się użytkowników przy użyciu kont Yahoo, musisz najpierw włączyć Yahoo jako dostawcę logowania w swoim projekcie Firebase:

  1. Dodaj Firebase do projektu JavaScript.
  2. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
  3. Na karcie Metoda logowania włącz dostawcę Yahoo.
  4. Dodaj Client ID (Identyfikator klienta) i Client Secret (Tajny klucz klienta) z konsoli programisty tego dostawcy do konfiguracji dostawcy:

    1. Aby zarejestrować klienta OAuth, postępuj zgodnie z instrukcjami dla deweloperów Yahoo dotyczącymi rejestrowania aplikacji internetowej w Yahoo.

      Wybierz 2 uprawnienia interfejsu OpenID Connect API: profile i email.

    2. Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę *.firebaseapp.com dla Twojego projektu jako domenę przekierowującą aplikacji.
  5. Kliknij Zapisz.

Zarejestruj się za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników w Firebase za pomocą ich kont Yahoo jest obsługa całego procesu logowania za pomocą pakietu Firebase JavaScript SDK.

Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:

  1. Utwórz instancję OAuthProvider, używając identyfikatora dostawcy yahoo.com.

    Web Modular API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

    Interfejs API internetowej przestrzeni nazw

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    yahoo-oauth.js

  2. Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz wysyłać z żądaniem OAuth.

    Web Modular API

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

    Interfejs API internetowej przestrzeni nazw

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

    Parametry obsługiwane przez Yahoo znajdziesz w dokumentacji Yahoo OAuth. Pamiętaj, że za pomocą setCustomParameters() nie możesz przekazywać parametrów wymaganych przez Firebase. Są to: client_id, redirect_uri, response_type, scope i state.

  3. Opcjonalnie: określ dodatkowe zakresy protokołu OAuth 2.0 poza zakresami profile i email, które chcesz żądać od dostawcy uwierzytelniania. Jeśli Twoja aplikacja wymaga dostępu do prywatnych danych użytkownika z interfejsów Yahoo API, musisz poprosić o uprawnienia do interfejsów Yahoo API w sekcji Uprawnienia dotyczące interfejsu API w konsoli programisty Yahoo. Żądane zakresy protokołu OAuth muszą być dokładnie takie same jak te wstępnie skonfigurowane w uprawnieniach interfejsu API aplikacji. Jeśli na przykład żądanie dostępu do odczytu i zapisu jest wysyłane do kontaktów użytkownika i jest wstępnie skonfigurowane w uprawnieniach interfejsu API aplikacji, należy przekazać sdct-w zamiast zakresu protokołu OAuth tylko do odczytu sdct-r. W przeciwnym razie przepływ zakończy się niepowodzeniem, a użytkownik zobaczy komunikat o błędzie.

    Web Modular 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

    Interfejs API internetowej przestrzeni nazw

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

    Więcej informacji znajdziesz w dokumentacji zakresów Yahoo.

  4. Uwierzytelniaj w Firebase za pomocą obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się na swoje konta Yahoo przez otwarcie wyskakującego okienka lub przekierowanie na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.

    • Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer signInWithPopup:

      Web Modular API

      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

      Interfejs API internetowej przestrzeni nazw

      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

    • Aby zalogować się, przekierowując na stronę logowania, zadzwoń pod numer signInWithRedirect:

    Jeśli korzystasz z tagów signInWithRedirect, linkWithRedirect lub reauthenticateWithRedirect, postępuj zgodnie ze sprawdzonymi metodami. 

      firebase.auth().signInWithRedirect(provider);

    Gdy użytkownik zaloguje się i wróci na stronę, możesz uzyskać wynik logowania, wywołując funkcję getRedirectResult.

    Web Modular API

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

    Interfejs API internetowej przestrzeni nazw

    firebase.auth().signInWithRedirect(provider);
    yahoo-oauth.js

    Po pomyślnym ukończeniu konfiguracji token identyfikatora OAuth i token dostępu powiązany z dostawcą można pobrać ze zwróconego obiektu firebase.auth.UserCredential.

    Za pomocą tokena dostępu OAuth możesz wywoływać interfejs Yahoo API.

    Aby na przykład uzyskać podstawowe informacje o profilu, można wywołać taki interfejs API REST:

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

    Gdzie YAHOO_USER_UID to identyfikator użytkownika Yahoo, który można pobrać z pola firebase.auth().currentUser.providerData[0].uid lub z result.additionalUserInfo.profile.

  5. Powyższe przykłady dotyczą procesu logowania, ale możesz też połączyć dostawcę Yahoo z dotychczasowym użytkownikiem za pomocą parametrów linkWithPopup/linkWithRedirect. Możesz na przykład połączyć kilku dostawców z tym samym użytkownikiem, umożliwiając im logowanie się za pomocą jednej z tych metod.

    Web Modular API

    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

    Interfejs API internetowej przestrzeni nazw

    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. Tego samego wzorca można używać z funkcją reauthenticateWithPopup/reauthenticateWithRedirect, która może służyć do pobierania nowych danych logowania na potrzeby newralgicznych operacji, które wymagają niedawnego logowania.

    Web Modular API

    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

    Interfejs API internetowej przestrzeni nazw

    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

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z przewodnikiem po dokumentach poza ekranem.

Dalsze kroki

Gdy użytkownik loguje się po raz pierwszy, tworzone jest nowe konto użytkownika, które jest łączone z danymi logowania (nazwa użytkownika i hasło, numer telefonu lub informacje o dostawcy uwierzytelniania). Nowe konto jest przechowywane w ramach Twojego projektu Firebase i może być używane do identyfikowania użytkowników we wszystkich aplikacjach w Twoim projekcie niezależnie od tego, jak się on loguje.

  • Zalecanym sposobem na poznanie stanu uwierzytelniania użytkownika w aplikacjach jest ustawienie obserwatora w obiekcie Auth. Dzięki temu można uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

  • W regułach zabezpieczeń Bazy danych czasu rzeczywistego Firebase i Cloud Storage możesz pobrać ze zmiennej auth unikalny identyfikator użytkownika zalogowanego użytkownika i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu różnych dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj signOut:

Web Modular API

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

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

Interfejs API internetowej przestrzeni nazw

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