Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

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 przy użyciu 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 pamiętaj, aby zarejestrować domenę *.firebaseapp.com projektu jako domenę przekierowania aplikacji.
Kliknij Zapisz.

Obsługa procesu logowania 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 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 wysłać wraz 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żesz użyć przyjaznej nazwy domeny dzierżawy Azure AD lub identyfikatora GUID dzierżawy. Możesz 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, które chcesz przesłać do dostawcy uwierzytelniania.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Więcej informacji znajdziesz w dokumentacji firmy 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 lub 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 pomyślnym zakończeniu token dostępu OAuth powiązany z dostawcą można pobrać z obiektu firebase.auth.UserCredential zwróconego przez funkcję.

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 OAuth z obiektu firebase.auth.UserCredential można też pobrać token identyfikatora OAuth użytkownika. Roszczenie sub w tokenie identyfikatora jest specyficzne dla aplikacji i nie będzie zgodne z identyfikatorem użytkownika sfederowanego używanym przez Uwierzytelnianie Firebase i dostępnym za pomocą user.providerData[0].uid. Zamiast niego użyj pola roszczenia oid. Jeśli do logowania używasz najemcy Azure AD, roszczenie oid będzie dokładnym dopasowaniem. W przypadku konta bez subskrypcji pole oid jest jednak uzupełniane. W przypadku federacyjnego identyfikatora 4b2eabcdefghijkl pole oid będzie miało format 00000000-0000-0000-4b2e-abcdefghijkl.

Powyższe przykłady dotyczą przepływó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ł logować się 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 funkcji reauthenticateWithPopup/reauthenticateWithRedirect, która umożliwia pobieranie nowych danych logowania do operacji związanych z poufnymi danymi, 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 Firebasekonsoli 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 krytyczne wymaganie dotyczące bezpieczeństwa, które może narazić aplikacje i strony internetowe na ataki typu replay, w których token dostępu Microsoft OAuth uzyskany w jednym projekcie (atakujący) może być używany do logowania się w innym projekcie (ofiara). Uwierzytelnianie Firebase umożliwia obsługę całego procesu OAuth i wymianę kodu autoryzacji za pomocą identyfikatora klienta OAuth i tajnego klucza skonfigurowanych w konsoli Firebase. Kod autoryzacji może być używany tylko w połączeniu z określonym identyfikatorem klienta i kluczem tajnym, więc 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 podczas 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 pod kątem Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj domenę niestandardową do listy autoryzowanych domen w Firebase konsoli: auth.custom.domain.com.
W konsoli dewelopera 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 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

Po pierwszym zalogowaniu się użytkownika tworzone jest nowe konto użytkownika, które jest powiązane 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. Zobacz 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 może mieć 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.