Uwierzytelniaj przy użyciu Yahoo z JavaScriptem

Możesz umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą dostawców OAuth, takich jak Yahoo, integrując w aplikacji ogólne logowanie OAuth za pomocą pakietu SDK Firebase, aby przeprowadzić pełny proces logowania.

Zanim zaczniesz

Aby logować użytkowników za pomocą kont Yahoo, musisz najpierw włączyć Yahoo jako dostawcę logowania w projekcie Firebase:

Dodaj Firebase do projektu JavaScript.
W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
Na karcie Metoda logowania włącz dostawcę Yahoo.
Dodaj Identyfikator klienta i Klucz klienta z konsoli dewelopera tego dostawcy do konfiguracji dostawcy:
1. Aby zarejestrować klienta OAuth Yahoo, postępuj zgodnie z dokumentacją dla deweloperów Yahoo dotyczącą rejestrowania aplikacji internetowej w Yahoo.
  
  Wybierz 2 uprawnienia interfejsu OpenID Connect API: profile i email.
2. Podczas rejestrowania aplikacji u tych dostawców pamiętaj, aby zarejestrować *.firebaseapp.comdomenę projektu jako domenę przekierowania aplikacji.
Kliknij Zapisz.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

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 obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj te czynności:

Utwórz instancję OAuthProvider, używając 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

Opcjonalnie: określ dodatkowe parametry niestandardowe protokołu OAuth, które chcesz wysłać wraz 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
```
Listę parametrów obsługiwanych przez Yahoo znajdziesz w dokumentacji OAuth Yahoo. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą znaku setCustomParameters(). Są to parametry client_id, redirect_uri, response_type, scope i state.
Opcjonalnie: określ dodatkowe zakresy OAuth 2.0 poza profile i email, o które chcesz poprosić dostawcę uwierzytelniania. Jeśli Twoja aplikacja wymaga dostępu do prywatnych danych użytkownika z interfejsów API Yahoo, musisz poprosić o uprawnienia do interfejsów API Yahoo w sekcji Uprawnienia interfejsu API w konsoli dewelopera Yahoo. Żądane zakresy OAuth muszą dokładnie odpowiadać wstępnie skonfigurowanym zakresom w uprawnieniach interfejsu API aplikacji. Jeśli na przykład w przypadku kontaktów użytkownika wymagany jest dostęp do odczytu i zapisu, a w uprawnieniach interfejsu API aplikacji jest wstępnie skonfigurowany zakres OAuth tylko do odczytu, zamiast zakresu OAuth tylko do odczytu sdct-r należy przekazać sdct-w. W przeciwnym razie przepływ się nie powiedzie, a użytkownik zobaczy komunikat o błędzie.
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
```
Więcej informacji znajdziesz w dokumentacji zakresów Yahoo.

Uwierzytelnij w Firebase za pomocą obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się za pomocą kont Yahoo, otwierając wyskakujące okienko lub przekierowując ich na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.

Aby zalogować się w wyskakującym okienku, wywołaj funkcję 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ę przez przekierowanie na stronę logowania, wywołaj funkcję signInWithRedirect:

  firebase.auth().signInWithRedirect(provider);

Gdy użytkownik zakończy logowanie i wróci na stronę, możesz uzyskać wynik logowania, wywołując metodę 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 zakończeniu można pobrać token identyfikatora OAuth i token dostępu powiązane z dostawcą z zwróconego obiektu firebase.auth.UserCredential.

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

Aby na przykład uzyskać podstawowe informacje o profilu, możesz wywołać ten 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.

Powyższe przykłady dotyczą przepływów logowania, ale możesz też połączyć dostawcę Yahoo z istniejącym użytkownikiem za pomocą linkWithPopup/linkWithRedirect. Możesz na przykład połączyć z tym samym użytkownikiem kilku dostawców, aby mógł się logować za pomocą dowolnego 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

Ten sam wzorzec można zastosować w przypadku funkcji reauthenticateWithPopup/reauthenticateWithRedirect, która umożliwia pobieranie nowych danych logowania do operacji wrażliwych, które wymagają niedawnego zalogowania.

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

Obsługa błędów account-exists-with-different-credential

Jeśli w Firebasekonsoli włączysz ustawienie Jedno konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Yahoo) za pomocą adresu e-mail, który już istnieje u innego dostawcy użytkownika Firebase (np. Google), zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (dane logowania Yahoo). Aby zalogować się u wybranego dostawcy, użytkownik musi najpierw zalogować się u obecnego dostawcy (Google), a następnie połączyć się z poprzednim dostawcą AuthCredential (dane logowania Yahoo).

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do tego przykładu:

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) {
  // ...
}

Tryb przekierowania

W trybie przekierowania ten błąd jest obsługiwany w podobny sposób, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).

W przeciwieństwie do innych dostawców OAuth obsługiwanych przez Firebase, takich jak Google, Facebook i Twitter, w przypadku których logowanie można przeprowadzić bezpośrednio za pomocą danych logowania opartych na tokenie dostępu OAuth, Uwierzytelnianie Firebase nie obsługuje tej samej funkcji w przypadku dostawców takich jak Yahoo. Wynika to z tego, że serwer Uwierzytelniania Firebase nie może zweryfikować odbiorców tokenów dostępu OAuth Yahoo. Jest to krytyczne wymaganie dotyczące bezpieczeństwa, które może narazić aplikacje i witryny na ataki typu replay, w których token dostępu OAuth Yahoo uzyskany w jednym projekcie (atakujący) może być używany do logowania się w innym projekcie (ofiara). Uwierzytelnianie Firebase umożliwia obsługę całego procesu OAuth i wymianę kodu autoryzacji przy użyciu identyfikatora klienta OAuth i tajnego klucza skonfigurowanych w konsoli Firebase. Kod autoryzacji można wykorzystać tylko w połączeniu z określonym identyfikatorem klienta i kluczem tajnym, więc kod autoryzacji uzyskany w jednym projekcie nie może być używany w innym.

Jeśli tych dostawców trzeba używać w nieobsługiwanych środowiskach, należy użyć biblioteki OAuth innej firmy i niestandardowego uwierzytelniania Firebase. Pierwszy z nich jest potrzebny do uwierzytelnienia u dostawcy, a drugi – do wymiany danych logowania dostawcy na token niestandardowy.

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

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

Podczas tworzenia projektu Firebase udostępni dla niego unikalną subdomenę:https://my-app-12345.firebaseapp.com.

Będzie on też używany jako mechanizm przekierowania w przypadku logowania za pomocą OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że podczas logowania się w Yahoo użytkownicy mogą zobaczyć domenę, zanim zostaną przekierowani z powrotem do aplikacji: Kontynuuj: https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować domenę niestandardową za pomocą Firebase Hosting:

Wykonaj kroki 1–3 w artykule Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny.
Dodaj domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
W konsoli deweloperskiej Yahoo lub na stronie konfiguracji OAuth dodaj do białej listy adres URL strony przekierowania, która będzie dostępna w Twojej domenie niestandardowej:https://auth.custom.domain.com/__/auth/handler.

Podczas inicjowania biblioteki JavaScript określ swoją domenę niestandardową w polu authDomain:

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

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z danymi logowania, 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 jest przechowywane w ramach Twojego projektu Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

Zalecanym sposobem sprawdzania stanu autoryzacji użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

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

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

Uwierzytelniaj przy użyciu Yahoo z JavaScriptem Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.