Facebook登录按钮data-onlogin回调事件无法触发问题求助

核心问题原因 #

• data-onlogin属性不支持直接传入匿名函数/箭头函数：Facebook SDK的内置属性仅支持接收全局作用域下的函数名称作为参数，直接写入的函数表达式无法被SDK正确解析调用，这是回调不触发的最主要原因。
• worker-src报错是Safari版本兼容问题：Safari 14.1.1版本的CSP规则不识别worker-src指令，这个指令是Facebook SDK返回的响应头自带的，虽然本身不直接阻断回调执行，但如果站点自身的CSP配置不当，也可能连带限制SDK的逻辑执行。

修复步骤 #

1. 调整回调写法 #

首先在全局作用域下定义回调函数，示例代码：

// 要定义在window可访问的全局作用域，不要包在其他函数/闭包里
function handleFbLogin(evt) {
  console.log('Facebook Login');
  loginFacebook(evt);
}

之后修改登录按钮的data-onlogin属性，仅传入函数名即可：

<div class="fb-login-button" 
  data-width="" 
  data-size="large" 
  data-button-type="continue_with" 
  data-layout="default" 
  data-auto-logout-link="true" 
  data-use-continue-as="true" 
  data-onlogin="handleFbLogin">
</div>

2. 兼容CSP报错 #

如果要消除worker-src相关的报错，在你站点的CSP响应头中，将worker-src对应的资源规则同时补充到child-src规则中即可，旧版Safari使用child-src管控Worker类资源，补充后即可兼容。

额外检查项 #

• 确认Facebook开发者后台已正确配置你站点的域名到OAuth合法回调域名列表，SDK初始化的appId参数无误
• 如果你站点配置了CSP的script-src规则，确保Facebook相关域名已加入白名单，避免SDK的脚本执行被拦截

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