javascript - 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;
解决方案
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
}
推荐阅读
- sql-server - 将数据从 SQL Server 导入到格式化的 Excel 文件
- javascript - HTML CSS:如何使复选框仅在悬停或选中时可见
- android - 当我将 android:ems 的值放入 dimens.xml 时,为什么我的应用程序会崩溃?
- php - 上传的文件无法移动到 wp-content/uploads/2019/06
- angular - Angular 7:带有组件并传递可变参数的 *ngFor
- c# - 是否可以将 ASP.NET Core Identity 添加到 WebForms 项目?
- spring-boot - 配置 Spring WebFlux WebClient 以使用自定义线程池
- nativescript - 音频播放器插件播放 URL 声音,但不播放本地声音文件
- excel - 将多个工作簿合并为一个后,颜色格式丢失
- react-native - 无法解析模块“metro/src/lib/bundle-modules/HMRClient”