Aby umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą dostawców protokołu OAuth, takich jak Microsoft Azure Active Directory, możesz zintegrować z aplikacją ogólne logowanie OAuth za pomocą pakietu SDK Firebase, aby przeprowadzić kompleksowy proces logowania.
Zanim zaczniesz
Aby logować użytkowników przy użyciu kont Microsoft (Azure Active Directory i osobistych kont Microsoft), musisz najpierw włączyć Microsoft jako dostawcę logowania w projekcie Firebase:
- Dodaj Firebase do projektu JavaScript.
- W konsoli Firebase otwórz sekcję Uwierzytelnianie.
- Na karcie Metoda logowania włącz dostawcę Microsoft.
- Dodaj Client ID (Identyfikator klienta) i Client Secret (Tajny klucz klienta) z konsoli programisty tego dostawcy do konfiguracji dostawcy:
- Aby zarejestrować klienta Microsoft OAuth, postępuj zgodnie z instrukcjami zawartymi w artykule Krótkie wprowadzenie: rejestrowanie aplikacji w punkcie końcowym Azure Active Directory w wersji 2.0. Pamiętaj, że ten punkt końcowy obsługuje logowanie się 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, 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 Microsoft jest obsługa całego procesu logowania za pomocą pakietu SDK Firebase JavaScript.
Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:
Utwórz instancję OAuthProvider za pomocą identyfikatora dostawcy microsoft.com.
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
Web
var provider = new firebase.auth.OAuthProvider('microsoft.com');
Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz wysyłać z żądaniem OAuth.
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Parametry obsługiwane przez Microsoft znajdziesz w dokumentacji protokołu Microsoft OAuth. Pamiętaj, że za pomocą
setCustomParameters()
nie możesz przekazywać parametrów wymaganych przez Firebase. Są to: client_id, response_type, redirect_uri, state, scope i response_mode.Aby zezwolić na logowanie się do aplikacji tylko użytkownikom określonego najemcy Azure AD, można użyć przyjaznej nazwy domeny najemcy Azure AD lub identyfikatora GUID najemcy. Można to zrobić, określając pole „najemca” w obiekcie parametrów niestandardowych.
Web
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
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 podstawowym profilem, o które chcesz poprosić dostawcę uwierzytelniania.
provider.addScope('mail.read'); provider.addScope('calendars.read');
Więcej informacji znajdziesz w dokumentacji dotyczącej uprawnień i zgody firmy Microsoft.
Uwierzytelniaj w Firebase za pomocą obiektu dostawcy OAuth. Aby poprosić użytkowników o zalogowanie się za pomocą kont Microsoft, otwórz wyskakujące okienko 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) => { // 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
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ę, przekierowując na stronę logowania, zadzwoń pod numer
signInWithRedirect
:
Jeśli korzystasz z tagów
signInWithRedirect
,linkWithRedirect
lubreauthenticateWithRedirect
, postępuj zgodnie ze sprawdzonymi metodami.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
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, 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
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 ukończeniu konfiguracji token dostępu OAuth 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 Microsoft Graph 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://graph.microsoft.com/v1.0/me
W przeciwieństwie do innych dostawców obsługiwanych przez Uwierzytelnianie Firebase Microsoft nie podaje adresu URL zdjęcia. Zamiast tego dane binarne zdjęcia profilowego należy wysyłać za pomocą interfejsu Microsoft Graph API.
Oprócz tokena dostępu OAuth z obiektu
firebase.auth.UserCredential
można też pobrać token identyfikatora OAuth użytkownika. Deklaracjasub
w tokenie identyfikatora odnosi się do aplikacji i nie będzie odpowiadać identyfikatorowi sfederowanego użytkownika używanego przez Uwierzytelnienie Firebase i dostępnego przezuser.providerData[0].uid
. Zamiast niego należy używać pola deklaracjioid
. W przypadku logowania się przy użyciu najemcy Azure AD, żądanieoid
jest identyczne. W przypadku nienajemców poleoid
jest jednak dopełnione. W przypadku sfederowanego identyfikatora4b2eabcdefghijkl
obiektoid
będzie miał formularz00000000-0000-0000-4b2e-abcdefghijkl
.- Aby zalogować się za pomocą wyskakującego okienka, zadzwoń pod numer
Powyższe przykłady dotyczą procesu logowania, ale masz też możliwość połączenia dostawcy Microsoft 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('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
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ż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('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
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. });
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. });