使用 Microsoft 与 JavaScript 进行身份验证,使用 Microsoft 与 JavaScript 进行身份验证

要让您的用户能够使用 OAuth 提供方（如 Microsoft Azure Active Directory）进行 Firebase 身份验证，您可以使用 Firebase SDK 执行端到端登录流程，将通用 OAuth 登录机制集成到您的应用中。

准备工作

如需让用户能够通过 Microsoft 账号（Azure Active Directory 和个人 Microsoft 账号）登录，您必须先启用 Microsoft 作为您的 Firebase 项目的登录服务提供方：

1. 将 Firebase 添加至您的 JavaScript 项目。
2. 在 Firebase 控制台中，打开 Auth 部分。
3. 在 Sign in method（登录方法）标签页中，启用 Microsoft 提供方。
4. 将该提供方的开发者控制台中的客户端 ID 和客户端密钥添加至提供方配置：
   1. 如需注册 Microsoft OAuth 客户端，请按照快速入门：使用 Azure Active Directory v2.0 端点注册应用中的说明进行操作。 请注意，此端点同时支持使用 Microsoft 个人账号和 Azure Active Directory 账号进行登录。 详细了解 Azure Active Directory v2.0。
   2. 向这些提供方注册应用时，请务必将项目的 *.firebaseapp.com 网域注册为应用的重定向网域。
5. 点击保存。

使用 Firebase SDK 处理登录流程

如果您是在构建 Web 应用，想要通过用户的 Microsoft 账号对其进行 Firebase 身份验证，最简单的方法是使用 Firebase JavaScript SDK 来处理整个登录流程。

如需使用 Firebase JavaScript SDK 处理登录流程，请按以下步骤操作：

1. 使用提供方 ID microsoft.com 创建 OAuthProvider 的一个实例。

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   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

2. 可选：指定您希望通过 OAuth 请求发送的其他自定义 OAuth 参数。

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   auth_msft_provider_params.js

   Web

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   microsoft-oauth.js

   如需查看 Microsoft 支持的参数，请参阅 Microsoft OAuth 文档。 请注意，您不能使用 setCustomParameters() 传递 Firebase 必需的参数。这些参数包括 client_id、response_type、redirect_uri、state、scope 和 response_mode。

   如需仅允许来自特定 Azure AD 租户的用户登录应用，可以使用 Azure AD 租户的易记域名或该租户的 GUID 标识符。为此，您可以在自定义参数对象中指定“tenant”字段。

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

   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

3. 可选：指定您希望向身份验证提供方申请获取的基本个人资料以外的额外 OAuth 2.0 范围。

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   如需了解详情，请参阅 Microsoft 权限和许可文档。

4. 使用 OAuth 提供方对象进行 Firebase 身份验证。您可以打开弹出式窗口或将用户重定向至登录页面，提示用户使用自己的 Microsoft 账号登录。在移动设备上最好使用重定向方法。

   • 如需使用弹出式窗口登录，请调用 signInWithPopup：

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

   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

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 API 升级。

   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

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

   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 访问令牌。

   使用 OAuth 访问令牌，您可以调用 Microsoft Graph API。

   例如，如需获取基本个人资料，可调用以下 REST API：

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

   与 Firebase Authentication 支持的其他提供方不同，Microsoft 不提供照片网址，您必须通过 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。

5. 以上示例侧重的是登录流程。除此之外，您也可以使用 linkWithPopup/linkWithRedirect 将 Microsoft 提供方与现有用户相关联。例如，您可以将多个提供方与同一个用户关联，以便用户使用任一提供方服务进行登录。

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

   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

6. 上述模式同样适用于 reauthenticateWithPopup/reauthenticateWithRedirect。对于要求用户必须在近期内登录过才能执行的敏感操作，可使用它来检索新的凭据。

   Web

   详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

   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

处理“account-exists-with-different-credential”错误

如果您在 Firebase 控制台中启用了每个电子邮件地址一个账号设置，当用户尝试使用一个 Firebase 用户的提供方（例如 Google）中已存在的电子邮件地址登录另一个提供方（例如 Microsoft）时，系统会抛出 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 Auth 服务器无法验证 Microsoft 等提供方的 OAuth 访问令牌的目标设备，因此 Firebase Auth 不支持通过这些提供方直接登录。 这是一项关键的安全要求，不满足该要求的应用和网站可能会受到重放攻击的威胁。在这种情况下，为某个项目（攻击者）获取的 Microsoft OAuth 访问令牌可能被用来登录另一个项目（受害者）。 因此，Firebase Auth 改为提供另一种功能，即使用在 Firebase 控制台中配置的 OAuth 客户端 ID 和密钥来处理整个 OAuth 流程和授权代码交换。由于授权代码只能与特定客户端 ID/密钥结合使用，因此为某个项目获取的授权代码不能用于另一个项目。

如果需要在不受支持的环境中使用这些提供方，则需使用第三方 OAuth 库和 Firebase 自定义身份验证。前者用于向提供方进行身份验证，后者则用于将提供方的凭据交换成自定义令牌。

在 Chrome 扩展程序中进行 Firebase 身份验证

如果您正在构建 Chrome 扩展程序应用，请参阅“屏幕外文档”指南。

为 Microsoft 登录服务自定义重定向网域

在创建项目时，Firebase 将为您的项目预配一个唯一的子网域：https://my-app-12345.firebaseapp.com。

它也将用作 OAuth 登录的重定向机制。该网域需要列入所有受支持的 OAuth 提供方的许可名单。但是，这意味着用户在登录 Microsoft 时可能会先看到该网域 (前往：https://my-app-12345.firebaseapp.com)，然后才重定向回应用。

如需避免显示子网域，您可以使用 Firebase Hosting 设置自定义网域：

1. 按照设置您的 Hosting 网域中的第 1 步到第 3 步执行操作。当您验证网域所有权时，Hosting 会为您的自定义网域预配一个 SSL 证书。
2. 在 Firebase 控制台中，将您的自定义域名添加到已获授权的域名列表：auth.custom.domain.com。
3. 在 Microsoft 开发者控制台或 OAuth 设置页面中，将可通过该自定义网域访问的重定向页面的网址 (https://auth.custom.domain.com/__/auth/handler) 加入许可名单。
4. 初始化 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 对象上设置观测者 (observer) 来了解用户的身份验证状态。然后，您便可从 User 对象获取用户的基本个人资料信息。请参阅管理用户。

• 在您的 Firebase Realtime Database 和 Cloud Storage 安全规则中，您可以从 auth 变量获取已登录用户的唯一用户 ID，然后利用此 ID 来控制用户可以访问哪些数据。

您可以通过将身份验证提供方凭据关联至现有用户账号，让用户可以使用多个身份验证提供方登录您的应用。

如需将用户退出登录，请调用 signOut：

Web

详细了解可实现摇树优化的模块化 Web API，并从命名空间型 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

Web

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