Uwierzytelniaj się za pomocą Microsoft za pomocą JavaScript

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:

  1. Dodaj Firebase do swojego projektu JavaScript .
  2. W konsoli Firebase otwórz sekcję Auth .
  3. Na karcie Metoda logowania włącz dostawcę firmy Microsoft .
  4. Dodaj identyfikator klienta i klucz tajny klienta z konsoli programisty tego dostawcy do konfiguracji dostawcy:
    1. 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.
    2. Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę *.firebaseapp.com projektu jako domenę przekierowania aplikacji.
  5. 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:

  1. 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');
  2. 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'
    });
  3. 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 .

  4. 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świadczenie sub 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średnictwem user.providerData[0].uid . Zamiast tego należy użyć pola roszczenia oid . W przypadku korzystania z dzierżawy usługi Azure AD do logowania oświadczenie oid będzie dokładnym dopasowaniem. Jednak w przypadku oid pole oid jest dopełniane. W przypadku identyfikatora federacyjnego 4b2eabcdefghijkl oid miał postać 00000000-0000-0000-4b2e-abcdefghijkl .

  5. 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.
        });
  6. 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:

  1. Otwórz projekt w konsoli Firebase .
  2. W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
  3. 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 obiektu User . 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.
});