如何在OAuth 2.0流程中自定义Facebook公共主页列表并保留旧访问令牌

核心原因说明 #

你遇到的旧主页访问令牌自动失效问题，是Facebook OAuth 2.0的覆盖式授权机制导致的：每次请求页面权限时，用户在Facebook原生授权页勾选的主页列表会直接覆盖历史授权范围，未勾选的旧主页授权会被自动收回，对应令牌自然失效。

实现思路 #

你看到的其他站点的「自定义公共主页选择列表」并非修改了Facebook原生OAuth弹窗（Facebook不允许开发者自定义授权弹窗UI，违规修改会直接触发应用封禁），而是走了优化后的授权流程+自有页二次处理，具体步骤如下：

1. 调整授权请求参数，合并权限请求避免触发额外的主页选择弹窗
   你之前拆分了两次FB.login调用，第二次请求页面权限时会强制触发单独的公共主页选择页，且默认不会勾选之前授权过的主页。将两次权限请求合并，补充正确的授权参数即可避免该问题。
2. 授权完成后主动拉取全量已授权主页列表
   用户完成Facebook授权跳转回你的站点后，调用/me/accounts接口拉取当前用户所有已授权给应用的公共主页列表，在自有站点开发勾选页，将已存储过的旧主页默认设为勾选状态，用户确认后再单独存储新增主页的访问令牌即可，完全不需要修改Facebook原生弹窗。
3. 授权前增加用户提示
   在跳转到Facebook授权页之前，在你的站点增加提示，告知用户如果需要保留旧主页的授权，需要在Facebook的「选择你允许的内容」弹窗中保留旧主页的勾选状态，即可避免旧授权被收回。

修正后的代码示例 #

HTML部分 #

<script async="true" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

JS部分 #

window.fbAsyncInit = function() {
  FB.init({
    appId            : '替换为你的appid',
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v17.0' // 建议升级到最新可用版本，v10.0已经停止服务
  });
};

// 新增频道点击事件
function doFacebookLogin() {
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      handleAuthSuccess(response.authResponse);
    } else {
      // 合并所有权限一次请求，不要拆分两次FB.login
      FB.login(function(loginRes) {
        if (loginRes.authResponse) {
          handleAuthSuccess(loginRes.authResponse);
        }
      }, {
        scope: 'public_profile,email,pages_show_list,pages_manage_posts,pages_read_engagement,pages_read_user_content',
        return_scopes: true,
        auth_type: 'rerequest' // 如果之前用户拒绝过部分权限，会重新触发申请
      });
    }
  });
}

// 授权成功后处理逻辑
function handleAuthSuccess(authData) {
  // 调用接口拉取所有已授权的公共主页列表
  FB.api('/me/accounts', { access_token: authData.accessToken }, function(res) {
    if (res && !res.error) {
      const pageList = res.data;
      // 这里渲染你自己的公共主页勾选UI，已存储的旧主页默认勾选
      // 用户确认后仅新增需要的主页令牌，不覆盖旧的存储数据即可
      console.log('已授权主页列表', pageList);
    }
  });
}

关键注意事项 #

• Facebook原生OAuth弹窗的所有内容均为平台控制，开发者没有自定义权限，所有可自定义的选择列表均为授权完成后在自有站点实现的页面，不属于OAuth流程的一部分
• 建议升级Facebook SDK版本到最新正式版，旧版本SDK会存在功能失效、安全漏洞等问题
• 存储主页访问令牌时不要全量覆盖，每次仅新增用户本次选择的主页对应令牌，即可彻底避免旧令牌失效问题

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