本地主机上的 Firebase Facebook 身份验证

Posted 2023-02-22

【中文标题】本地主机上的 Firebase Facebook 身份验证

【英文标题】：Firebase Facebook authentication on localhost

【发布时间】：2021-07-07 20:54:01

【问题描述】：

我有一个使用 Firebase 进行身份验证的 Vue.js 应用程序，我正在尝试连接 Facebook 提供程序。我相信我的所有 Firebase 相关代码和配置都是正确的，但是当我从 http://localhost:8080 测试我的实现时，我不断收到 Can't load URL: The domain of this URL isn't included in the app's domains. Facebook 错误。

据我所知，问题是我需要提供一个有效的“回调”URL，它将身份验证响应返回给我的应用程序。这是 Firebase 在设置 Facebook 身份验证时告诉您的操作，以及我对错误的研究确认的内容，但 Facebook 应用程序设置页面中的 Valid OAuth Redirect URIs 字段（我推测我需要在其中放置返回 URL）拒绝包含 localhost 的 URL。我什至尝试将 URL 添加到“设置”页面中的任何其他字段，这些字段看起来像是他们想要 URL，但它们的响应都相同。这是一个展示这一点的屏幕截图：

所以我的问题是 1）如何配置我的 Facebook 应用以允许本地主机测试，以及 2）如何修复 Can't load URL Facebook 错误？

如果我需要包含我的登录前 Vue 代码，请告诉我。 FWIW，我使用 Firebase 的 linkWithRedirect(); 和 signInWithRedirect() 方法登录（而不是 linkWithPopup() 和 signInWithPopup()）。

【问题讨论】：

不带端口可以试试吗？

@ceejayoz 所以删除端口似乎没有什么区别，但如果我删除协议，它会接受它为https://localhost/__/auth/handler（现在是https，而不是http），如果我然后再次尝试登录，错误将更改为URL blocked: This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs. 感觉我们没有朝着正确的方向前进，但我会看看我能在这个新错误中找到什么。

【参考方案1】：

事实证明，您应该将 Firebase 为您提供的确切 .../__/auth/handler URL 粘贴到 Facebook Valid OAuth Redirect URIs 字段中，即使仍在本地开发时也是如此。我的印象是 URL 应该适应环境 - 即 http://localhost:8080/__/auth/handler 用于开发，https://my-app.firebaseapp.com/__/auth/handler 用于生产。

但是不行，即使在开发中也要使用生产 URL。