错误 400：redirect_uri_mismatch 与 Firebase Auth - 来自 Firebase 托管网站的 GoogleAuthProvider

Question

我一直在 youtube 上观看有关使用 firebase 身份验证登录与 google 弹出页面的视频，但没有人访问或使用 Google Cloud 并设置 OAuth 2.0 客户端 ID。 运行此代码时，我从 google 收到弹出窗口，但它抛出 html 400 错误，并且返回的错误状态为：

.

您无法登录此应用程序，因为它不符合 Google 的 OAuth 2.0 政策。

如果您是应用开发者，请在 Google Cloud Console 中注册重定向 URI。 索取详情：

redirect_uri=https://www.{mywebsite}.com/__/auth/handler

.

我尝试访问谷歌云和开发人员页面并设置 OAuth 2.0 客户端 ID，说实话我不明白哪里出了问题

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    //Private Firebase Config
  };

initializeApp(firebaseConfig);

import { 
    getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signInWithEmailAndPassword,
    signOut
 } from "firebase/auth";

const auth = getAuth(); 

const GoogleProvider = new GoogleAuthProvider(firebaseConfig);

GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.email');
GoogleProvider.addScope('https://www.googleapis.com/auth/userinfo.profile');

--在此处使用电子邮件代码登录--

Firebase Web Api 9.22.2 新的模块化登录页面

const SignInWithGoogle = document.querySelector('.signinWithGoogle')
SignInWithGoogle.addEventListener('submit', (e) => {
    e.preventDefault()


signInWithPopup(auth, GoogleProvider)
.then((result) => {
  const user = result.user;

  alert('signed in user! User: ', user.user)
})
.catch((error) => {

  const errorCode = error.code;
  const errorMessage = error.message;

  alert(errorMessage + " " + errorCode + " : Error Signing In")

  const credential = GoogleAuthProvider.credentialFromError(error);

  alert(credential.error + " : Error Signing In")
});
})

Answer 1

找到解决方案！

问题是当我设置 firebase 项目时，我使用了不同的域，它默认为 firebase 默认项目域“{projectname}.firebase.com”。我尝试创建一个新帐户，但不知道 firebase 会自动为您生成一个服务帐户。这个 Firebase 云帐户可以通过以下方式找到

项目概述（左上）> 项目设置 > 服务帐户 > 管理服务帐户权限（右上）。

这将带您进入与您的 Firebase Web 项目关联的 google 云页面，您将单击 google 云开发人员页面左上角的 3 行，然后转到

Api 和服务 > 凭证（左侧竖条）

在这里您应该看到 google 生成的 OAuth2.0 设置。有了这些，您可以从

更新它们

“{项目名称}.firebase.com” 到 “https://www.{yourdomain}.com”

以及来自

的重定向链接

“{项目名称}.firebase.com/__/auth/handler”
到 “https://www.{yourdomain}.com/__/auth/handler”

Answer 2

进一步了解OP的解决方案（谢谢）。我发现使用更新的 URI 添加额外的 OAuth 2.0 客户端 ID 对我来说不起作用。相反，我必须编辑现有的客户端 ID 并向其添加 URI。

我的经验是，这会立即传播。