Firebase集成Microsoft登录后user对象返回null的问题

问题描述 #

我正在使用Google Firebase为Web端实现用户登录功能，Google和Facebook登录均正常（能获取到完整的user对象），但Microsoft登录时，即使在登录页面完成授权，返回的user对象仍为null。测试时使用ngrok将本地站点转为HTTPS地址，结果依然相同。

现有代码 #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import {
    getAuth,
    signInWithRedirect,
    getRedirectResult,
    signOut,
    GoogleAuthProvider,
    FacebookAuthProvider,
    OAuthProvider, // microsoft
    onAuthStateChanged
} from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

const firebaseConfig = { /* my settings */ };
const firebase = initializeApp(firebaseConfig);
const auth = getAuth(firebase);

document.querySelector('.login-with button.microsoft').addEventListener('click', microsoftSignIn, false);

function microsoftSignIn() {
    const provider = new OAuthProvider('microsoft.com');
    signInWithRedirect(auth, provider);
}

onAuthStateChanged(auth, user => {
    if (user) {
        console.log("user is logged in", user);
    } else {
        console.log("user is not logged in");
    }                                                                                                                                                                                                                
});

已完成的配置 #

• Azure AD中已设置重定向URI为https://my-app.firebaseapp.com/__/auth/handler，同时添加了localhost地址
• 已授予应用登录用户的权限
• 已将Azure AD的客户端ID和密钥复制到Firebase Auth配置中

解决步骤 #

1. 核对Firebase Auth的Microsoft提供商配置 #

• 登录Firebase控制台，进入Auth > Sign-in method > Microsoft，确认：
  • 已正确填写Azure AD应用的客户端密钥（注意是Azure中的客户端密码，而非客户端ID）
  • Microsoft登录提供商的状态为启用

2. 修正Azure AD重定向URI类型 #

在Azure AD应用注册的「认证」页面，将重定向URI的类型设置为Web，而非单页应用或其他类型，确保与Firebase的回调机制兼容。

3. 显式添加Microsoft Graph授权范围 #

在初始化Microsoft OAuthProvider时，添加User.Read基础范围，确保能获取用户基本信息：

function microsoftSignIn() {
    const provider = new OAuthProvider('microsoft.com');
    provider.addScope('User.Read'); // 新增这一行
    signInWithRedirect(auth, provider);
}

4. 显式处理重定向结果 #

仅依赖onAuthStateChanged可能无法捕获重定向过程中的错误，添加getRedirectResult来获取授权结果并排查问题：

// 页面加载时调用，处理重定向回调
async function checkRedirectResult() {
  try {
    const result = await getRedirectResult(auth);
    if (result) {
      console.log("登录成功", result.user);
    }
  } catch (error) {
    console.error("登录错误详情：", error);
    // 错误信息会直接提示问题，比如密钥不匹配、重定向URI错误等
  }
}
// 页面初始化时执行
checkRedirectResult();

5. 检查Firebase授权域 #

在Firebase控制台的Auth > Settings > Authorized domains中，确保你的生产域名、localhost、ngrok生成的临时域名都已添加，避免Firebase拦截未授权域名的请求。

6. 确认Azure AD权限配置 #

• 确保授予的是委派权限，而非应用权限
• 如果是企业租户应用，需点击「授予管理员同意」，确保普通用户登录时能获取权限

验证方式 #

完成上述配置后，清除浏览器缓存和Cookie，重新测试登录。打开浏览器开发者工具控制台，查看checkRedirectResult输出的错误信息，这是定位问题最直接的依据。

内容的提问来源于stack exchange，提问作者mulllhausen