45. mylog FCM Token Firestore 저장

FCM을 보내려면 사용자에게 권한을 요청해야 합니다. 사용자가 알림 수신을 허용하면 해당 기기의 토큰을 받을 수 있고, 이 토큰을 클라우드에 저장하여 알림을 보낼 때 사용합니다. 토큰을 firestore에 저장하는 방법을 알아봅니다.

ChatGPT에게 물었습니다.

How to get fcm token and save it in firestore?

fcm 토큰을 얻어 firestore에 저장하는 방법은?

ChatGPT

 

To get an FCM token and save it in Firestore, you'll follow these key steps:
FCM 토큰을 가져와 Firestore에 저장하려면 다음 주요 단계를 따르세요.

1. Request permission to show notifications.
   알림 표시 권한을 요청하세요.
2. Get the FCM token using Firebase Cloud Messaging.
   Firebase 클라우드 메시징을 사용하여 FCM 토큰을 가져옵니다.
3. Save the FCM token in Firestore for future use.
   나중에 사용할 수 있도록 Firestore에 FCM 토큰을 저장합니다.

Here’s a detailed guide on how to implement this in your web app (e.g., with Vue.js):
웹 앱(예: Vue.js 사용)에서 이를 구현하는 방법에 대한 자세한 가이드는 다음과 같습니다.

1. Initialize Firebase and Firestore

1. Firebase 및 Firestore 초기화

Make sure you have Firebase and Firestore initialized in your project. If you haven’t done this yet, install the Firebase SDK:
프로젝트에서 Firebase 및 Firestore가 초기화되었는지 확인하세요. 아직 설치하지 않았다면 Firebase SDK를 설치하세요.

npm install firebase

 

Create a firebase.js file to initialize Firebase and Firestore:
Firebase 및 Firestore를 초기화하려면 'firebase.js' 파일을 만듭니다.

// firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getMessaging, getToken } from "firebase/messaging";

// Your Firebase configuration
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

// Initialize Firebase app
const app = initializeApp(firebaseConfig);

// Initialize Firestore and Firebase Cloud Messaging (FCM)
const db = getFirestore(app);
const messaging = getMessaging(app);

export { db, messaging };

 

2. Request Permission for Notifications and Get FCM Token

2. 알림 권한 요청 및 FCM 토큰 받기

You need to ask the user for permission to send notifications and then retrieve the FCM token. This can be done in a Vue.js component or any JavaScript file.

사용자에게 알림을 보낼 수 있는 권한을 요청한 다음 FCM 토큰을 검색해야 합니다. 이는 Vue.js 구성 요소나 JavaScript 파일에서 수행할 수 있습니다.

Request Permission and Get Token

권한 요청 및 토큰 받기

import { messaging } from './firebase';
import { getToken } from "firebase/messaging";
import { collection, doc, setDoc } from "firebase/firestore";
import { db } from './firebase'; // Firestore instance

export const getAndSaveFCMToken = async (userId) => {
  try {
    // Request permission from the user to send notifications
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      console.log("Notification permission granted.");

      // Get the FCM token
      const token = await getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" });
      if (token) {
        console.log("FCM Token: ", token);
        // Save the FCM token to Firestore
        await saveFCMTokenToFirestore(userId, token);
      } else {
        console.log("No registration token available.");
      }
    } else {
      console.log("Notification permission denied.");
    }
  } catch (error) {
    console.error("An error occurred while getting the FCM token:", error);
  }
};

// Save the FCM token to Firestore
const saveFCMTokenToFirestore = async (userId, token) => {
  try {
    // Reference to the users collection in Firestore
    const usersRef = collection(db, "users");

    // Save token under user's document
    await setDoc(doc(usersRef, userId), {
      fcmToken: token,
    }, { merge: true });

    console.log("FCM Token saved to Firestore.");
  } catch (error) {
    console.error("Error saving FCM token to Firestore:", error);
  }
};

 

3. Call the Function in a Vue.js Component

3. Vue.js 구성 요소에서 함수 호출

Now that the getAndSaveFCMToken function is ready, you can call it in your Vue.js component. This example assumes that you're already authenticated and have access to a userId.

이제 getAndSaveFCMToken 함수가 준비되었으므로 Vue.js 구성 요소에서 이를 호출할 수 있습니다. 이 예시에서는 귀하가 이미 인증을 받았으며 userId에 액세스할 수 있다고 가정합니다.

<template>
  <div>
    <button @click="requestFCMToken">Enable Notifications</button>
  </div>
</template>

<script>
import { getAndSaveFCMToken } from './fcmService'; // Assuming this file contains the FCM logic

export default {
  name: "NotificationComponent",
  data() {
    return {
      userId: "12345", // Replace with your authenticated user's ID
    };
  },
  methods: {
    async requestFCMToken() {
      try {
        await getAndSaveFCMToken(this.userId);
      } catch (error) {
        console.error("Error requesting FCM token:", error);
      }
    }
  }
};
</script>

 

4. Firebase Security Rules for Firestore

4. Firestore에 대한 Firebase 보안 규칙

Ensure that your Firestore security rules allow users to write their FCM tokens.
Firestore 보안 규칙에서 사용자가 FCM 토큰을 작성할 수 있도록 허용하는지 확인하세요.
For example: 예를 들어:

service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

 

5. Testing 테스트

• Click the "Enable Notifications" button in your app.
  앱에서 "알림 활성화" 버튼을 클릭하세요.
• Ensure that the permission request for notifications is displayed.
  알림에 대한 권한 요청이 표시되는지 확인하세요.
• Check that the FCM token is saved in Firestore under the user document.
  사용자 문서 아래 Firestore에 FCM 토큰이 저장되어 있는지 확인하세요.

 

Summary 요약

1. Request Notification Permission: Ask the user for permission to send notifications.
   알림 권한 요청: 사용자에게 알림 전송 권한을 요청합니다.
2. Get FCM Token: Retrieve the FCM token after the user grants permission.
   FCM 토큰 받기: 사용자가 권한을 부여한 후 FCM 토큰을 검색합니다.
3. Save Token to Firestore: Store the token in Firestore under the authenticated user’s document, so it can be used later for sending push notifications.
   Firestore에 토큰 저장: 인증된 사용자 문서 아래 Firestore에 토큰을 저장하면 나중에 푸시 알림을 보내는 데 사용할 수 있습니다.