React+Firebase集成Facebook认证返回photoURL为通用头像如何解决

核心配置调整 #

1. 配置认证Provider的权限和返回字段 #

初始化Facebook认证实例时，主动声明public_profile权限，同时指定返回大尺寸头像字段：

import { FacebookAuthProvider } from "firebase/auth";

const facebookProvider = new FacebookAuthProvider();
// 申请头像读取必要权限
facebookProvider.addScope('public_profile');
// 自定义Facebook Graph API返回字段，指定拉取大尺寸头像
facebookProvider.setCustomParameters({
  fields: 'id,name,email,picture.type(large)'
});

2. 从认证结果原始数据提取头像 #

不要直接使用Firebase默认返回的user.photoURL，该字段默认拉取的是Facebook低分辨率默认资源，需从认证附加信息中获取原始接口返回的真实头像地址：

import { signInWithPopup, getAdditionalUserInfo } from "firebase/auth";

signInWithPopup(auth, facebookProvider)
  .then((result) => {
    // 获取Facebook返回的原始用户信息
    const additionalUserInfo = getAdditionalUserInfo(result);
    const realAvatarUrl = additionalUserInfo.profile.picture.data.url;
    // 此处可将realAvatarUrl存入本地状态、Firestore用户文档等场景使用
  })

异常排查项 #

• 若为未上线的Facebook测试应用，需将测试账号添加到Facebook开发者后台的「测试人员」列表，未授权的测试账号无法拉取非公开头像资源
• 确认Facebook应用的public_profile权限已经通过平台审核，正式上线应用必须完成权限审核才可对非测试人员开放头像读取能力
• 确认用户Facebook账号的头像隐私设置允许第三方应用读取

注意：Facebook返回的头像地址存在有效期，不要永久固化存储，建议每次用户登录时重新拉取更新地址。

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