Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Uwierzytelniaj przy użyciu Yahoo z JavaScriptem

Możesz zezwolić użytkownikom na uwierzytelnianie się w Firebase za pomocą dostawców OAuth, takich jak Yahoo, integrując w aplikacji ogólne logowanie OAuth za pomocą pakietu Firebase SDK, aby przeprowadzić cały proces logowania.

Zanim zaczniesz

Aby umożliwić użytkownikom logowanie się za pomocą kont Yahoo, musisz najpierw włączyć Yahoo jako dostawcę logowania w projekcie Firebase:

Dodaj Firebase do projektu JavaScript.
W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.
Na karcie Metoda logowania włącz dostawcę logowania Yahoo.
Dodaj identyfikator klienta i tajny 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.
  
  Pamiętaj, aby wybrać 2 uprawnienia interfejsu OpenID Connect API: profile i email.
2. Podczas rejestrowania aplikacji u tych dostawców pamiętaj, aby zarejestrować domenę *.firebaseapp.com dla swojego projektu jako domenę przekierowania dla aplikacji.
Kliknij Zapisz.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym 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ługiwać 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 niestandardowe parametry OAuth, które chcesz wysł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
```
Informacje o parametrach obsługiwanych przez Yahoo znajdziesz w dokumentacji OAuth Yahoo. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą setCustomParameters(). Te parametry to 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ć zakresom wstępnie skonfigurowanym w uprawnieniach interfejsu API aplikacji. Jeśli na przykład wymagany jest dostęp do odczytu i zapisu kontaktów użytkownika, a w uprawnieniach interfejsu API aplikacji jest wstępnie skonfigurowany zakres sdct-w, zamiast zakresu OAuth tylko do odczytu sdct-r należy przekazać zakres sdct-w. W przeciwnym razie proces 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 się 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 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 signInWithRedirect:

Podczas korzystania z funkcji signInWithRedirect, linkWithRedirect lub reauthenticateWithRedirect stosuj sprawdzone metody.

  firebase.auth().signInWithRedirect(provider);

Gdy użytkownik się zaloguje i wróci na stronę, możesz uzyskać wynik logowania, wywołując 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 procesu token identyfikatora OAuth i token dostępu powiązane z dostawcą można pobrać 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ą procesó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ć kilku dostawców z tym samym użytkownikiem, aby umożliwić mu logowanie się 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 stosować w przypadku reauthenticateWithPopup/reauthenticateWithRedirect, które umożliwiają pobieranie nowych danych logowania do operacji wymagających niedawnego 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

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

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

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu takiego jak w tym przykładzie:

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

Ten błąd jest obsługiwany w podobny sposób w trybie przekierowania, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. za pomocą 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, usługa Firebase Auth nie obsługuje tej samej funkcji w przypadku dostawców takich jak Yahoo, ponieważ serwer Firebase Auth nie może zweryfikować odbiorców tokenów dostępu OAuth Yahoo. Jest to krytyczny wymóg bezpieczeństwa, który 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 zostać użyty do zalogowania się w innym projekcie (ofiara). Zamiast tego usługa Firebase Auth umożliwia obsługę całego procesu OAuth i wymianę kodu autoryzacji za pomocą identyfikatora klienta OAuth i tajnego klucza skonfigurowanych w konsoli Firebase. Ponieważ kod autoryzacji może być używany w połączeniu z określonym identyfikatorem klienta i tajnym kluczem, kodu autoryzacji uzyskanego w jednym projekcie nie można używać w innym.

Jeśli chcesz używać tych dostawców w nieobsługiwanych środowiskach, musisz użyć biblioteki OAuth innej firmy i niestandardowego uwierzytelniania Firebase. Pierwsza z nich jest potrzebna do uwierzytelnienia u dostawcy a druga do wymiany danych logowania dostawcy na token niestandardowy.

Uwierzytelnianie w Firebase w rozszerzeniu do Chrome

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

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

Będzie ona też używana jako mechanizm przekierowania na potrzeby logowania się przez OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się w Yahoo przed przekierowaniem z powrotem do aplikacji: Kontynuuj do: https://my-app-12345.firebaseapp.com.

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

Wykonaj kroki od 1 do 3 opisane w artykule Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj domenę niestandardową do listy autoryzowanych domen w Firebase konsoli: auth.custom.domain.com.
W konsoli dewelopera 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 domenę niestandardową w polu authDomain field:

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 – nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania. To nowe konto jest przechowywane w projekcie w Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od sposobu logowania.

W aplikacjach zalecamy ustawienie obserwatora w obiekcie Auth, aby poznać stan uwierzytelnienia użytkownika. Następnie możesz uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W regułach bezpieczeństwa Firebase Realtime Database i Cloud Storage bazy danych czasu rzeczywistego Firebase i Cloud Storage, możesz uzyskać unikalny identyfikator zalogowanego użytkownika z zmiennej auth, i użyć go do kontrolowania, do jakich danych użytkownik może mieć dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania przez połączenie danych logowania dostawcy uwierzytelniania z istniejącym kontem 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

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