控制台中的 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 位数字来混淆真正的密钥。

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';

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

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

如果您从此解决方案中得到一些有用的信息，请按“投票”。谢谢。

Answer 2

对于使用 Next.js 的用户，您需要在每个环境变量前面加上NEXT_PUBLIC_.

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};