Uwierzytelniaj przy użyciu Yahoo z JavaScriptem

Możesz zezwolić użytkownikom na uwierzytelnianie w Firebase za pomocą dostawców protokołu OAuth, takich jak Yahoo, integrując ogólne logowanie OAuth z aplikacją za pomocą pakietu SDK Firebase, i cały proces logowania.

Zanim zaczniesz

Aby logować się użytkowników przy użyciu kont Yahoo, musisz najpierw włączyć Yahoo jako logowanie dla swojego projektu 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 konfiguracja dostawcy:

    1. Aby zarejestrować klienta Yahoo OAuth, postępuj zgodnie z instrukcjami dewelopera Yahoo dokumentacja dotycząca podczas rejestracji w usłudze Yahoo.

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

    2. Podczas rejestrowania aplikacji u tych dostawców pamiętaj o zarejestrowaniu Domena *.firebaseapp.com dla Twojego projektu jako domena przekierowująca Twojego projektu .
  5. Kliknij Zapisz.

Zarejestruj się za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najprostszy sposób uwierzytelniania użytkowników Cały proces logowania odbywa się za pomocą Firebase, który korzysta z ich kont Yahoo. pakiet SDK Firebase JavaScript.

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

  1. Utwórz instancję OAuthProvider za pomocą identyfikatora dostawcy. 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. Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz stosować wysyłać z żądaniem OAuth.

    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

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

  3. Opcjonalnie: określ dodatkowe zakresy protokołu OAuth 2.0 poza profile i email, o które chcesz poprosić dostawcę uwierzytelniania. Jeśli aplikacja wymaga dostępu do prywatnych danych użytkownika z interfejsów API Yahoo, poprosić o uprawnienia do interfejsów Yahoo API w sekcji API Permissions (Uprawnienia API) Yahoo Developer Console. Żądane zakresy protokołu OAuth muszą być dokładnie takie same jak już skonfigurowane w uprawnieniach dotyczących interfejsu API aplikacji. Jeśli na przykład odczyt/zapis dostęp jest wysyłany do kontaktów użytkownika i skonfigurowany wstępnie w interfejsie API aplikacji uprawnień, 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 funkcja wyświetli komunikat o błędzie użytkownika końcowego.

    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

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

  4. Uwierzytelniaj w Firebase za pomocą obiektu dostawcy OAuth. Możesz prosić użytkownicy mogą zalogować się na swoje konta Yahoo przez otwarcie pojawi się wyskakujące okienko lub przekierujemy Cię na stronę logowania. Metoda przekierowania to na urządzeniach mobilnych.

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

      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

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

      firebase.auth().signInWithRedirect(provider);

    Po zalogowaniu się i powrocie użytkownika na stronę można uzyskać wynik logowania, dzwoniąc pod numer 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

    Po pomyślnym ukończeniu konfiguracji token identyfikatora OAuth i token dostępu zostały powiązane z dostawcą można pobrać z firebase.auth.UserCredential .

    Korzystając z tokena dostępu OAuth, możesz wywoływać metodę Interfejs Yahoo API.

    Aby na przykład uzyskać podstawowe informacje o profilu, użyj poniższego interfejsu API REST 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 to identyfikator użytkownika Yahoo, z którego można pobrać dane pola firebase.auth().currentUser.providerData[0].uid lub od result.additionalUserInfo.profile

  5. Powyższe przykłady dotyczą procesu logowania, ale masz też możliwość połączenia dostawcy Yahoo z istniejącym użytkownikiem za pomocą linkWithPopup/linkWithRedirect. Możesz na przykład połączyć kilka dostawców usług dla tego samego użytkownika, umożliwiając im logowanie się za pomocą dowolnej z nich.

    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. Tego samego wzoru można użyć w funkcji reauthenticateWithPopup/reauthenticateWithRedirect, które można wykorzystać, aby: pobieranie nowych danych logowania na potrzeby operacji poufnych, które wymagają ostatnich dane logowania.

    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

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

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

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika. powiązane z danymi logowania, czyli z nazwą użytkownika, hasłem i numerem telefonu, numer telefonu lub informacje o dostawcy uwierzytelniania – użytkownik zalogowany. Ten nowy jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się loguje.

  • Aby poznać stan uwierzytelniania użytkownika w swoich aplikacjach, ustaw obserwatora na obiekcie Auth. Dzięki temu możesz uzyskać dane użytkownika podstawowych informacji o profilu z obiektu User. Zobacz Zarządzanie użytkownikami

  • Na liście Firebase Realtime Database i Cloud Storage regułami zabezpieczeń, pobierz ze zmiennej auth unikalny identyfikator zalogowanego użytkownika, i używać ich do kontrolowania, do jakich danych użytkownik ma dostęp.

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

Aby wylogować użytkownika, wywołaj 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