reactjs 如何在react中添加一个live计数器来安全地显示firestore集合值?

fhity93d  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(83)

目标:在我的React Firebase网站上有一个实时计数器,显示我的YouTube频道上的当前浏览量。
方法:我正在通过调用firebase云函数中的Youtube API来检索视图计数,以便保护我的API密钥。一旦我获得了数据,我就使用
另一个云函数
来更新我的firestore数据库中的视图计数集合(每60分钟使用pubsub)。然后我在前端使用onSnapshot监视该集合并显示值。
**问题:*虽然这 * 可以工作, 我每天都会收到Firebase的电子邮件,说我的firestore数据库“有不安全的规则”,因为“任何用户都可以读取整个数据库”。我不想在我的站点中添加身份验证,但我希望让live计数器完全安全。有人知道如何让live计数器引用firestore数据库吗?
前端代码:

export default function Navbar() {
  const [count, setCount] = React.useState('');

  const unsub = onSnapshot(doc(db, "viewCount", "Count"), (doc) => {
    setCount(doc.get("View Count"));
  });

火灾恢复规则:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow write: if false; 
    }
  }
}

云功能

/**
 * Function updates Firestore view count every 60 minutes
 * 
 * @param - 
 * @returns - N/A 
 */
exports.updateViewCount = functions.pubsub
  .schedule("every 60 minutes")
  .onRun((context) => {
    try {
      this.logCount(5);
      console.log("Count updated at:", new Date());
    } catch (error) {
      console.error("Error getting view count: ", error);
    }
  });


/**
 * Function calls getViewCount to get Youtube View Count
 * 
 * @param - 
 * @returns - Int: View count 
 */
exports.logCount = functions
  .runWith({
    secrets: ["YOUTUBE_API"],
  })
  .https.onCall(async (data, context) => {
    const viewData = await getViewCount(
      process.env.YOUTUBE_API,
      process.env.YOUTUBE_CHANNEL_ID
    );
    const addData = await admin
      .firestore()
      .collection("viewCount")
      .doc("Count")
      .set({ "View Count": viewData })
      .then(() => {
        return viewData;
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
      });
  });

总结如下:

1.这是否是使用firestore实现不带身份验证的实时计数器的正确方法?
1.如果是:如何更安全地执行此操作?如果不是:还有其他选择吗?

ui7jx7zq

ui7jx7zq1#

要停止警告邮件,您只需更改规则,使allow read: if true;不应用于整个数据库,您仍然可以将其应用于计数器所在的数据库部分。

service cloud.firestore {
  match /databases/{database}/documents {
    match /viewCount/Count {
      allow read: if true;
      allow write: if false; 
    }
  }
}

如果您的应用正在使用其他文档和收藏集,您也需要为其添加规则。

相关问题