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

Question

我正在尝试使用 firebase-ui 创建简单的登录流程。我使用 google 作为我的身份验证。我正在按照 https://github.com/firebase/firebaseui-web-react

的说明进行操作

这是我的 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

这就是我的 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();

当我运行这样做时，出现以下错误，如 chrome

中所示

[ 2.159s] [firebaseui] Internal error: {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}} console. @ index.js:1

我已经从

提供了API密钥

任何帮助将不胜感激

Answer 1

我刷新了我的 npm 并重新开始，它成功了。不确定是什么问题。但相同的代码现在可以使用了。

Answer 2

该错误表示您使用的 The API Key 不正确或无效。

检查正确The API Key并正确缓慢复制因为你可能抄错了。同时从 Firebase 控制台复制它。
如果你有多个API Key（或多个Firebase项目或Google 云项目）你可能会在他们之间发生冲突，这可能会造成这个问题。
在 Google Cloud Console 中尝试 REGENERATE KEY 这样的屏幕截图：

转到 Firebase 控制台，然后转到授权域并添加您正在使用的实时服务器（域），例如 localhost:

这是解决这个问题的所有可能方案。

非常感谢 Thread。

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

How do I fix signin error with firebase authentication

javascript

firebase

firebase-authentication

firebaseui