首页 > 解决方案 > Firebase 管理员无法确定项目 ID

问题描述

我有一个反应应用程序,我已经向它添加了 firebase。注册会创建一个新的用户帐户,但由于必须跟踪用户,我已经获得了用户的 id 令牌并将其添加到本地存储中。然后它将用户带到带有路由链接“/dashboard”的仪表板页面,但任何人都可以在不注册的情况下访问该链接,它需要保存在本地存储中的 id 令牌,然后使用 firebase admin 来验证 id。如果验证成功,则加载页面。否则它将用户重定向到登录页面。但是,当我创建一个新帐户时,我被定向到仪表板,然后重定向回登录页面。id 令牌已正确放入本地存储并已创建帐户,但出现错误
Failed to determine project ID: Error while making request: Failed to fetch. Error code: undefined at FirebaseAppError.FirebaseError [as constructor] (error.js:44) at FirebaseAppError.PrefixedFirebaseError [as constructor] (error.js:90) at new FirebaseAppError (error.js:125) at credential-internal.js:183
这是我的代码:
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import firebase from "firebase/app";
import admin from "firebase-admin";

const firebaseConfig = {
  // In the actual code I have set all of them
}
firebase.initializeApp(firebaseConfig);
admin.initializeApp();

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


注册.js:

import React, { useState, useEffect } from "react";
import { useHistory, Link } from "react-router-dom";
import firebase from "firebase";
import admin from "firebase-admin";

function Signup() {
  const [userInfo, setUserInfo] = useState({email: "", username: "", password: ""});
  const [errorMessage, setErrorMessage] = useState();
  const [idToken, setIdToken] = useState();

  const history = useHistory();

  useEffect(() => {
    setIdToken(localStorage.getItem("idToken"));

    if (idToken !== undefined && idToken !== null) {
      admin.auth().verifyIdToken(idToken)
      .then(() => {
        history.push("/dashboard");
      })
      .catch(() => {
        localStorage.removeItem("idToken");
      })
    }
  }, []);

  const getText = ({target}) => {
    setUserInfo({...userInfo, [target.name]: target.value});
  }

  const signup = (e) => {
    e.preventDefault();

    const {username, email, password} = userInfo;

    if (username === "" || email === "" || password === "") {
      setErrorMessage("Username, Email and Password cannot be empty.");
    } else if (password.length < 8) {
      setErrorMessage("Password cannot be less than 8 characters long.");
    } else {
      firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        userCredential.user.updateProfile({
          displayName: username
        })
        userCredential.user.getIdToken()
        .then((idToken) => {
          localStorage.setItem("idToken", idToken);
          history.push("/dashboard");
        })
      })
      .catch((error) => {
        setErrorMessage(error.message);
      })
    }
  }

  return(
    <div>
      <form onSubmit={signup}>
        <input
          type="email"
          name="email"
          placeholder="Email"
          onChange={getText}
        />
        <br />
        <input
          type="text"
          name="username"
          placeholder="Username"
          onChange={getText}
        />
        <br />
        <input
          type="password"
          name="password"
          placeholder="Password"
          onChange={getText}
        />
        <br />
        <p>{errorMessage}</p>
        <input type="submit" value="Sign Up" />
        <p>Already have an account? <Link to="/login">Log In</Link></p>
      </form>
    </div>
  );
}

export default Signup;


仪表板.js:

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import admin from "firebase-admin";

function Dashboard() {
  const history = useHistory();

  useEffect(() => {
    const idToken = localStorage.getItem("idToken");

    if (idToken !== undefined && idToken !== null) {
      admin.auth().verifyIdToken(idToken)
      .catch((error) => {
        console.log(error);
        localStorage.removeItem("idToken");
        history.push("/login");
      })
    } else {
      localStorage.removeItem("idToken");
      history.push("/login");
    }
  }, []);
  
  return <h1>Dashboard</h1>
}

export default Dashboard;

标签: javascriptreactjsfirebase

解决方案


Firebase-admin 示例初始化(与 firebase 客户端不同)

let admin = require('firebase-admin')
let serviceAccount = require('./theserviceaccountfile.json');

let db

module.exports = async function() {

        if (!admin.apps.length) {
            admin.initializeApp({
               credential: admin.credential.cert(serviceAccount),
               databaseURL: "https://project-id.firebaseio.com",
             })
             if (!db) {
                db = admin.database()
             }
        }
        return db
    
    }

推荐阅读