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

透過 JavaScript 使用 Microsoft 進行驗證

您可以讓使用者使用 OAuth 供應商通過 Firebase 驗證，例如整合一般 OAuth 登入機制的 Microsoft Azure Active Directory 進入您的應用程式，並透過 Firebase SDK 執行端對端登入流程。

事前準備

使用 Microsoft 帳戶 (Azure Active Directory 和個人) 登入使用者 Microsoft 帳戶)，您必須先將 Microsoft 設為來建立 Firebase 專案：

將 Firebase 新增至您的 JavaScript 專案。
在 Firebase 控制台中開啟「Auth」專區。
在「Sign in method」分頁中，啟用「Microsoft」供應商。
將供應商開發人員主控台中的「用戶端 ID」和「用戶端密鑰」新增至提供者設定：
1. 如要註冊 Microsoft OAuth 用戶端，請按照快速入門導覽課程：使用 Azure Active Directory v2.0 端點註冊應用程式。請注意，這個端點支援使用 Microsoft 個人帳戶和 Azure 登入 Active Directory 帳戶。瞭解詳情 Azure Active Directory v2.0 的相關資訊。
2. 向這些供應商註冊應用程式時，請務必註冊專案的 *.firebaseapp.com 網域，做為專案的重新導向網域應用程式。
按一下 [儲存]。

使用 Firebase SDK 處理登入流程

如要建構網頁應用程式，最簡單的方法就是 Firebase 會使用 Microsoft 帳戶處理整個登入流程已與 Firebase JavaScript SDK 整合

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

使用提供者 ID 建立 OAuthProvider 執行個體 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

選用：指定您想要的其他自訂 OAuth 參數。與 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

如需 Microsoft 支援的參數，請參閱 Microsoft OAuth 說明文件。請注意，您無法透過 setCustomParameters()。這些參數都是 client_id response_type、redirect_uri、state、scope 和 response_mode：

只允許特定 Azure AD 用戶群的使用者簽署插入應用程式，即 Azure AD 用戶群的易記網域名稱可以使用用戶群 GUID ID。方法是指定「用戶群」欄位的值。

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

選用：指定基本設定檔以外的其他 OAuth 2.0 範圍，設為要向驗證服務供應商發出要求
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
詳情請參閱 Microsoft 權限和同意聲明說明文件。

使用 OAuth 提供者物件向 Firebase 進行驗證。您可以提示即可讓使用者直接登入自己的 Microsoft 帳戶，方法是開啟彈出式視窗，或重新導向至登入頁面。重新導向方法是在行動裝置上顯示。

如要透過彈出式視窗登入，請呼叫 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

如要重新導向至登入頁面，請呼叫 signInWithRedirect：

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

使用者完成登入並返回頁面後，您就可以取得呼叫 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

成功完成後，您可以從 firebase.auth.UserCredential 物件擷取提供者。。

使用 OAuth 存取權杖可讓您呼叫 Microsoft Graph API。

舉例來說，如要取得基本設定檔資訊，請使用下列 REST API 可以稱為：

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

有別於 Firebase Auth 支援的其他供應商，Microsoft 不需要提供相片網址，並改為個人資料相片的二進位資料透過以下方式要求： Microsoft Graph API。

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

以上範例著重登入流程，不過您可以能讓您使用 linkWithPopup/linkWithRedirect。舉例來說以便將兩者登入

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

相同的模式 reauthenticateWithPopup/reauthenticateWithRedirect，可用於為需要近期執行的敏感作業擷取新憑證登入。

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

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

如果您已在 Firebase 控制台中啟用「每個電子郵件地址一個帳戶」設定：使用者嘗試使用現有的電子郵件地址登入供應商 (例如 Microsoft) 時與其他 Firebase 使用者的供應商 (例如 Google) 重複，發生錯誤 auth/account-exists-with-different-credential 會與 AuthCredential 物件 (Microsoft 憑證)。如要完成使用者必須先登入現有的供應商 (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) {
  // ...
}

重新導向模式

這項錯誤的處理方式與重新導向模式下相同，但有差異憑證必須在網頁重新導向之間快取 (例如使用工作階段儲存空間)。

不同於 Firebase 支援的其他 OAuth 供應商，例如 Google、Facebook 和 Twitter，使用 OAuth 存取權杖直接登入基於這個原因，Firebase Auth 不支援這是因為 Firebase 無法使用驗證伺服器，用於驗證 Microsoft OAuth 存取權杖的目標對象。這是重大的安全需求，可能會公開應用程式和會導致網站重新發動攻擊，攻擊者必須取得 Microsoft OAuth 存取權杖一個專案 (攻擊者) 可用來登入另一個專案 (受害者)。而是讓 Firebase 驗證能夠處理整個 OAuth 流程，使用 OAuth 用戶端 ID 和密鑰進行授權碼交換就可在 Firebase 控制台設定因為授權碼搭配特定的用戶端 ID/密鑰 (授權碼) 每項專案取得的均無法與另一項專案搭配使用

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

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

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

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

這也會用來做為 OAuth 登入的重新導向機制。網域允許所有支援的 OAuth 供應商。不過，這表示使用者可能會看到網域登入 Microsoft，然後再重新導向回應用程式： 繼續前往：https://my-app-12345.firebaseapp.com。

如要避免顯示子網域，你可以使用 Firebase Hosting 設定自訂網域：

按照以下步驟 1 到 3：為 Hosting 設定網域。完成驗證後的影響您的網域擁有權，Hosting 會為自訂網域佈建 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 Realtime Database和Cloud Storage中查看安全性規則透過 auth 變數取得已登入使用者的不重複使用者 ID。控管使用者可以存取的資料

您可以讓使用者透過多重驗證機制登入您的應用程式將驗證供應商憑證連結至現有的使用者帳戶

如要登出使用者，請呼叫 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

透過 JavaScript 使用 Microsoft 進行驗證

事前準備

使用 Firebase SDK 處理登入流程

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

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

彈出式視窗模式

重新導向模式

進階：手動處理登入流程

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

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

後續步驟

Web

Web