本頁面由 Cloud Translation API 翻譯而成。

使用帶有 JavaScript 的 Microsoft 進行身份驗證

通過使用 Firebase SDK 將通用 OAuth 登錄集成到您的應用程序中，您可以讓您的用戶使用 OAuth 提供程序（如 Microsoft Azure Active Directory）向 Firebase 進行身份驗證，以執行端到端的登錄流程。

在你開始之前

要使用 Microsoft 帳戶（Azure Active Directory 和個人 Microsoft 帳戶）登錄用戶，您必須首先啟用 Microsoft 作為 Firebase 項目的登錄提供程序：

將 Firebase 添加到您的 JavaScript 項目中。
在Firebase 控制台中，打開Auth部分。
在登錄方法選項卡上，啟用Microsoft提供程序。
將該提供者的開發者控制台中的客戶端 ID和客戶端密碼添加到提供者配置中：
1. 要註冊 Microsoft OAuth 客戶端，請按照快速入門：使用 Azure Active Directory v2.0 端點註冊應用中的說明進行操作。請注意，此終結點支持使用 Microsoft 個人帳戶以及 Azure Active Directory 帳戶登錄。詳細了解 Azure Active Directory v2.0。
2. 向這些提供商註冊應用程序時，請務必將項目的*.firebaseapp.com域註冊為應用程序的重定向域。
單擊保存。

使用 Firebase SDK 處理登錄流程

如果您正在構建一個 Web 應用程序，使用他們的 Microsoft 帳戶通過 Firebase 對您的用戶進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理整個登錄流程。

要使用 Firebase JavaScript SDK 處理登錄流程，請按以下步驟操作：

使用提供程序 ID microsoft.com創建OAuthProvider的實例。

Web version 9

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

可選：指定要隨 OAuth 請求一起發送的其他自定義 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

有關 Microsoft 支持的參數，請參閱Microsoft OAuth 文檔。請注意，您不能使用setCustomParameters()傳遞 Firebase 所需的參數。這些參數是client_id 、 response_type 、 redirect_uri 、 state 、 scope和response_mode 。

若要僅允許來自特定 Azure AD 租戶的用戶登錄應用程序，可以使用 Azure AD 租戶的友好域名或租戶的 GUID 標識符。這可以通過在自定義參數對像中指定“租戶”字段來完成。

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

可選：指定您希望從身份驗證提供程序請求的基本配置文件之外的其他 OAuth 2.0 範圍。
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
要了解更多信息，請參閱Microsoft 權限和同意文檔。

使用 OAuth 提供程序對象向 Firebase 進行身份驗證。您可以通過打開彈出窗口或重定向到登錄頁面來提示您的用戶使用其 Microsoft 帳戶登錄。重定向方法在移動設備上是首選。

要使用彈出窗口登錄，請調用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.
  });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

要通過重定向到登錄頁面進行登錄，請調用signInWithRedirect ：

Web version 9

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

用戶完成登錄並返回頁面後，可以通過調用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.
  });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

成功完成後，可以從返回的firebase.auth.UserCredential對像中檢索與提供者關聯的 OAuth 訪問令牌。

使用 OAuth 訪問令牌，您可以調用Microsoft Graph API 。

例如，要獲取基本配置文件信息，可以調用以下 REST API：

curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

與 Firebase Auth 支持的其他提供商不同，Microsoft 不提供照片 URL，而是必須通過Microsoft Graph API請求個人資料照片的二進制數據。

除了 OAuth 訪問令牌之外，還可以從firebase.auth.UserCredential對像中檢索用戶的 OAuth ID 令牌。 ID 令牌中的sub聲明是特定於應用的，與 Firebase Auth 使用的聯合用戶標識符不匹配，可通過user.providerData[0].uid訪問。應使用oid聲明字段。使用 Azure AD 租戶登錄時， oid聲明將完全匹配。然而，對於非租戶情況， oid字段被填充。對於聯合 ID 4b2eabcdefghijkl ， oid的格式為00000000-0000-0000-4b2e-abcdefghijkl 。

雖然上述示例側重於登錄流程，但您還可以使用linkWithPopup / linkWithRedirect將 Microsoft 提供程序鏈接到現有用戶。例如，您可以將多個提供商鏈接到同一個用戶，允許他們使用其中任何一個登錄。

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

相同的模式可以與reauthenticateWithPopup / reauthenticateWithRedirect一起使用，可用於檢索需要最近登錄的敏感操作的新憑據。

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

處理具有不同憑據的帳戶存在錯誤

