FCM 구현 방법에 대한 논의

[bbearcookie]

안녕하세요. @HyuckJuneHong 님!
다름이 아니라 FE 단에서 FCM 로직의 구현 방법에 대해 제가 이해한 것이 맞는지 여쭤보고자 논의를 올렸습니다.

제가 이해한 FE 단에서의 FCM 동작 흐름

1. push 이벤트를 수신하는 서비스 워커를 작성합니다.
2. React 앱에 Firebase SDK를 설치하고, Firebase 앱 정보를 등록합니다.
   (앱 정보 필요.)

const firebaseConfig = {
  apiKey: 'AIzaSyC1bvPZi2X9nH0gI2gticmvgIbnHlHgNig',
  authDomain: 'fcm-playground2.firebaseapp.com',
  projectId: 'fcm-playground2',
  storageBucket: 'fcm-playground2.appspot.com',
  messagingSenderId: '396933658424',
  appId: '1:396933658424:web:eb026568a6a9312c74f3cd',
  measurementId: 'G-QJMLQLDJKL',
};

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

3. 등록한 Firebase 앱을 가지고 사용자 고유의 토큰을 요청합니다.
   (VAPID 키 쌍 중에서 public 키가 필요.)

import { getMessaging, getToken } from 'firebase/messaging';
const message = getMessaging(firebase);

const token = await getToken(message, {
  vapidKey: 'BLuDu-U9wEKSpnHSmnRvoIClAUx7z3Xf_sI6TaJqh-9JSPtJ10DR8WQsFTp4dEngWqLviJcJZvXK_vu-SkI2ppg',
});

4. 사용자의 토큰을 모아밤 백엔드 서버에 전달합니다.
   (이후 백엔드 서버가 FCM 서버에 푸쉬 요청.)

이런 흐름으로 진행되는 게 맞을까요??
그렇다면, firebase 앱 정보나 VAPID public 키는 클라이언트에서 가지고 있어야 하는데.. 이 부분은 어떻게 공유하는 게 좋을까요??
그리고, FCM 토큰은 어떤 API를 통해서 어디에 담아서 보내면 좋을까요?

[hongdosan]

상훈님 정말 죄송합니다..! 제가 디스커션을 이제야 봤네요..!

---

답변 바로 드리겠습니다.

| 질문 1 : 흐름에 대한 부분

| 답변 1 : 제가 공부한 FCM 흐름은 백단 흐름이기 때문에, 정확하게는 모르지만, 적어주신 흐름 진행 방향은 맞다고 생각합니다!

---

| 질문 2 : firebase 앱정보, VAPID public 키는 클라이언트에서 가지고 있어야 하는데 어떻게 공유할까?

| 답변 2 : 해당 정보를 제게 공유해주시면 백엔드 Config 파일에 따로 등록해놓겠습니다!

---

| 질문 3 : FCM 토큰은 어떤 API를 통해 보내면 될까?

| 답변 3: 저희 Notion > Docs > API 부분에서 적혀있는 로그인 API에 로그인 요청을 보낼 때 함께 보내주시면 회원 쪽에서 로그인 성공과 동시에 Redis Database에 따로 저장해놓을 예정입니다. 그리고 저장된 FCM 토큰을 서버에서 알아서 사용하겠습니다!

---

이해가 안가는 부분 한 번 더 질문주시면 빠르게 답변하겠습니다. 너무 늦어진 것 같아서 죄송합니다. 감사합니다!