Firebase接入Google、Facebook登录提示当前域名未授权如何解决？

1. 修复OAuth域名授权报错 #

你收到的报错是因为本地开发域名没有被加入Firebase的授权白名单，按以下步骤操作即可解决：

• 打开Firebase控制台，进入你当前的项目
• 在左侧菜单找到「Authentication」（认证）板块，点击进入
• 切换到页面顶部的「登录方式」选项卡
• 下拉页面找到「OAuth重定向URI」模块，点击「添加域名」
• 输入报错提示的127.0.0.1，点击保存即可生效

注意：如果本地开发用的是带端口的地址（例如127.0.0.1:5500、localhost:3000），需要把带端口的完整地址也添加到重定向列表中，后续上线时还要把线上正式域名也加入列表

2. 补充Facebook登录实现 #

你当前的代码仅实现了Google登录逻辑，要添加Facebook登录按以下步骤操作：

前置配置 #

• 到Facebook开发者平台创建应用，获取应用ID与应用密钥
• 回到Firebase控制台「登录方式」页面，找到Facebook登录选项，开启后填写刚才获取的应用ID和密钥，再把Firebase给出的OAuth重定向URI复制粘贴到Facebook开发者平台的对应配置位置

代码修改 #

首先在导入部分新增FacebookAuthProvider的引入，再添加对应的点击事件逻辑即可：

// 原有导入基础上新增FacebookAuthProvider
import { getAuth, GoogleAuthProvider, FacebookAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js";

// Facebook登录逻辑
const fbProvider = new FacebookAuthProvider();
const signInWithFacebook = document.querySelector('#facebook-icon');
signInWithFacebook.addEventListener('click', (e) => {
    e.preventDefault();
    signInWithPopup(auth, fbProvider).then((result) => {
        const user = result.user;
        const credential = FacebookAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        // 此处添加登录成功后的业务逻辑
    })
    .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.email;
        const credential = FacebookAuthProvider.credentialFromError(error);
        // 此处添加错误处理逻辑
    });
});

额外排查项：如果配置完成后仍有报错，检查Firebase控制台中Google、Facebook的登录开关是否已经正常开启，同时确认第三方平台的应用配置没有设置访问权限限制

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