next.js 隐藏Firebase FCM服务工作者密钥

9gm1akwq  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(73)

我使用Firebase FCM令牌,并且我想对服务工作进程隐藏键值。但环境变量不适用于...请告诉我解决办法
我想通过onMessage函数接收payload。
这是我现在的代码

// public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js');

// 이곳에 아까 위에서 앱 등록할때 받은 'firebaseConfig' 값을 넣어주세요.
const config = {
  apiKey: "value you want to hide",
  authDomain: "value you want to hide",
  projectId: "value you want to hide",
  storageBucket: "value you want to hide",
  messagingSenderId: "value you want to hide",
  appId: "value you want to hide",
  measurementId: "value you want to hide"
};
 
// Initialize Firebase
firebase.initializeApp(config);
 
const messaging = firebase.messaging();
self.addEventListener('push', function(event) {
  console.log("받은 푸시 데이터를 처리해 알림으로 띄우는 내용")
});
self.addEventListener('notificationclick', function(event) {
  console.log("띄운 알림창을 클릭했을 때 처리할 내용")
});
// /src/components/Message.tsx
import React, { useEffect, useState } from 'react';
import { messageState } from '@/libs/recoilState';
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { useRecoilState } from 'recoil';

export interface MessageType {
  title: string;
  reservationId: string;
  description: string;
  [key: string]: string;
}

const Message = () => {
  const [message, setMessage] = useRecoilState<MessageType>(messageState);
  const onMessageFCM = async () => {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return;

    const firebaseApp = initializeApp({
      apiKey: process.env.NEXT_PUBLIC_API_KEY,
      authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
      projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
      storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
      messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_ID,
      appId: process.env.NEXT_PUBLIC_APP_ID,
      measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
    });

    const messaging = getMessaging(firebaseApp);

    getToken(messaging, {
      vapidKey: process.env.NEXT_PUBLIC_VAPID_KEY,
    })
      .then((currentToken) => {
        if (currentToken) {
          console.log(currentToken);
        } else {
          console.log(
            'No registration token available. Request permission to generate one.',
          );
        }
      })
      .catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
      });

    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload); // I'm trying to get data from here.
      setMessage(payload?.data as MessageType); 
    });
  };

  useEffect(() => {
    onMessageFCM();
  }, []);

  return <></>;
};

export default Message;

我认为配置代码是多余的,所以我删除了service worker的Firebase配置代码,但onMessage功能没有发生。

wsxa1bj1

wsxa1bj11#

Firebase配置文件或对象的内容被认为是公共的,因此可以将其包含在客户端代码中。请参阅此文档以供参考。
您可以使用数据库、Firestore或存储的安全规则功能来保护您的数据和文件。另一方面,如果您希望将对项目中后端服务的访问限制为来自已注册应用的访问,请使用App Check。
其他类似职位:

相关问题