ChatGPT와 FCM 개발 - getToken

84. FCM - getToken

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

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

ChatGPT에게 물었습니다.

Receive permission to receive notifications and obtain a token.

알림 수신 허가를 받고 Token를 얻어줘.

ChatGPT

 

To receive permission to send notifications and obtain a Firebase Cloud Messaging (FCM) token in a Vue.js application, follow these steps:

Vue.js 애플리케이션에서 알림을 보내고 FCM(Firebase Cloud Messaging) 토큰을 얻을 수 있는 권한을 받으려면 다음 단계를 따르세요.

1. Set Up Firebase in Your Vue.js Project

1. Vue.js 프로젝트에서 Firebase 설정

First, ensure Firebase is installed in your Vue.js project:
먼저 Vue.js 프로젝트에 Firebase가 설치되어 있는지 확인하세요.

npm install firebase

 

Then, initialize Firebase with your project configuration.
그런 다음 프로젝트 구성으로 Firebase를 초기화합니다.

2. Request Notification Permission and Obtain the FCM Token

2. 알림 권한 요청 및 FCM 토큰 획득

You will need to request the user's permission to send notifications and, if granted, obtain the FCM token.
알림을 보내려면 사용자의 권한을 요청해야 하며, 승인된 경우 FCM 토큰을 받아야 합니다.

Vue.js Example

Here’s a step-by-step guide on how to achieve this:
이를 달성하는 방법에 대한 단계별 가이드는 다음과 같습니다.

1. Import Required Firebase Modules:

Import the necessary modules from Firebase.
Firebase에서 필요한 모듈을 가져옵니다.

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

2. Initialize Firebase:

Set up Firebase with your project’s configuration.
프로젝트 구성으로 Firebase를 설정합니다.

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);
const messaging = getMessaging(app);

3. Request Permission and Get Token:

Implement the function to request notification permission and obtain the token.
알림 권한을 요청하고 토큰을 얻는 기능을 구현합니다.

async function requestNotificationPermission() {
  try {
    // Request permission to send notifications
    const permission = await Notification.requestPermission();

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

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

      if (currentToken) {
        console.log('FCM Token:', currentToken);
        // Save the token to your server or Firestore here
      } 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);
  }
}

// Call the function to request permission and get the token
requestNotificationPermission();

3. Explanation of the Code

3. 코드 설명

Notification.requestPermission():

• This built-in browser method requests permission from the user to show notifications. It returns a promise that resolves to either 'granted', 'denied', or 'default'.
  이 내장 브라우저 방법은 사용자에게 알림 표시 권한을 요청합니다. 'granted', 'denied', 또는 'default'로 해결되는 Promise를 반환합니다.

getToken(messaging, { vapidKey: 'YOUR_PUBLIC_VAPID_KEY' }):

• This method retrieves the FCM token for the user's device. The vapidKey is required and is used for Web Push Protocol authentication.
  이 메소드는 사용자 기기의 FCM 토큰을 검색합니다. 'vapidKey'는 필수이며 웹 푸시 프로토콜 인증에 사용됩니다.

Saving the Token:

• If you successfully obtain a token, you can save it to your server or Firestore. This token will be used to target notifications to the specific device/browser.
  토큰 획득에 성공하면 서버나 Firestore에 저장할 수 있습니다. 이 토큰은 특정 장치/브라우저에 알림을 보내는 데 사용됩니다.

4. Integrating the Functionality in Vue.js

4. Vue.js의 기능 통합

You can integrate this logic into a Vue.js component, for example, in a method that is called when the user interacts with your app (e.g., on a button click).
예를 들어 사용자가 앱과 상호 작용할 때(예: 버튼 클릭 시) 호출되는 메서드에서 이 로직을 Vue.js 구성 요소에 통합할 수 있습니다.

export default {
  name: 'YourComponent',
  methods: {
    async enableNotifications() {
      await requestNotificationPermission();
    }
  }
};

 

In your template, you could trigger this method with a button:
템플릿에서 버튼을 사용하여 이 메서드를 트리거할 수 있습니다.

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

5. Security Note

5. 보안 참고사항

Ensure that you handle the FCM token securely and consider the user's privacy when requesting notification permissions. It’s recommended to explain why your app needs notifications before prompting the user.

알림 권한을 요청할 때 FCM 토큰을 안전하게 처리하고 사용자의 개인 정보 보호를 고려하십시오. 사용자에게 메시지를 표시하기 전에 앱에 알림이 필요한 이유를 설명하는 것이 좋습니다

Summary 요약

• Request Permission: Use Notification.requestPermission() to ask the user for notification permission.
  권한 요청: Notification.requestPermission()을 사용하여 사용자에게 알림 권한을 요청합니다.
• Obtain FCM Token: Use getToken() from Firebase Messaging to get the token after permission is granted.
  FCM 토큰 얻기: 권한이 부여된 후 토큰을 얻으려면 Firebase 메시징에서 getToken()을 사용하세요.
• Store Token: Save the token to Firestore or another backend service for later use in sending notifications.
  스토어 토큰: 나중에 알림을 보낼 때 사용할 수 있도록 Firestore 또는 다른 백엔드 서비스에 토큰을 저장합니다

With this setup, your Vue.js app will be able to request notification permission and obtain the necessary FCM token to send push notifications to the user.

이 설정을 사용하면 Vue.js 앱은 알림 권한을 요청하고 사용자에게 푸시 알림을 보내는 데 필요한 FCM 토큰을 얻을 수 있습니다.