Uwierzytelniaj za pomocą oprogramowania Microsoft i JavaScript

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:

1. Dodaj Firebase do projektu JavaScript.
2. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
3. Na karcie Metoda logowania włącz dostawcę Microsoft.
4. Dodaj Client ID (Identyfikator klienta) i Client Secret (Tajny klucz klienta) z konsoli programisty tego dostawcy do konfiguracji dostawcy:
   1. 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.
   2. Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę *.firebaseapp.com dla Twojego projektu jako domenę przekierowującą aplikacji.
5. 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:

1. Utwórz instancję OAuthProvider za pomocą identyfikatora dostawcy microsoft.com.

   Web Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('microsoft.com');
   auth_msft_create_provider.js

   Interfejs API internetowej przestrzeni nazw

   var provider = new firebase.auth.OAuthProvider('microsoft.com');
   microsoft-oauth.js

2. Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz wysyłać z żądaniem OAuth.

   Web Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   auth_msft_provider_params.js

   Interfejs API internetowej przestrzeni nazw

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   microsoft-oauth.js

   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 Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   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'
   });
   auth_msft_provider_params_tenant.js

   Interfejs API internetowej przestrzeni nazw

   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'
   });
   microsoft-oauth.js

3. 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.

4. 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 Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   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.
     });
   auth_msft_signin_popup.js

   Interfejs API internetowej przestrzeni nazw

   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.
     });
   microsoft-oauth.js

   • Aby zalogować się, przekierowując na stronę logowania, zadzwoń pod numer signInWithRedirect:

   Jeśli korzystasz z tagów signInWithRedirect, linkWithRedirect lub reauthenticateWithRedirect, postępuj zgodnie ze sprawdzonymi metodami.

   Web Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   auth_msft_signin_redirect.js

   Interfejs API internetowej przestrzeni nazw

   firebase.auth().signInWithRedirect(provider);
   microsoft-oauth.js

   Gdy użytkownik zaloguje się i wróci na stronę, możesz uzyskać wynik logowania, wywołując funkcję getRedirectResult.

   Web Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   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.
     });
   auth_msft_signin_redirect_result.js

   Interfejs API internetowej przestrzeni nazw

   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.
     });
   microsoft-oauth.js

   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. Deklaracja sub w tokenie identyfikatora odnosi się do aplikacji i nie będzie odpowiadać identyfikatorowi sfederowanego użytkownika używanego przez Uwierzytelnienie Firebase i dostępnego przez user.providerData[0].uid. Zamiast niego należy używać pola deklaracji oid. W przypadku logowania się przy użyciu najemcy Azure AD, żądanie oid jest identyczne. W przypadku nienajemców pole oid jest jednak dopełnione. W przypadku sfederowanego identyfikatora 4b2eabcdefghijkl obiekt oid będzie miał formularz 00000000-0000-0000-4b2e-abcdefghijkl.

5. 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 Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   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.
       });
   auth_msft_link_popup.js

   Interfejs API internetowej przestrzeni nazw

   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.
       });
   microsoft-oauth.js

6. 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 Modular API

   Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

   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.
       });
   auth_msft_reauth_popup.js

   Interfejs API internetowej przestrzeni nazw

   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.
       });
   microsoft-oauth.js

Postępowanie w przypadku błędów dotyczących konta z innymi danymi logowania

Jeśli w konsoli Firebase masz włączone ustawienie Jedno konto na adres e-mail, to gdy użytkownik próbuje zalogować się w usłudze dostawcy (np. Microsoft) przy użyciu adresu e-mail, który już istnieje dla dostawcy innego użytkownika Firebase (np. Google), błąd auth/account-exists-with-different-credential jest zgłaszany razem z obiektem AuthCredential (dane logowania Microsoft). Aby zalogować się u docelowego dostawcy, użytkownik musi najpierw zalogować się u dotychczasowego dostawcy (Google), a potem utworzyć link do dawnego dostawcy AuthCredential (dane logowania firmy Microsoft).

Tryb wyskakującego okienka

Jeśli użyjesz signInWithPopup, możesz naprawić błędy (auth/account-exists-with-different-credential) za pomocą kodu takiego jak ten przykład:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Microsoft.
  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 Microsoft 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 Microsoft 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 uwierzytelniające muszą być zapisane w pamięci podręcznej między przekierowaniami stron (na przykład przy użyciu pamięci sesji).

Zaawansowane: logowanie się ręcznie

W przeciwieństwie do innych dostawców OAuth obsługiwanych przez Firebase, takich jak Google, Facebook i Twitter, gdzie logowanie można uzyskać bezpośrednio za pomocą danych uwierzytelniających opartych na tokenie dostępu OAuth, Uwierzytelnianie Firebase nie obsługuje tej samej funkcji w przypadku dostawców takich jak Microsoft ze względu na brak możliwości weryfikacji odbiorców tokenów dostępu Microsoft OAuth przez serwer uwierzytelniania Firebase. Jest to krytyczne wymaganie dotyczące bezpieczeństwa i może narażać aplikacje i strony na ataki typu replay, w wyniku których token dostępu Microsoft OAuth uzyskany dla jednego projektu (ataku) może zostać wykorzystany do zalogowania się do innego projektu (ofiary). Zamiast tego Uwierzytelnianie Firebase umożliwia obsługę całego przepływu OAuth i wymiany kodów autoryzacji z użyciem identyfikatora klienta OAuth i tajnego klucza skonfigurowanego w konsoli Firebase. Kodu autoryzacji można używać tylko w połączeniu z konkretnym identyfikatorem klienta lub obiektem tajnym, więc kodu autoryzacji uzyskanego dla jednego projektu nie można używać z innym.

Jeśli korzystanie z tych dostawców jest wymagane w nieobsługiwanych środowiskach, należy użyć zewnętrznej biblioteki OAuth i niestandardowego uwierzytelniania Firebase. Pierwszy jest potrzebny do uwierzytelniania u dostawcy, a drugi do wymiany danych logowania dostawcy na token niestandardowy.

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

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

Dostosowywanie domeny przekierowania na potrzeby logowania się przez Microsoft

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

Będzie ona również używana jako mechanizm przekierowania logowania OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców protokołu OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się w Microsoft, zanim zostaną przekierowani z powrotem do aplikacji: Przejdź na stronę https://my-app-12345.firebaseapp.com.

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

1. Wykonaj kroki 1–3 z artykułu Konfigurowanie domeny na potrzeby Hostingu. Gdy potwierdzisz własność domeny, Hosting udostępnia certyfikat SSL dla Twojej domeny niestandardowej.
2. Dodaj swoją domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
3. W konsoli programisty Microsoft lub na stronie konfiguracji OAuth umieść na białej liście adres URL strony przekierowania, która będzie dostępna w Twojej domenie niestandardowej: https://auth.custom.domain.com/__/auth/handler.
4. Po zainicjowaniu biblioteki JavaScript określ domenę niestandardową w polu authDomain:

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

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 obiektu User. 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 Modular API

Dowiedz się więcej o modułowym interfejsie Web API z możliwością potrząsania drzewem i uaktualnianiu interfejsu API z przestrzenią nazw.

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Interfejs API internetowej przestrzeni nazw

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js