FCM으로 푸시 알림 보내기

✏️ 작성자: 박정훈
📌 작성자의 한마디: "푸시 알림 쫄지마라!"

FCM이란?

firebase Cloud Messaging의 약자로 구글 파이어베이스에서 사용하는 클라우드 메시징 서비스입니다! FCM은 메시지와 알림을 모두 무료로 해주더라구요. 그래서 저는 이번에 FCM을 이용해서 푸시알림 서비스를 구현해보겠습니다.

1️⃣ firebase 홈페이지에서 키 다운받기

1. 먼저 firebase 홈페이지에 접속을 합니다. 구글 계정과 연동을 하고, 새 프로젝트 만들기를 클릭해주세요.

2. firebase 콘솔 화면으로 들어가서 설정 아이콘 > 프로젝트 설정 > 서비스 계정 으로 이동해주세요.

3. 저희는 Node.js를 이용하기 때문에 Admin SDK 구성 스닛펫에서 Node.js를 선택하시고, 새 비공개 키 생성을 클릭해주세요.

4. 다운받은 키를 프로젝트 폴더에 저장해주세요. 저는 키파일 이름을 firebase-adminsdk.json으로 설정했습니다.

   

2️⃣ 코드 짜기

1. firebase-admin dependency를 추가해줍니다.

yarn add firebase-admin

2. firebase 계정과 연동합니다. 저장한 firbase sdk key 파일을 불러와서 계정 인증을 진행합니다. 저는 json 파일의 키들을 한번에 불러오는 작업이 되지 않아 따로 firebaseKeys라는 객체를 만들어서 모든 키들을 넣어주었습니다.

import admin from 'firebase-admin';
import serviceAccount from '../../../firebase-adminsdk.json';

const firebaseKeys = {
  type: serviceAccount.type,
  projectId: serviceAccount.project_id,
  privateKeyId: serviceAccount.private_key_id,
  privateKey: serviceAccount.private_key,
  clientEmail: serviceAccount.client_email,
  clientId: serviceAccount.client_id,
  authUri: serviceAccount.auth_uri,
  tokenUri: serviceAccount.token_uri,
  authProviderX509CertUrl: serviceAccount.auth_provider_x509_cert_url,
  clientC509CertUrl: serviceAccount.client_x509_cert_url,
};

admin.initializeApp({
  credential: admin.credential.cert(firebaseKeys),
});

3. 위 작업까지는 파이어베이스 홈페이지에서 키 생성을 할 때 제공해주는 초기화 작업 코드입니다. 이제 메시지를 만들어 푸시 알림을 만들어보겠습니다.
   처음에는 안드로이드와 iOS 모두 동일하게 메시지를 만들어 주었었는데, OS에 맞게 주는 것이 맞다고 판단되어 안드로이드와 iOS 다른 방식으로 message의 방식을 만들었습니다. 메시지의 내용은 두 OS 동일하게 만들었습니다.
   다만, 유저가 한 기기만 가지고 있지 않을수도 있기 때문에 유저가 로그인한 모든 기기에 푸시알림이 가게 구현해보았습니다. 아래의 코드에서 fcmTokens에 로그인한 모든 디바이스의 토큰을 배열 형태로 저장했습니다. 하나의 기기에만 푸시 알림을 보낼 경우에는 tokens: fcmTokens을 사용하지 않고 token: fcmToken 형태로 보내시면 됩니다!

const message = {
      android: {
        data: {
          title: '김루희 똥방구',
          body: '어쩔티비 저쩔티미 우짤레미 저짤레미 눼눼눼눼 아무말도 못하쥬?',
        },
      },
      apns: {
        payload: {
          aps: {
            contentAvailable: true,
            alert: {
              title: '김루희 똥방구',
              body: '어쩔티비 저쩔티미 우짤레미 저짤레미 눼눼눼눼 아무말도 못하쥬?',
            },
          },
        },
      },
      tokens: fcmTokens,
    };

4. 만든 message 포맷으로 디바이스에 푸시알림을 보내야 합니다. 처음에 인증한 firebase admin으로 메시지를 보내면 됩니다.
   저는 여러 디바이스에 푸시 알림을 보내기 때문에 sendMulticast를 이용했는데, 하나의 디바이스에만 푸시 알림을 보내려면 send를 이용하시면 됩니다.

admin
      .messaging()
      .sendMulticast(message)
      .then(function (res) {
        console.log('Successfully sent message: : ', res);
      })
      .catch(function (err) {
        console.log('Error Sending message!!! : ', err);
      });

5. 푸시알림 전송이 완료되면 성공, 실패 여부를 보여줍니다! 콘솔창을 확인해보시면 아래와 같이 성공, 실패 여부가 보여질겁니다. 아래의 출력 케이스에서는 한 유저가 3개의 디바이스를 가지고있고, 아래와 같이 성공1, 실패2가 떴습니다. (실패 케이스를 보여주기 위해 일부러 토큰을 다시 발급받았습니다. 웬만하면 성공밖에 안 뜰겁니다.)

   

마치며

하루남은 앱잼 화이팅입니다!