Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Uwierzytelniaj za pomocą oprogramowania Microsoft i JavaScript

Możesz umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą dostawców OAuth, takich jak Microsoft Azure Active Directory, integrując w aplikacji ogólne logowanie OAuth za pomocą pakietu SDK Firebase, aby przeprowadzić pełny proces logowania.

Zanim zaczniesz

Aby logować użytkowników za pomocą 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 Bezpieczeństwo > Uwierzytelnianie.
Na karcie Metoda logowania włącz dostawcę logowania Microsoft.
Dodaj Identyfikator klienta i Tajny klucz klienta z konsoli deweloperskiej tego dostawcy do konfiguracji dostawcy:
1. Aby zarejestrować klienta OAuth Microsoft, postępuj zgodnie z instrukcjami w tym przewodniku. Pamiętaj, że ten punkt końcowy obsługuje logowanie za pomocą osobistych kont Microsoft, a także kont Azure Active Directory. Dowiedz się więcej o Azure Active Directory w wersji 2.0.
2. Podczas rejestrowania aplikacji u tych dostawców zarejestruj *.firebaseapp.comdomenę projektu jako domenę przekierowania aplikacji.
Kliknij Zapisz.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

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 Firebase JavaScript SDK.

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

Utwórz instancję OAuthProvider, używając identyfikatora dostawcy microsoft.com.

Web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js

Web

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

Opcjonalnie: określ dodatkowe parametry niestandardowe protokołu 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'
});auth_msft_provider_params.js

Web

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 Microsoft znajdziesz w dokumentacji OAuth firmy Microsoft. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą znaku setCustomParameters(). Są to parametry client_id, response_type, redirect_uri, state, scope i response_mode.

Aby zezwolić na logowanie się w aplikacji tylko użytkownikom z określonej dzierżawy Azure AD, można użyć przyjaznej nazwy domeny dzierżawy Azure AD lub identyfikatora GUID dzierżawy. Można to zrobić, określając pole „tenant” 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'
});auth_msft_provider_params_tenant.js

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

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 Microsoft dotyczącej uprawnień i zgody.

Uwierzytelnij w Firebase za pomocą obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się za pomocą kont Microsoft, otwierając wyskakujące okienko lub przekierowując ich na stronę logowania. Na urządzeniach mobilnych zalecana jest metoda przekierowania.

Aby zalogować się w wyskakującym okienku, wywołaj funkcję 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.
  });auth_msft_signin_popup.js

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

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj funkcję signInWithRedirect:

Podczas korzystania z elementów signInWithRedirect, linkWithRedirect i reauthenticateWithRedirect stosuj sprawdzone metody.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js

Web

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

Gdy użytkownik zakończy logowanie i wróci na stronę, możesz uzyskać wynik logowania, wywołując metodę 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.
  });auth_msft_signin_redirect_result.js

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

Po zakończeniu można pobrać token dostępu OAuth powiązany z dostawcą z obiektu firebase.auth.UserCredential.

Za pomocą tokena dostępu OAuth możesz wywoływać Microsoft Graph API.

Aby na przykład uzyskać podstawowe informacje o profilu, można wywołać ten 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 Microsoft nie udostępnia adresu URL zdjęcia. Zamiast tego dane binarne zdjęcia profilowego należy pobrać za pomocą interfejsu Microsoft Graph API.

Oprócz tokena dostępu protokołu OAuth z obiektu firebase.auth.UserCredential można też pobrać token identyfikatora protokołu OAuth użytkownika. Deklaracja sub w tokenie identyfikatora jest specyficzna dla aplikacji i nie będzie pasować do sfederowanego identyfikatora użytkownika używanego przez Firebase Uwierzytelnianie i dostępnego za pomocą user.providerData[0].uid. Zamiast tego należy użyć pola deklaracji oid. W przypadku logowania przy użyciu najemcy Azure AD deklaracja oid będzie dokładnym dopasowaniem. W przypadku logowania bez najemcy pole oid jest uzupełniane. W przypadku sfederowanego identyfikatora 4b2eabcdefghijkl pole oid będzie miało postać 00000000-0000-0000-4b2e-abcdefghijkl.

