控制台中的 Firebase 无效 api 密钥错误

我将 Firebase-auth 用于我正在使用电子框架开发的 Web 应用程序。我使用项目设置创建了一个 API 密钥,并按照 Firebase 指南中的建议将其复制到我的 html 正文中。但是,当我在浏览器上打开 HTML 页面时,控制台显示以下错误。

code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error

HTML 页面正文的底部如下所示。

 <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
          <script>
            // Initialize Firebase
            var config = {
              apiKey: "AIzaSyAXXXXXXXXXXXXXXXXXXXXjILO32ZDxRKY",
              authDomain: "jumbleup-773da.firebaseapp.com",
              databaseURL: "https://jumbleup-773da.firebaseio.com",
              projectId: "jumbleup-773da",
              storageBucket: "jumbleup-773da.appspot.com",
              messagingSenderId: "971123072180"
            };
            firebase.initializeApp(config);
          </script>

注意:我通过将 20 位数字更改为 X 来混淆真正的密钥。

stack overflow Firebase invalid api key error in console
原文答案

答案:

作者头像

您的 API 密钥无效,请检查您是否正确复制了它

此错误可能有多种原因。我想解释一下我是如何解决这个问题的。

首先,我为我的网站复制了 firebaseConfig 变量,单击复制按钮,并将其保存在我的源文件夹下,创建一个名为 firebase.config.js 的文件。

export const firebaseConfig = {
    apiKey: 'AIzaSxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'fir-axxxxxxxxxxxxxxxxxxxxxxxxxx',
    projectId: 'fir-axxxxxxxxxxxxxxxxx',
    storageBucket: 'fir-axxxxxxxxxxxxxxxxxx',
    messagingSenderId: '106xxxxxxxxxxxxxx',
    appId: '1:1064xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

其次,我通过在我的 App.js 文件中导入 firebaseConfig 变量来调用它。

import { firebaseConfig } from './firebase.config';

最后,我在下面的这一行中使用了这个变量。

firebase.initializeApp(firebaseConfig);

如果您从该解决方案中获得帮助,请按upvote。谢谢你。

作者头像

首先安装 firebase,然后首先将 firebase 导入为 import firebase from 'firebase'; 或在 js 脚本中。下面的代码用于将应用程序连接到 firebase,其中包括 id 和连接 firebase 的所有详细信息。

const config ={

    apiKey: "XXXXXXXXXXXX",
    authDomain: "app.firebaseapp.com",
    databaseURL: "https://app.firebaseio.com",
    projectId: "XXXXXX2",
    storageBucket: "XXXXXX.appspot.com",
    messagingSenderId: "5..........",
    appId: "1:52807............."
}

firebase.initializeApp(config);
export default firebase;
作者头像
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "chxxxxxxxxxxxxxx",
    projectId: "chxxxxxxxxxxxxxxxx",
    storageBucket: "chxxxxxxxxxxxxxxxx",
    messagingSenderId: "7xxxxxxxxxxxxxxx",
    appId: "1:7xxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxx"
  }
};

在您的环境中添加它

作者头像

我正在使用React。
我也遇到了相同的错误,因为在声明之后,我在.env文件中 , 存在。

之前: REACT_APP_API_KEY="AIXXXXXXXXXXXX",

之后: REACT_APP_API_KEY="AIXXXXXXXXXXXX"

作者头像

在这样的firebase配置之后:

const firebaseConfig = {
    apiKey:process.env.REACT_APP_apiKey,
    authDomain:process.env.REACT_APP_authDomain,
    projectId:process.env.REACT_APP_projectId,
    storageBucket:process.env.REACT_APP_storageBucket,
    messagingSenderId:process.env.REACT_APP_messagingSenderId,
    appId:process.env.REACT_APP_appId,
}

您可以通过 Ctrl + c => y 停止服务器并再次运行服务器(npm start)。它会起作用的。我也遇到了这样的错误,在遵循这个之后我的代码运行良好。你可以试试,希望对你有帮助。

作者头像

首先...

  1. 确保您正确复制了密钥。
    2.如果您确认您复制正确并且其余的东西都可以,但仍然显示错误...
    3.然后只需关闭所有文件并从您的 Gmail 帐户中注销
    4.然后再次登录并打开您的文件和文件夹。

希望它会奏效。在我的情况下......它就像我说的那样工作。