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

Question

我将 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>

注意：我通过 X 更改了它的 20 位数字来混淆了真正的密钥。

原文由 Ahmet Eroğlu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 API 密钥无效，请检查您是否已正确复制

显示此错误的原因有很多。我想解释一下我是如何解决这个问题的。

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

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

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

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

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

 firebase.initializeApp(firebaseConfig);

如果您从此解决方案中获得帮助，请按赞。谢谢你。

原文由 Mustaque Nadim 发布，翻译遵循 CC BY-SA 4.0 许可协议