显示来自firebase实时数据库的用户资料信息

Question

我有一个带有帐户信息部分的网站。 在这个部分有一张卡片，我想在其中显示用户信息。 该信息存储在我的实时数据库中，如下所示：

到目前为止，我已经尝试通过像这样引用它来显示来自该数据库的用户信息：

 // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Cloud Firestore and get a reference to the service const db = getFirestore(app); const auth = getAuth(); const displayName = document.getElementById('displayName'); const displayID = document.getElementById('displayID'); const displayEmail = document.getElementById('displayEmail'); const displayUsername = document.getElementById('displayUsername'); const displayLogin = document.getElementById('displayLogin'); auth.onAuthStateChanged(user => { // console.log(user.email); displayName.innerText = "Currently logged in as: " + user.email; displayID.innerText = "School ID: " + user.schoolID; displayEmail.innerText = "Email: " + user.email; displayUsername.innerText = "Username: " + user.username; displayLogin.innerText = "Account Creation: " + user.last_login; })

但是当我这样做时，所有字段都显示为undefined ，我不太确定如何正确引用数据库。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class = "container mt-4"> <div class = "row justify-content-center"> <div class="card w-75 p-3 bg-dark" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Account Information</h5> <p class="card-text">View your account's info in this section.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item" id = "displayID">School ID: </li> <li class="list-group-item" id = "displayEmail">Email Address: </li> <li class="list-group-item" id = "displayUsername">Username: </li> <li class="list-group-item" id = "displayLogin">Account Created: </li> </ul> <div class="card-footer"> <a href="#" class = "btn btn-primary"> Exit </a> </div> </div> </div> </div>

Answer 1

Firebase 身份验证和Firebsae 实时数据库到 2 个不同的服务。 onAuthStateChanged 中的user onAuthStateChanged包含了你在 Firebase 认证中设置的信息。 请参阅文档中的获取用户的个人资料页面。

如果你想从实时数据库中获取数据，那么你必须像下面这样查询它：

import { onAuthStateChanged, getAuth } from "firebase/auth";
import { getDatabase, ref, child, get } from "firebase/database";

const auth = getAuth();
const db = getDatabase();

onAuthStateChanged(auth, async (user) => { 
  const snap = await get(child(dbRef, `users/${user.uid}`));
  console.log(snap.val());

  if (snap.exists()) {
    displayName.innerText = "Currently logged in as: " + user.email;
    displayID.innerText = "School ID: " + user.schoolID;
    displayEmail.innerText = "Email: " + user.email;
    displayUsername.innerText = "Username: " + user.username;
    displayLogin.innerText = "Account Creation: " + user.last_login;
  }
})

但是，您可以从user object 本身获取大部分信息，例如 email、创建日期。 请参阅更新用户配置文件以在 Firebase 授权用户数据中设置显示名称。