显示来自firebase实时数据库的用户配置文件信息

oknrviil 于 2022-12-14 发布在其他

关注(0)|答案(1)|浏览(156)

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

到目前为止，我已经尝试通过引用此数据库来显示用户信息，如下所示：

// 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>

firebase

来源：https://stackoverflow.com/questions/74721935/display-user-profile-information-from-firebase-real-time-database

1条答案

按热度按时间

vq8itlhq1#

Firebase Authentication和Firebsae Realtime Database到2个不同的服务。onAuthStateChanged中的user对象包含您在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对象本身获取大多数信息，如电子邮件、创建日期。请参见更新用户配置文件以在Firebase Auth用户数据中设置显示名称。

赞(0）回复(0）举报 2022-12-14

我来回答

显示来自firebase实时数据库的用户配置文件信息

1条答案

相关问题

热门标签

最新问答