如果您在Firebase 控制台中啟用了每個電子郵件地址一個帳戶設置，當用戶嘗試使用其他 Firebase 用戶的提供商（例如 Google）已經存在的電子郵件登錄到提供商（例如 Microsoft）時，錯誤auth/account-exists-with-different-credential與AuthCredential對象（Microsoft 憑據）一起拋出。要完成對目標提供商的登錄，用戶必須先登錄現有提供商 (Google)，然後鏈接到以前的AuthCredential （Microsoft 憑據）。

如果您使用signInWithPopup ，您可以使用如下示例的代碼處理auth/account-exists-with-different-credential錯誤：


// 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();
        });
      });
    });
  }
});

重定向模式

此錯誤在重定向模式中以類似的方式處理，不同之處在於必須在頁面重定向之間緩存掛起的憑據（例如，使用會話存儲）。

與 Firebase 支持的其他 OAuth 提供程序（例如 Google、Facebook 和 Twitter）不同，可以使用基於 OAuth 訪問令牌的憑據直接實現登錄，Firebase Auth 不支持 Microsoft 等提供程序的相同功能，因為無法使用Firebase 身份驗證服務器，用於驗證 Microsoft OAuth 訪問令牌的受眾。這是一項關鍵的安全要求，可能會使應用程序和網站遭受重放攻擊，其中為一個項目（攻擊者）獲得的 Microsoft OAuth 訪問令牌可用於登錄另一個項目（受害者）。相反，Firebase Auth 提供了使用在 Firebase 控制台中配置的 OAuth 客戶端 ID 和密碼來處理整個 OAuth 流程和授權代碼交換的能力。由於授權碼只能與特定的客戶 ID/密碼一起使用，因此為一個項目獲得的授權碼不能與另一個項目一起使用。

如果需要在不受支持的環境中使用這些提供程序，則需要使用第三方 OAuth 庫和Firebase 自定義身份驗證。前者需要與提供者進行身份驗證，後者需要將提供者的憑據交換為自定義令牌。

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

如果您正在構建 Chrome 擴展應用程序，則必須添加您的 Chrome 擴展 ID：

在Firebase 控制台中打開您的項目。
在身份驗證部分中，打開登錄方法頁面。
將如下所示的 URI 添加到授權域列表中：
```
chrome-extension://CHROME_EXTENSION_ID
```

Chrome 擴展程序只能使用彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因為 Chrome 擴展程序不能使用 HTTP 重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出方法只能用於使用Manifest V2的擴展。較新的Manifest V3只允許服務工作者形式的後台腳本，根本無法執行彈出操作。

在 Chrome 擴展程序的清單文件中，確保將https://apis.google.com URL 添加到content_security_policy許可名單。

在創建項目時，Firebase 將為您的項目配置一個唯一的子域： https://my-app-12345.firebaseapp.com ://my-app-12345.firebaseapp.com。

這也將用作 OAuth 登錄的重定向機制。所有受支持的 OAuth 提供者都需要允許該域。但是，這意味著用戶在登錄 Microsoft 時可能會在重定向回應用程序之前看到該域：繼續：https://my-app-12345.firebaseapp.com 。

為避免顯示您的子域，您可以使用 Firebase 託管設置自定義域：

按照為託管設置域中的步驟 1 到 3 進行操作。當您驗證您的域所有權時，Hosting 會為您的自定義域提供 SSL 證書。
將您的自定義域添加到Firebase 控制台中的授權域列表： auth.custom.domain.com 。
在 Microsoft 開發人員控制台或 OAuth 設置頁面中，將重定向頁面的 URL 列入白名單，該頁面可在您的自定義域上訪問： https://auth.custom.domain.com/__/auth/handler 。

初始化 JavaScript 庫時，使用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);

下一步

用戶首次登錄後，會創建一個新用戶帳戶並將其鏈接到憑據（即用戶名和密碼、電話號碼或身份驗證提供商信息），即用戶登錄時使用的憑據。這個新帳戶作為 Firebase 項目的一部分存儲，可用於在項目中的每個應用中識別用戶，無論用戶如何登錄。

在您的應用程序中，了解用戶身份驗證狀態的推薦方法是在Auth對像上設置觀察者。然後，您可以從User對像中獲取用戶的基本配置文件信息。請參閱管理用戶。
在您的 Firebase 實時數據庫和雲存儲安全規則中，您可以從auth變量中獲取登錄用戶的唯一用戶 ID，並使用它來控制用戶可以訪問哪些數據。

您可以通過將身份驗證提供程序憑據鏈接到現有用戶帳戶來允許用戶使用多個身份驗證提供程序登錄您的應用程序。

要註銷用戶，請調用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

使用帶有 JavaScript 的 Microsoft 進行身份驗證

在你開始之前

使用 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

處理具有不同憑據的帳戶存在錯誤

彈出模式

重定向模式

高級：手動處理登錄流程

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

自定義 Microsoft 登錄的重定向域

下一步

Web version 9

Web version 8