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:
- Dodaj Firebase do projektu JavaScript.
- W konsoli Firebase otwórz sekcję Uwierzytelnianie.
- Na karcie Metoda logowania włącz dostawcę Yahoo.
- Dodaj Client ID (Identyfikator klienta) i Client Secret (Tajny klucz klienta) z konsoli programisty tego dostawcy do konfiguracji dostawcy:
-
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
iemail
. - Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę
*.firebaseapp.com
dla Twojego projektu jako domenę przekierowującą aplikacji.
-
- 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:
Utwórz instancję OAuthProvider, używając identyfikatora dostawcy yahoo.com.
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz wysyłać z żądaniem OAuth.
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
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.Opcjonalnie: określ dodatkowe zakresy protokołu OAuth 2.0 poza zakresami
profile
iemail
, 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 odczytusdct-r
. W przeciwnym razie przepływ zakończy się niepowodzeniem, 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');
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');
Więcej informacji znajdziesz w dokumentacji zakresów Yahoo.
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
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
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ę, przekierowując na stronę logowania, zadzwoń pod numer
signInWithRedirect
:
Jeśli korzystasz z tagów
signInWithRedirect
,linkWithRedirect
lubreauthenticateWithRedirect
, 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
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
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 polafirebase.auth().currentUser.providerData[0].uid
lub zresult.additionalUserInfo.profile
.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
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
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. });
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
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
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. });
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 obiektuUser
. 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
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });