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

Uwierzytelniaj się za pomocą Microsoft za pomocą JavaScript

Możesz zezwolić 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ą za pomocą Firebase SDK, aby przeprowadzać pełny proces logowania.

Zanim zaczniesz

Aby zalogować użytkowników przy użyciu kont Microsoft (Azure Active Directory i osobistych kont Microsoft), musisz najpierw włączyć firmę Microsoft jako dostawcę logowania dla swojego projektu Firebase:

Dodaj Firebase do swojego projektu JavaScript .
W konsoli Firebase otwórz sekcję Auth .
Na karcie Metoda logowania włącz dostawcę 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 przewodniku Szybki start: rejestrowanie aplikacji w punkcie końcowym usługi Azure Active Directory w wersji 2.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 usłudze Azure Active Directory w wersji 2.0.
2. Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę *.firebaseapp.com swojego projektu jako domenę przekierowania dla swojej aplikacji.
Kliknij Zapisz .

Obsługuj proces logowania za pomocą Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu ich kont Microsoft jest obsłużenie całego procesu logowania za pomocą Firebase JavaScript SDK.

Aby obsłużyć proces logowania za pomocą Firebase JavaScript SDK, wykonaj te czynności:

Utwórz wystąpienie OAuthProvider przy użyciu identyfikatora dostawcy microsoft.com .
Web version 9
Dowiedz się więcej o modułowym zestawie SDK Web v9, który można wstrząsnąć drzewem, i uaktualnij go 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 nie możesz przekazać parametrów wymaganych przez Firebase za pomocą setCustomParameters() . 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 się 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, o które chcesz poprosić dostawcę 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 okienka, wywołaj signInWithPopup :
Web version 9
Dowiedz się więcej o modułowym zestawie SDK Web v9, który można wstrząsnąć drzewem, i uaktualnij go 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 do strony logowania, wywołaj signInWithRedirect :
Postępuj zgodnie z najlepszymi praktykami podczas korzystania z signInWithRedirect , linkWithRedirect lub reauthenticateWithRedirect .
Web version 9
Dowiedz się więcej o modułowym zestawie SDK Web v9, który można wstrząsnąć drzewem, i uaktualnij go 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 powróci na stronę, możesz uzyskać wynik logowania, wywołując getRedirectResult .
Web version 9
Dowiedz się więcej o modułowym zestawie SDK Web v9, który można wstrząsnąć drzewem, i uaktualnij go 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żna pobrać ze zwróconego obiektu firebase.auth.UserCredential .
Korzystając z tokena dostępu OAuth, możesz wywoływać interfejs API Microsoft Graph .
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 danych binarnych dla zdjęcia profilowego należy zażądać za pośrednictwem interfejsu API Microsoft Graph .
Oprócz tokena dostępu OAuth z obiektu firebase.auth.UserCredential można również pobrać token identyfikatora OAuth użytkownika. Roszczenie 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 żądanie oid będzie dokładnie zgodne. Jednak w przypadku niebędącym dzierżawcą pole oid jest wypełnione. W przypadku federacyjnego identyfikatora 4b2eabcdefghijkl oid miał postać 00000000-0000-0000-4b2e-abcdefghijkl .

Chociaż powyższe przykłady koncentrują się na przepływach logowania, istnieje również możliwość połączenia dostawcy firmy Microsoft z istniejącym użytkownikiem przy użyciu 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

Tego samego wzorca można użyć z reauthenticateWithPopup / reauthenticateWithRedirect , którego można użyć do pobrania świeżych poświadczeń dla poufnych operacji wymagających 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 błędów konta istnieje z różnymi danymi uwierzytelniającymi

Jeśli w konsoli Firebase włączyłeś ustawienie Jedno konto na adres e-mail , 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 dokoń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świadczeniami 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 poświadczenia muszą być buforowane między przekierowaniami stron (na przykład przy użyciu magazynu 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 takich samych możliwości dostawców, jak Microsoft ze względu na niemożność 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 strony internetowe na powtarzające się 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 kodów autoryzacyjnych przy użyciu identyfikatora klienta OAuth i klucza tajnego skonfigurowanego w konsoli Firebase. Ponieważ kod autoryzacyjny może być używany tylko w połączeniu z określonym identyfikatorem/tajemnicą klienta, kod autoryzacyjny uzyskany dla jednego projektu nie może być używany z innym.

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

Uwierzytelnij się za pomocą Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzającą Chrome, musisz dodać swój identyfikator rozszerzenia Chrome:

Otwórz swój projekt w konsoli Firebase .
W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
Dodaj identyfikator URI podobny do następującego do listy autoryzowanych domen:
```
chrome-extension://CHROME_EXTENSION_ID
```

Tylko operacje wyskakujące ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą używać 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 zezwala tylko na skrypty działające w tle w postaci service workerów, które w ogóle nie mogą wykonywać operacji wyskakujących okienek.

W pliku manifestu rozszerzenia Chrome dodaj adres URL https://apis.google.com do listy dozwolonych content_security_policy .

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

Będzie to również używane jako mechanizm przekierowania do logowania OAuth. Ta domena musi 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 swojej subdomeny, możesz skonfigurować domenę niestandardową za pomocą Hostingu Firebase:

Wykonaj kroki od 1 do 3 w sekcji Konfigurowanie domeny na potrzeby hostingu . Gdy weryfikujesz własność domeny, Hosting zapewnia certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com .
W konsoli programisty Microsoft lub na stronie konfiguracji OAuth umieść na białej liście adres URL strony przekierowania, który będzie dostępny w Twojej domenie niestandardowej: https://auth.custom.domain.com/__/auth/handler .

Podczas inicjowania biblioteki JavaScript określ 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, tworzone jest nowe konto użytkownika, które jest łą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ę logował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikacji użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, jak użytkownik się loguje.

W twoich aplikacjach zalecanym sposobem poznania statusu autoryzacji 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 Firebase Realtime Database i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma 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, wywołaj 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ą 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 błędów konta istnieje z różnymi danymi uwierzytelniającymi

Tryb wyskakujący

Tryb przekierowania

Zaawansowane: ręczna obsługa przepływu logowania

Uwierzytelnij się za pomocą Firebase w rozszerzeniu Chrome

Dostosowywanie domeny przekierowania na potrzeby logowania do firmy Microsoft

Następne kroki

Web version 9

Web version 8