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

透過 JavaScript 使用 Microsoft 進行驗證

您可以使用 Firebase SDK 將一般 OAuth 登入整合至您的應用程式，利用 Firebase SDK 執行端對端登入流程，讓使用者透過 Microsoft Azure Active Directory 等 OAuth 供應商驗證 Firebase。

事前準備

如要使用 Microsoft 帳戶 (Azure Active Directory 和個人 Microsoft 帳戶) 登入使用者，您必須先啟用 Microsoft 做為 Firebase 專案的登入提供者：

將 Firebase 新增至您的 JavaScript 專案。
在 Firebase 控制台開啟「驗證」專區。
在「Sign in method」分頁中，啟用「Microsoft」供應商。
從供應商的 Play 管理中心，新增「用戶端 ID」和「用戶端密鑰」到供應商設定：
1. 如要註冊 Microsoft OAuth 用戶端，請按照快速入門導覽課程：使用 Azure Active Directory v2.0 端點註冊應用程式。請注意，這個端點支援使用 Microsoft 個人帳戶和 Azure Active Directory 帳戶登入。進一步瞭解 Azure Active Directory 2.0 版。
2. 向這些供應商註冊應用程式時，請務必為專案的 *.firebaseapp.com 網域註冊應用程式的重新導向網域。
點選「Save」。

使用 Firebase SDK 處理登入流程

如要建構網頁應用程式，使用 Microsoft 帳戶透過 Firebase 驗證使用者最簡單的方式，就是透過 Firebase JavaScript SDK 處理整個登入流程。

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作：

使用提供者 ID microsoft.com 建立 OAuthProvider 的執行個體。

網頁模組 API

import { OAuthProvider } from "firebase/auth";

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

網路命名空間 API

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

選用：指定要與 OAuth 要求一起傳送的其他自訂 OAuth 參數。

網頁模組 API

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

網路命名空間 API

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 ID。方法是在自訂參數物件中指定「用戶群」欄位。

網頁模組 API

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

網路命名空間 API

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：

網頁模組 API

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

網路命名空間 API

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：

使用 signInWithRedirect、linkWithRedirect 或 reauthenticateWithRedirect 時，請遵循最佳做法。

網頁模組 API

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

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

網路命名空間 API

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

使用者完成登入並返回頁面後，您可以呼叫 getRedirectResult 來取得登入結果。

網頁模組 API

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

網路命名空間 API

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 驗證支援的其他供應商，Microsoft 不提供相片網址，而是必須透過 Microsoft Graph API 要求個人資料相片的二進位資料。

除了 OAuth 存取權杖之外，您也可以透過 firebase.auth.UserCredential 物件擷取使用者的 OAuth ID 權杖。ID 權杖中的 sub 憑證附加資訊僅適用於應用程式，與 Firebase 驗證使用且可透過 user.providerData[0].uid 存取的聯合使用者 ID 不相符。應改用 oid 憑證附加資訊欄位。使用 Azure AD 用戶群登入時，oid 憑證附加資訊會完全相符。但如果是非用戶群的情況，系統會填補 oid 欄位。如果是聯合 ID 4b2eabcdefghijkl，oid 會採用形式 00000000-0000-0000-4b2e-abcdefghijkl。

雖然上述範例著重於登入流程，但您也可以使用 linkWithPopup/linkWithRedirect 將 Microsoft 供應商連結至現有的使用者。舉例來說，您可以將多個提供者連結至同一位使用者，允許他們透過任一提供者登入。

網頁模組 API

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

網路命名空間 API

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 搭配使用，針對需要近期登入的敏感作業擷取最新憑證。

網頁模組 API

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

網路命名空間 API

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) 時，系統會擲回 AuthCredential 物件 (Microsoft 憑證) 和 AuthCredential 物件。auth/account-exists-with-different-credential如要完成目標提供者的登入程序，使用者必須先登入現有的提供者 (Google)，然後再連結至先前的 AuthCredential (Microsoft 憑證)。

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

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) {
  // ...
}

重新導向模式

這項錯誤的處理方式與重新導向模式類似，但不同頁面重新導向之間必須快取待處理憑證 (例如使用工作階段儲存空間)。

與 Google、Facebook 和 Twitter 等 Firebase 支援的其他 OAuth 供應商不同，後者可利用 OAuth 存取權杖式憑證直接登入，因為 Firebase 驗證伺服器無法驗證 Microsoft OAuth 存取權杖的目標對象，因此 Firebase 驗證不支援類似 Microsoft 等供應商的功能。這是重大的安全需求，可能會導致應用程式和網站受到重送攻擊。攻擊者只能使用為一項專案 (攻擊者) 取得的 Microsoft OAuth 存取權杖登入其他專案 (受害者)。相反地，Firebase 驗證可使用在 Firebase 控制台中設定的 OAuth 用戶端 ID 和密鑰，處理整個 OAuth 流程和授權碼交換。由於授權碼只能與特定用戶端 ID/密鑰搭配使用，因此為某項專案取得的授權碼不能與其他專案搭配使用。

如果必須在不支援的環境中使用這些提供者，就需要使用第三方 OAuth 程式庫和 Firebase 自訂驗證。前者須與提供者進行驗證，後者需要交換提供者的憑證，以用於自訂權杖。

在 Chrome 擴充功能中使用 Firebase 驗證

如要建構 Chrome 擴充功能應用程式，請參閱螢幕外文件指南。

建立專案時，Firebase 會為專案佈建一個專屬的子網域：https://my-app-12345.firebaseapp.com。

這也會用來做為 OAuth 登入的重新導向機制。所有支援的 OAuth 供應商均須允許該網域。不過，這意味著，使用者登入 Microsoft 時可能會看到該網域：Continue to: https://my-app-12345.firebaseapp.com。

如要避免顯示子網域，你可以透過 Firebase 託管設定自訂網域：

按照為託管設定網域中的步驟 1 至 3 操作。驗證網域擁有權之後，「託管」會為您的自訂網域佈建安全資料傳輸層 (SSL) 憑證。
將您的自訂網域新增至 Firebase 控制台的授權網域清單：auth.custom.domain.com。
在 Microsoft 開發人員主控台或 OAuth 設定頁面中，將重新導向頁面的網址加入許可清單 (您可在自訂網域中存取)：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 即時資料庫和 Cloud Storage 安全性規則中，您可以透過 auth 變數取得登入使用者的專屬 ID，並使用該 ID 控管使用者可存取哪些資料。

您可以將驗證供應商憑證連結至現有的使用者帳戶，讓使用者透過多個驗證服務提供者登入您的應用程式。

如要登出使用者，請呼叫 signOut：

網頁模組 API

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

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

網路命名空間 API

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

透過 JavaScript 使用 Microsoft 進行驗證

事前準備

使用 Firebase SDK 處理登入流程

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

網頁模組 API

網路命名空間 API

處理具有不同憑證錯誤的帳戶

彈出式視窗模式

重新導向模式

進階：手動處理登入流程

在 Chrome 擴充功能中使用 Firebase 驗證

自訂用於 Microsoft 登入的重新導向網域

後續步驟

網頁模組 API

網路命名空間 API