Możesz pozwolić swoim 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 pakietu Firebase SDK w celu przeprowadzenia pełnego 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 do projektu Firebase:
- Dodaj Firebase do swojego projektu JavaScript .
- W konsoli Firebase otwórz sekcję Auth .
- Na karcie Metoda logowania włącz dostawcę firmy 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 Szybki start: Zarejestruj aplikację 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 v2.0.
- Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę
*.firebaseapp.com
projektu jako domenę przekierowania aplikacji.
- Kliknij Zapisz .
Obsługuj proces logowania za pomocą pakietu Firebase SDK
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 Firebase JavaScript SDK.
Aby obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj następujące czynności:
Utwórz wystąpienie OAuthProvider przy użyciu identyfikatora dostawcy microsoft.com .
Web version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
Web version 8
var provider = new firebase.auth.OAuthProvider('microsoft.com');
Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.
Web version 9
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Web version 8
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Parametry obsługiwane przez firmę Microsoft można znaleźć w dokumentacji Microsoft OAuth . Pamiętaj, że za pomocą
setCustomParameters()
nie możesz przekazać parametrów wymaganych przez Firebase. Te parametry to client_id , response_type , redirect_uri , state , scope i response_mode .Aby zezwolić tylko użytkownikom z określonej dzierżawy usługi Azure AD na logowanie do aplikacji, można użyć przyjaznej nazwy domeny dzierżawy usługi Azure AD lub identyfikatora GUID dzierżawy. Można to zrobić, określając pole „dzierżawca” w obiekcie parametrów niestandardowych.
Web version 9
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 version 8
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 OAuth 2.0 poza profilem podstawowym, których chcesz zażądać od dostawcy uwierzytelniania.
provider.addScope('mail.read'); provider.addScope('calendars.read');
Aby dowiedzieć się więcej, zapoznaj się z dokumentacją dotyczącą uprawnień i zgody firmy Microsoft .
Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się przy użyciu ich kont Microsoft, otwierając wyskakujące okienko lub przekierowując do strony logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.
- Aby zalogować się za pomocą wyskakującego okna, wywołaj
signInWithPopup
:
Web version 9
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 version 8
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ę przez przekierowanie na stronę logowania, wywołaj
signInWithRedirect
:
Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
Gdy użytkownik zakończy logowanie i wróci do strony, możesz uzyskać wynik logowania, wywołując
getRedirectResult
.Web version 9
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 version 8
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
.Używając tokenu dostępu OAuth, możesz wywołać interfejs Microsoft Graph API .
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 udostępnia adresu URL zdjęcia, a zamiast tego dane binarne dla zdjęcia profilowego należy zażądać za pośrednictwem interfejsu Microsoft Graph API .
Oprócz tokenu dostępu OAuth z obiektu
firebase.auth.UserCredential
można również pobrać token identyfikatora OAuth użytkownika. Oświadczeniesub
w tokenie identyfikatora jest specyficzne dla aplikacji i nie będzie zgodne z federacyjnym 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 korzystania z dzierżawy usługi Azure AD do logowania oświadczenieoid
będzie dokładnym dopasowaniem. Jednak w przypadkuoid
pole oid jest dopełniane. W przypadku identyfikatora federacyjnego4b2eabcdefghijkl
oid
miał postać00000000-0000-0000-4b2e-abcdefghijkl
.- Aby zalogować się za pomocą wyskakującego okna, wywołaj
Chociaż powyższe przykłady koncentrują się na przepływach logowania, masz również możliwość połączenia dostawcy firmy Microsoft z istniejącym użytkownikiem za pomocą
linkWithPopup
/linkWithRedirect
. Na przykład możesz połączyć wielu dostawców z tym samym użytkownikiem, umożliwiając im logowanie się za pomocą jednego z nich.Web version 9
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 version 8
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. });
Ten sam wzorzec może być użyty z
reauthenticateWithPopup
/reauthenticateWithRedirect
, które mogą służyć do pobierania świeżych poświadczeń dla poufnych operacji, które wymagają niedawnego logowania.Web version 9
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 version 8
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 do Chrome, musisz dodać swój identyfikator rozszerzenia do Chrome:
- Otwórz 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
W rozszerzeniach Chrome dostępne są tylko operacje wyskakujące ( signInWithPopup
, linkWithPopup
i reauthenticateWithPopup
), 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 uwierzytelniania 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 dopuszcza jedynie skrypty działające w tle w postaci pracowników usług, które w ogóle nie mogą wykonywać operacji wyskakujących okienek.
W pliku manifestu rozszerzenia do Chrome upewnij się, że dodajesz 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 połączone 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ęść projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się on loguje.
W aplikacjach zalecanym sposobem poznania stanu uwierzytelniania użytkownika jest ustawienie obserwatora na 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 czasu rzeczywistego i usługi Cloud Storage Firebase możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej
auth
i używać go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.
Możesz zezwolić użytkownikom na logowanie się do Twojej aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.
Aby wylogować użytkownika, zadzwoń do signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });