Javascript 如何使用firebase身份验证修复登录错误

我正在尝试使用firebase ui创建简单的登录流。我使用谷歌作为我的身份验证。我是按照你的指示去做的

这是我的src/login.js

// Import FirebaseAuth and firebase.
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';

// Configure Firebase.
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
firebase.initializeApp(config);

// Configure FirebaseUI.
const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: '/signedIn',
  // We will display Google and Facebook as auth providers.
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
};

function SignInScreen() {
  return (
    <div>
      <h1>Playground</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
    </div>
  );
}

export default SignInScreen

//导入FirebaseAuth和firebase。
从“react firebaseui/StyledFirebaseAuth”导入StyledFirebaseAuth；
从“firebase”导入firebase；
//配置Firebase。
//对于Firebase JS SDK v7.20.0及更高版本，measurementId是可选的
常量firebaseConfig={
apiKey:“，
authDomain:“”，
投射：“，
storageBucket:“”，
messagingSenderId:“”，
appId:“”，
计量单位：“
};
firebase.initializeApp（配置）；
//配置FirebaseUI。
常量uiConfig={
//弹出签名流，而不是重定向流。
signInFlow:“弹出窗口”，
//登录成功后重定向到/signedIn。或者，您可以提供callbacks.SignInsAccess函数。
SignInsAccessUrl:“/signedIn”，
//我们将显示谷歌和Facebook作为身份验证提供商。
签署：[
firebase.auth.GoogleAuthProvider.PROVIDER\u ID，
],
};
函数符号屏幕（）{
返回(
游乐场
请登录：

);
}
导出默认标志屏幕

这就是我的index.js的样子

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SignInScreen from './login.js'
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <SignInScreen />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./login.js”导入符号筛选
从“/reportWebVitals”导入reportWebVitals；
ReactDOM.render(
,
document.getElementById（'root'））
);
//如果您想开始测量应用程序的性能，请传递一个函数
//记录结果（例如：reportWebVitals（console.log））
//或发送到分析端点。
reportWebVitals（）；

当我运行这个程序时，会出现如下错误，如chrome中所示

[2.159s][firebaseui]内部错误：{“错误”：{“代码”：400，“消息”：“API密钥无效。请传递有效的API密钥。”，“错误”：[{“消息”：“API密钥无效。请传递有效的API密钥。”，“域”：“全局”，“原因”：“badRequest”}]，“状态”：“无效参数”} 控制台@index.js:1

我已从提供API密钥

---

任何帮助都将不胜感激

我刷新了我的npm并重新开始，它成功了。不知道是什么问题。但是相同的代码现在可以工作。

该错误意味着您使用的API密钥不正确或无效

正确检查API密钥的

并正确缓慢地复制
因为你可能抄错了。也可以从Firebase控制台复制它

如果您有多个

API密钥

（或多个Firebase project或Google） 云项目）您可能会在它们之间发生冲突，这可能会造成此问题 问题

在谷歌云控制台中尝试

重新生成密钥

，如下图所示：

转到Firebase控制台，然后转到授权域并添加您正在使用的Live Server（域），如

localhost:

这是解决这个问题的所有可能的解决办法

---

非常感谢。

太好了；你知道如何打开DevTools控制台吗？不知道。如果你能提供帮助，那就太好了。你的浏览器是什么？我正在使用chromeFollow打开DevTools控制台。在那之后告诉我？