如何在JavaScript中从Firebase Facebook登录获取用户头像？

• 确认登录权限已正确请求
  获取用户头像需要public_profile权限，必须在登录时明确请求：

  const provider = new FacebookAuthProvider();
  provider.addScope('public_profile');
  signInWithPopup(auth, provider)
    .then(res => { /* 登录成功处理 */ })
    .catch(err => { /* 错误处理 */ });
  

• 替换为Facebook高清头像链接
  Firebase返回的user.photoURL可能是默认小尺寸占位图，可通过用户的Facebook provider信息构造精准的高清头像URL：
  修改你的监听代码：

  onAuthStateChanged(auth, (user) => {
    if (user) {
      document.querySelector('.user-info > h3').textContent = user.displayName;
      
      // 筛选出Facebook登录的provider数据
      const fbProvider = user.providerData.find(p => p.providerId === 'facebook.com');
      if (fbProvider) {
        // 自定义头像尺寸（可调整width/height参数）
        const avatarUrl = `https://graph.facebook.com/${fbProvider.uid}/picture?width=500&height=500`;
        document.querySelector('.user-info > img').src = avatarUrl;
      } else {
        // 无Facebook数据时，回退到原头像或默认图
        document.querySelector('.user-info > img').src = user.photoURL || '/path/to/default-avatar.png';
      }
    }
  });
  

• 验证Facebook开发者后台配置

  1. 确保Facebook应用已开启「Facebook登录」产品
  2. 在OAuth设置中，将Firebase控制台提供的回调URL添加到「有效的OAuth重定向URI」列表
  3. 若应用处于测试状态，只有添加的测试用户能正常获取头像信息，可将应用切换为公开状态

• 处理用户无头像的场景
  若用户未设置Facebook头像，平台会返回占位图，可给img标签添加错误 fallback：

  <img src="" alt="用户头像" onerror="this.src='/path/to/default-avatar.png'">
  

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