Ta strona została przetłumaczona przez Cloud Translation API.

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:

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:
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.
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
Dowiedz się więcej o modułowym SDK sieci Web v9, które można wstrząsnąć drzewami, i uaktualnij z wersji 8.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js
```
Web version 8
```
var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js
```

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

Web version 8

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});microsoft-oauth.js

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

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

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
Dowiedz się więcej o modułowym SDK sieci Web v9, które można wstrząsnąć drzewami, i uaktualnij z wersji 8.
```
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
```
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.
  });microsoft-oauth.js
```
- Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect :
Web version 9
Dowiedz się więcej o modułowym SDK sieci Web v9, które można wstrząsnąć drzewami, i uaktualnij z wersji 8.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js
```
Web version 8
```
firebase.auth().signInWithRedirect(provider);microsoft-oauth.js
```
Gdy użytkownik zakończy logowanie i wróci do strony, możesz uzyskać wynik logowania, wywołując getRedirectResult .
Web version 9
Dowiedz się więcej o modułowym SDK sieci Web v9, które można wstrząsnąć drzewami, i uaktualnij z wersji 8.
```
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
```
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.
  });microsoft-oauth.js
```
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 .

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

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

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

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

Obsługa kont-istnieje-z-innymi-błędami-poświadczeń

Jeśli włączyłeś ustawienie Jedno konto na adres e-mail w konsoli Firebase , gdy użytkownik próbuje zalogować się do dostawcy (takiego jak Microsoft) za pomocą adresu e-mail, który już istnieje dla innego dostawcy Firebase (takiego jak Google), błąd auth/account-exists-with-different-credential jest zgłaszany wraz z obiektem AuthCredential (poświadczenia firmy Microsoft). Aby zakończyć logowanie do zamierzonego dostawcy, użytkownik musi najpierw zalogować się do istniejącego dostawcy (Google), a następnie połączyć się z poprzednim AuthCredential (poświadczenie Microsoft).

Jeśli używasz signInWithPopup , możesz obsłużyć błędy auth/account-exists-with-different-credential za pomocą kodu takiego jak w poniższym przykładzie:


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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ć buforowane między przekierowaniami stron (na przykład przy użyciu pamięci sesji).

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ą poświadczeń opartych na tokenie dostępu OAuth, Firebase Auth nie obsługuje tych samych możliwości dla dostawców takich jak Microsoft ze względu na brak możliwości Serwer Firebase Auth do weryfikacji odbiorców tokenów dostępu Microsoft OAuth. Jest to krytyczne wymaganie bezpieczeństwa i może narazić aplikacje i witryny internetowe na ponowne ataki, w których token dostępu Microsoft OAuth uzyskany dla jednego projektu (atakującego) może zostać użyty do zalogowania się do innego projektu (ofiary). Zamiast tego Firebase Auth oferuje możliwość obsługi całego przepływu OAuth i wymiany kodu autoryzacji przy użyciu identyfikatora klienta OAuth i klucza tajnego skonfigurowanego w konsoli Firebase. Ponieważ kod autoryzacji może być używany tylko w połączeniu z określonym identyfikatorem klienta/sekretem, kod autoryzacji uzyskany dla jednego projektu nie może być używany z innym.

Jeśli ci dostawcy muszą być używani w nieobsługiwanych środowiskach, należy użyć biblioteki OAuth innej firmy i niestandardowego uwierzytelniania Firebase . Ten pierwszy jest potrzebny do uwierzytelnienia u dostawcy, a drugi do wymiany poświadczeń dostawcy na token niestandardowy.

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 .

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

Będzie to również używane jako mechanizm przekierowania logowania OAuth. Ta domena musiałaby być dozwolona dla wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą zobaczyć tę domenę podczas logowania się do firmy Microsoft przed przekierowaniem z powrotem do aplikacji: Przejdź do: https://my-app-12345.firebaseapp.com .

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

Wykonaj kroki od 1 do 3 w sekcji Konfigurowanie domeny do hostingu . Po zweryfikowaniu własności domeny Hosting udostępnia certyfikat SSL dla domeny niestandardowej.
Dodaj swoją domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com .
W konsoli programisty firmy Microsoft lub na stronie konfiguracji protokołu 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 .

Podczas inicjowania biblioteki JavaScript określ swoją domenę niestandardową za pomocą pola 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);

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

Web version 8

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

Uwierzytelniaj się za pomocą Microsoft za pomocą JavaScript

Zanim zaczniesz

Obsługuj proces logowania za pomocą pakietu Firebase SDK

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Obsługa kont-istnieje-z-innymi-błędami-poświadczeń

Tryb wyskakujący

Tryb przekierowania

Zaawansowane: Ręczna obsługa procesu logowania

Uwierzytelnij się w Firebase w rozszerzeniu Chrome

Dostosowywanie domeny przekierowania dla logowania Microsoft

Następne kroki

Web version 9

Web version 8