Możesz pozwolić użytkownikom na uwierzytelnianie w Firebase przy użyciu dostawców OAuth, takich jak Microsoft Azure Active Directory, integrując ogólne logowanie OAuth ze swoją aplikacją przy użyciu zestawu SDK Firebase w celu przeprowadzenia kompleksowego procesu logowania.
Zanim zaczniesz
Aby logować użytkowników przy użyciu kont Microsoft (Azure Active Directory i osobistych kont Microsoft), musisz najpierw włączyć firmę Microsoft jako dostawcę logowania dla swojego projektu Firebase:
- Dodaj Firebase do swojego projektu JavaScript .
- W konsoli Firebase otwórz sekcję Uwierzytelnianie .
- Na karcie Metoda logowania włącz dostawcę Microsoft .
- Dodaj identyfikator klienta i klucz tajny klienta z konsoli programisty tego dostawcy do konfiguracji dostawcy:
- Aby zarejestrować klienta Microsoft OAuth, postępuj zgodnie z instrukcjami w przewodniku Szybki Start: Rejestrowanie aplikacji w punkcie końcowym Azure Active Directory v2.0 . Należy pamiętać, że ten punkt końcowy obsługuje logowanie przy użyciu kont osobistych Microsoft oraz kont Azure Active Directory. Dowiedz się więcej o Azure Active Directory w wersji 2.0.
- Rejestrując aplikacje u tych dostawców, pamiętaj o zarejestrowaniu domeny
*.firebaseapp.com
dla swojego projektu jako domeny przekierowującej dla Twojej aplikacji.
- Kliknij Zapisz .
Obsługuj proces logowania za pomocą pakietu SDK Firebase
Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu ich kont Microsoft jest obsługa całego procesu logowania za pomocą pakietu SDK JavaScript Firebase.
Aby obsłużyć proces logowania za pomocą pakietu SDK JavaScript Firebase, wykonaj następujące kroki:
Utwórz instancję OAuthProvider przy użyciu identyfikatora dostawcy microsoft.com .
Web modular API
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
Web namespaced API
var provider = new firebase.auth.OAuthProvider('microsoft.com');
Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.
Web modular API
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Web namespaced API
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Informacje na temat parametrów obsługiwanych przez firmę Microsoft można znaleźć w dokumentacji Microsoft OAuth . Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą
setCustomParameters()
. Te parametry to id_klienta , typ_odpowiedzi , redirect_uri , stan , zakres i tryb_odpowiedzi .Aby zezwolić tylko użytkownikom z określonej dzierżawy usługi Azure AD na logowanie się do aplikacji, można użyć przyjaznej nazwy domeny dzierżawy usługi Azure AD lub identyfikatora GUID dzierżawy. Można tego dokonać poprzez określenie pola „najemca” w obiekcie parametrów niestandardowych.
Web modular API
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
Web namespaced API
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
Opcjonalnie : określ dodatkowe zakresy protokołu OAuth 2.0 poza profilem podstawowym, o które chcesz poprosić dostawcę uwierzytelniania.
provider.addScope('mail.read'); provider.addScope('calendars.read');
Aby dowiedzieć się więcej, zapoznaj się z dokumentacją dotyczącą uprawnień i zgód firmy Microsoft .
Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się na swoje konta Microsoft, otwierając wyskakujące okienko lub przekierowując do strony logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.
- Aby zalogować się za pomocą wyskakującego okna, wywołaj
signInWithPopup
:
Web modular API
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // User is signed in. // 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 namespaced API
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile. // ... /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // OAuth access and id tokens can also be retrieved: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
- Aby zalogować się poprzez przekierowanie na stronę logowania, wywołaj
signInWithRedirect
:
Postępuj zgodnie z najlepszymi praktykami podczas korzystania z
signInWithRedirect
,linkWithRedirect
lubreauthenticateWithRedirect
.Web modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
Gdy użytkownik zakończy logowanie i wróci na stronę, wynik logowania można uzyskać, wywołując metodę
getRedirectResult
.Web modular API
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // User is signed in. // 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 namespaced API
firebase.auth().getRedirectResult() .then((result) => { // IdP data available in result.additionalUserInfo.profile. // ... /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // OAuth access and id tokens can also be retrieved: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Po pomyślnym zakończeniu token dostępu OAuth powiązany z dostawcą może zostać pobrany ze zwróconego obiektu
firebase.auth.UserCredential
.Korzystając z tokena dostępu OAuth, możesz wywołać interfejs API Microsoft Graph .
Na przykład, aby uzyskać podstawowe informacje o profilu, można wywołać następujący interfejs API REST:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
W przeciwieństwie do innych dostawców obsługiwanych przez Firebase Auth, firma Microsoft nie podaje adresu URL zdjęcia, zamiast tego należy poprosić o dane binarne zdjęcia profilowego za pośrednictwem interfejsu API Microsoft Graph .
Oprócz tokena dostępu OAuth, z obiektu
firebase.auth.UserCredential
można również pobrać token identyfikatora OAuth użytkownika. Żądaniesub
w tokenie identyfikatora jest specyficzne dla aplikacji i nie będzie zgodne ze stowarzyszonym identyfikatorem użytkownika używanym przez Firebase Auth i dostępnym za pośrednictwemuser.providerData[0].uid
. Zamiast tego należy użyć pola roszczeniaoid
. W przypadku logowania się przy użyciu dzierżawy usługi Azure AD żądanieoid
będzie dokładne. Jednakże w przypadku niebędącym dzierżawcą poleoid
jest dopełniane. W przypadku identyfikatora federacyjnego4b2eabcdefghijkl
oid
będzie miał postać00000000-0000-0000-4b2e-abcdefghijkl
.- Aby zalogować się za pomocą wyskakującego okna, wywołaj
Chociaż powyższe przykłady skupiają się na przepływach logowania, istnieje również możliwość połączenia dostawcy Microsoft z istniejącym użytkownikiem za pomocą
linkWithPopup
/linkWithRedirect
. Na przykład możesz powiązać wielu dostawców z tym samym użytkownikiem, umożliwiając im logowanie się za pomocą dowolnego z nich.Web modular API
import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Microsoft 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 namespaced API
var provider = new firebase.auth.OAuthProvider('microsoft.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Microsoft credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
Tego samego wzorca można użyć z
reauthenticateWithPopup
/reauthenticateWithRedirect
, którego można użyć do pobrania nowych poświadczeń dla wrażliwych operacji wymagających niedawnego logowania.Web modular API
import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.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 namespaced API
var provider = new firebase.auth.OAuthProvider('microsoft.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. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
Uwierzytelnij się w Firebase w rozszerzeniu Chrome
Jeśli tworzysz aplikację rozszerzenia Chrome, musisz dodać identyfikator rozszerzenia Chrome:
- Otwórz swój projekt w konsoli Firebase .
- W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
- Dodaj identyfikator URI podobny do poniższego do listy autoryzowanych domen:
chrome-extension://CHROME_EXTENSION_ID
Tylko operacje na wyskakujących okienkach ( signInWithPopup
, linkWithPopup
i reauthenticateWithPopup
) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą korzystać z przekierowań HTTP. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniające anuluje wyskakujące okienko akcji przeglądarki. Metody wyskakujące mogą być używane tylko w rozszerzeniach korzystających z Manifest V2 . Nowszy Manifest V3 pozwala tylko na skrypty działające w tle w postaci pracowników usług, którzy w ogóle nie mogą wykonywać operacji w wyskakujących okienkach.
Upewnij się, że w pliku manifestu rozszerzenia Chrome dodałeś adres URL https://apis.google.com
do listy dozwolonych content_security_policy
.
Następne kroki
Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z poświadczeniami — 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 jako część Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.
W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w obiekcie
Auth
. Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektuUser
. Zobacz Zarządzanie użytkownikami .W regułach bezpieczeństwa bazy danych Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej
auth
i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.
Możesz zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.
Aby wylogować użytkownika, wywołaj funkcję signOut
:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });