Facebook登录成功后如何获取用户头像路径？

Hey there! 我之前做FB登录功能的时候也碰到过这个问题，给你分享两个亲测有效的方法：

方法一：直接用用户ID构造头像URL #

这是最省事的办法，不需要额外调用API，因为Facebook的头像有固定的URL格式。只要你已经拿到了用户的id，直接替换下面的{user-id}就行：

https://graph.facebook.com/{user-id}/picture?type=normal

• 你可以通过修改type参数来调整头像尺寸：
  • type=small：小尺寸（约50x50像素）
  • type=normal：标准尺寸（约100x100像素）
  • type=large：大尺寸（约200x200像素）
  • type=square：正方形头像

举个例子，如果用户ID是123456789，那头像URL就是：

https://graph.facebook.com/123456789/picture?type=large

这个方法的好处是零额外请求，缺点是如果用户设置了头像隐私权限，可能无法访问（不过大部分用户的头像是公开的）。

方法二：调用Graph API获取头像（更可靠） #

如果你想确保能拿到正确的头像，或者需要更多头像相关信息，可以在获取用户基本信息的时候，把picture字段加入请求参数里。

结合你现有的代码，你可以在用户登录成功后调用这个API：

window.fbAsyncInit = function() {
  FB.init({
    appId: '1990039811315283', 
    status: true, 
    cookie: true, 
    xfbml: true
  });

  // 检测登录状态，获取用户完整信息
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      // 请求用户信息，包含头像字段
      FB.api('/me', {
        fields: 'id, name, email, picture.type(large)' // 指定头像尺寸
      }, function(userResponse) {
        if (userResponse && !userResponse.error) {
          // 拿到头像URL
          const avatarUrl = userResponse.picture.data.url;
          console.log('用户头像地址:', avatarUrl);
          // 把头像放到页面里（示例）
          // document.getElementById('avatar-img').src = avatarUrl;
        }
      });
    }
  });
};

(function() { 
  var e = document.createElement('script'); 
  e.async = true; 
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
  document.getElementById('fb-root').appendChild(e); 
}());

• 你也可以用width和height参数自定义头像大小，比如：

fields: 'id, name, email, picture.width(300).height(300)'

这种方法能获取到用户头像的真实URL，还能通过userResponse.picture.data.is_silhouette判断是不是Facebook的默认头像（如果用户没设置头像的话）。

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