Docker容器内Angular应用集成Facebook SDK登录失败求助

这个问题的核心原因很明确：你Docker部署后使用的访问域名localhost.xxxx.com:4201没有被添加到Facebook应用的允许域名列表中，而本地ng serve用的域名已经在列表里，所以本地正常、Docker环境报错。下面是具体的解决步骤：

1. 更新Facebook开发者后台的应用设置 #

• 登录Facebook开发者平台，找到你的目标应用
• 进入「Settings > Basic」页面，在「App Domains」字段中添加localhost.xxxx.com（注意这里不需要加端口，App Domains只填域名部分）
• 切换到「Products > Facebook Login > Settings」页面，在「Valid OAuth Redirect URIs」中填入完整的回调URL，比如http://localhost.xxxx.com:4201/[你的回调路径]——这个路径要和你Angular应用中Facebook登录配置的回调地址完全一致

2. 确保Angular应用的回调地址动态适配环境 #

不要在代码里硬编码回调地址，而是用当前页面的origin来动态生成，这样不管是本地开发还是Docker部署都能自动适配：

// 示例Facebook SDK初始化代码
import { FacebookLoginProvider, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';

export const socialAuthServiceConfig: SocialAuthServiceConfig = {
  autoLogin: false,
  providers: [
    {
      id: FacebookLoginProvider.PROVIDER_ID,
      provider: new FacebookLoginProvider(
        '你的Facebook App ID',
        {
          redirectUri: `${window.location.origin}/auth/facebook/callback`
        }
      )
    }
  ]
};

3. 重启服务并测试 #

• 先停止并重启Docker容器，确保配置生效：

docker-compose down && docker-compose up -d

• 清除浏览器缓存（或者用无痕模式打开页面），避免旧的缓存导致的域名验证问题

这样操作后，Docker部署的应用就能正常触发Facebook登录流程了。

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