Powyższe przykłady dotyczą procesów logowania, ale możesz też połączyć dostawcę Microsoft z istniejącym użytkownikiem za pomocą linkWithPopup/linkWithRedirect. Możesz na przykład połączyć z tym samym użytkownikiem kilku dostawców, aby mógł się on logować za pomocą dowolnego z nich.

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

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

Ten sam wzorzec można zastosować w przypadku reauthenticateWithPopup/reauthenticateWithRedirect, które umożliwia pobieranie nowych danych logowania do operacji wrażliwych, 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.
    });auth_msft_reauth_popup.js

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

Obsługa błędów account-exists-with-different-credential

Jeśli w Firebase konsoli włączysz ustawienie Jedno konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Microsoft) za pomocą adresu e-mail, który już istnieje u innego dostawcy użytkownika Firebase (np. Google), zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (dane logowania Microsoft). Aby zalogować się u wybranego dostawcy, użytkownik musi najpierw zalogować się u obecnego dostawcy (Google), a następnie połączyć się z poprzednim dostawcą AuthCredential (dane logowania Microsoft).

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do tego przykładu:

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

W trybie przekierowania ten błąd jest obsługiwany w podobny sposób, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).

W przeciwieństwie do innych dostawców OAuth obsługiwanych przez Firebase, takich jak Google, Facebook i Twitter, w przypadku których logowanie można przeprowadzić bezpośrednio za pomocą danych logowania opartych na tokenie dostępu OAuth, usługa Uwierzytelnianie Firebase nie obsługuje tej samej funkcji w przypadku dostawców takich jak Microsoft. Wynika to z niemożności zweryfikowania przez serwer Uwierzytelniania Firebase odbiorców tokenów dostępu OAuth Microsoft. Jest to kluczowe wymaganie dotyczące bezpieczeństwa, które może narażać aplikacje i witryny na ataki typu replay, w których token dostępu OAuth Microsoft uzyskany w jednym projekcie (atakującym) może być używany do logowania się w innym projekcie (ofierze). Zamiast tego usługa Uwierzytelnianie Firebase oferuje możliwość obsługi całego procesu OAuth i wymiany kodu autoryzacji przy użyciu identyfikatora klienta OAuth i klucza tajnego skonfigurowanych w konsoli Firebase. Ponieważ kod autoryzacji może być używany tylko w połączeniu z określonym identyfikatorem klienta lub kluczem tajnym, kod autoryzacji uzyskany w jednym projekcie nie może być używany w innym.

Jeśli tych dostawców trzeba używać w nieobsługiwanych środowiskach, należy użyć biblioteki OAuth innej firmy i niestandardowego uwierzytelniania Firebase. Pierwszy z nich jest potrzebny do uwierzytelnienia 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.

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

Będzie on też używany jako mechanizm przekierowania w przypadku logowania za pomocą OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że podczas logowania się w Microsoft użytkownicy mogą zobaczyć tę domenę, zanim zostaną przekierowani z powrotem do aplikacji: Kontynuuj: https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować domenę niestandardową za pomocą Firebase Hosting:

Wykonaj kroki 1–3 w artykule Konfigurowanie domeny na potrzeby Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny.
Dodaj domenę niestandardową do listy autoryzowanych domen w konsoli Firebase: auth.custom.domain.com.
W konsoli deweloperskiej Microsoft lub na stronie konfiguracji OAuth dodaj do listy dozwolonych 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ą w polu authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z danymi logowania, 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 w ramach projektu w Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

Zalecanym sposobem sprawdzania stanu uwierzytelniania użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Więcej informacji znajdziesz w artykule Zarządzanie użytkownikami.
W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać 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ę w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut:

Web

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

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

Uwierzytelniaj za pomocą oprogramowania Microsoft i JavaScript Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.