ChatGPT와 FCM 개발 - Token 저장

85. Token을 firestore에 저장하기

다음과 같은 과정을 거처 푸시 알림 서비스를 개발합니다.

1. 알림 수신 허가를 받고 Token 얻기
2. Token을 firestore에 저장하기
3. firebase functions cloud 함수를 이용하여 알림 보내기
4. 웹앱에서 알림을 받아 나타내기

ChatGPT에게 물었습니다.

Create a function to save tokens in firestore.

Token을 firestore에 저장하는 기능을 만들어 줘.

ChatGPT

 

Here’s how to create a function to save Firebase Cloud Messaging (FCM) tokens in Firestore using JavaScript or TypeScript. This function can be integrated into your Vue.js project or any other JavaScript-based project.

JavaScript 또는 TypeScript를 사용하여 Firestore에 FCM(Firebase Cloud Messaging) 토큰을 저장하는 함수를 만드는 방법은 다음과 같습니다. 이 기능은 Vue.js 프로젝트 또는 기타 JavaScript 기반 프로젝트에 통합될 수 있습니다.

1. Set Up Firebase and Firestore

1. Firebase 및 Firestore 설정

First, make sure you have Firebase and Firestore set up in your project.
먼저 프로젝트에 Firebase와 Firestore가 설정되어 있는지 확인하세요.

npm install firebase

2. Initialize Firebase and Firestore

2. Firebase 및 Firestore 초기화

In your project, initialize Firebase and Firestore:
프로젝트에서 Firebase 및 Firestore를 초기화합니다.

import { initializeApp } from 'firebase/app';
import { getFirestore, doc, setDoc } from 'firebase/firestore';

// Your Firebase configuration object
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

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

// Initialize Firestore
const db = getFirestore(app);

3. Create the Function to Save the Token

3. 토큰을 저장하는 함수 생성

Now, create a function that accepts a userId and token and then saves this token to Firestore:
이제 userId와 token을 허용하는 함수를 만든 다음 이 토큰을 Firestore에 저장합니다.

async function saveTokenToFirestore(userId, token) {
  try {
    // Create a reference to the document in the 'fcmTokens' collection with the user's ID as the document ID
    const tokenRef = doc(db, 'fcmTokens', userId);

    // Set the document with the token data
    await setDoc(tokenRef, {
      token: token,
      createdAt: new Date()
    });

    console.log(`Token for user ${userId} saved to Firestore.`);
  } catch (error) {
    console.error('Error saving token to Firestore:', error);
  }
}

4. Integrate with FCM Token Retrieval

4. FCM 토큰 검색과 통합

You would typically use this function after you retrieve the FCM token. Here’s an example that combines requesting notification permission, retrieving the token, and saving it to Firestore:

일반적으로 FCM 토큰을 검색한 후 이 함수를 사용합니다. 다음은 알림 권한 요청, 토큰 검색 및 Firestore에 저장을 결합하는 예입니다.

import { getMessaging, getToken } from 'firebase/messaging';

// Initialize Firebase Messaging
const messaging = getMessaging(app);

async function requestPermissionAndSaveToken(userId) {
  try {
    // Request notification permission from the user
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');

      // Retrieve the FCM token
      const token = await getToken(messaging, {
        vapidKey: 'YOUR_PUBLIC_VAPID_KEY'
      });

      if (token) {
        console.log('FCM Token:', token);

        // Save the token to Firestore
        await saveTokenToFirestore(userId, token);
      } else {
        console.log('No registration token available.');
      }
    } else {
      console.log('Notification permission not granted.');
    }
  } catch (error) {
    console.error('An error occurred while retrieving the token.', error);
  }
}

 

5. Usage Example

5. 사용 예

You can now call requestPermissionAndSaveToken(userId) in your Vue.js component or anywhere in your app to request permission, get the FCM token, and save it to Firestore.

이제 Vue.js 구성 요소 또는 앱의 어느 곳에서나 requestPermissionAndSaveToken(userId)를 호출하여 권한을 요청하고 FCM 토큰을 가져와 Firestore에 저장할 수 있습니다.

export default {
  name: 'YourComponent',
  methods: {
    async enableNotifications() {
      const userId = 'user123';  // Replace with the actual user ID
      await requestPermissionAndSaveToken(userId);
    }
  }
};

In your template:
템플릿에서:

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

 

6. Firestore Structure

6. Firestore 구조

The tokens will be stored in Firestore under a collection called fcmTokens. Each document will be identified by the userId and contain the FCM token and the creation timestamp:

토큰은 fcmTokens라는 컬렉션 아래 Firestore에 저장됩니다. 각 문서는 'userId'로 식별되며 FCM 토큰과 생성 타임스탬프를 포함합니다.

• Collection: fcmTokens
• Document ID: userId
• Fields:
• token: The FCM token
• createdAt: The timestamp when the token was saved

Summary 요약

• Functionality: The function saveTokenToFirestore saves a user's FCM token to Firestore.
  기능: saveTokenToFirestore 함수는 사용자의 FCM 토큰을 Firestore에 저장합니다.
• Integration: The token is obtained using getToken after permission is granted and then stored in Firestore using the setDoc method.
  통합: 권한이 부여된 후 getToken을 사용하여 토큰을 얻은 다음 setDoc 메서드를 사용하여 Firestore에 저장합니다.

This setup enables you to manage and store push notification tokens in Firestore, making it easier to send targeted push notifications to your users later on.
이 설정을 사용하면 Firestore에서 푸시 알림 토큰을 관리하고 저장할 수 있으므로 나중에 사용자에게 대상 푸시 알림을 더 쉽게 보낼 수 있습니다.