您可以使用 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」和「用戶端密鑰」到供應商設定:
- 如要註冊 Microsoft OAuth 用戶端,請按照 快速入門導覽課程:使用 Azure Active Directory v2.0 端點註冊應用程式。請注意,這個端點支援使用 Microsoft 個人帳戶和 Azure Active Directory 帳戶登入。 進一步瞭解 Azure Active Directory 2.0 版。
- 向這些供應商註冊應用程式時,請務必為專案的
*.firebaseapp.com
網域註冊應用程式的重新導向網域。
- 按一下「儲存」。
使用 Firebase SDK 處理登入流程
如要建構網頁應用程式,使用 Microsoft 帳戶透過 Firebase 驗證使用者最簡單的方式,就是透過 Firebase JavaScript SDK 處理整個登入流程。
如要使用 Firebase JavaScript SDK 處理登入流程,請按照下列步驟操作:
使用提供者 ID microsoft.com 建立 OAuthProvider 的執行個體。
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
Web
var provider = new firebase.auth.OAuthProvider('microsoft.com');
選用:指定要與 OAuth 要求一起傳送的其他自訂 OAuth 參數。
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Web
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
如要瞭解 Microsoft 支援的參數,請參閱 Microsoft OAuth 說明文件。請注意,您無法透過
setCustomParameters()
傳遞 Firebase 所需的參數。這些參數包括 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' });
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' });
選用:指定您要求驗證供應商的基本設定檔以外的其他 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. });
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. });
- 如要重新導向至登入頁面,請呼叫
signInWithRedirect
:
使用
signInWithRedirect
、linkWithRedirect
或reauthenticateWithRedirect
時,請遵循最佳做法。Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
使用者完成登入並返回頁面後,您可以呼叫
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. });
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. });
成功完成後,您就能從傳回的
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
欄位。如果是聯合 ID4b2eabcdefghijkl
,oid
會採用形式00000000-0000-0000-4b2e-abcdefghijkl
。- 如要透過彈出式視窗登入,請呼叫
雖然上述範例著重於登入流程,但您也可以使用
linkWithPopup
/linkWithRedirect
將 Microsoft 供應商連結至現有的使用者。舉例來說,您可以將多個提供者連結至同一位使用者,允許他們透過任一提供者登入。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. });
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. });
相同的模式可與
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. });
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. });
在 Chrome 擴充功能中使用 Firebase 驗證
如要建構 Chrome 擴充功能應用程式,請參閱 螢幕外文件指南。
後續步驟
使用者首次登入時,系統會建立新的使用者帳戶,並連結至憑證 (即使用者名稱與密碼、電話號碼或驗證提供者資訊),也就是使用者登入時使用的憑證。這個新帳戶會儲存在您的 Firebase 專案中,可用來識別專案中各個應用程式的使用者 (無論使用者登入方式為何)。
-
如要在應用程式中瞭解使用者的驗證狀態,建議在
Auth
物件上設定觀察器。接著,您就能從User
物件取得使用者的基本個人資料資訊。請參閱管理使用者一文。 在 Firebase 即時資料庫和 Cloud Storage 安全性規則中,您可以透過
auth
變數取得登入使用者的專屬 ID,並使用該 ID 控管使用者可存取哪些資料。
您可以將驗證供應商憑證連結至現有的使用者帳戶,讓使用者透過多個驗證服務提供者登入您的應用程式。
如要登出使用者,請呼叫
signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });