expo + FCM으로 푸시 알람 보내기

현재 진행 중인 프로젝트에서 FCM을 이용한 푸시 알람을 구현해야 했다. expo에는 push-notifications라는 자체 라이브러리가 있다. 때문에 expo + FCM 조합은 좀처럼 찾기 쉽지 않았고, 있다고 해도 HTTP v1 이전의 글이기 때문에 사실상 나에게 도움이 되지 않았다.

이번 글은 expo에서 FCM을 세팅하는 과정과 이때 마주한 오류에 대해 이야기해 보겠다.

⚠️ 읽기 전 확인해 주세요 ⚠️

• 이 글은 iOS 기준으로 작성되었습니다.
• Firebase 프로젝트를 생성하고 앱 추가, Apple Developer 계정이 있다는 가정하에 진행했습니다.
• Firebase 프로젝트 기본 세팅은 공식 문서를 참고하시기를 바랍니다.

Firebase 세팅

IAM 설정

프로젝트 설정 → 클라우드 메시징에 들어가서 서비스 계정 관리를 선택한다.

그다음 IAM에서 이름이 firebase-adminsdk인 구성원의 역할에 Firebase Cloud Messaging API 관리자 역할을 추가해 준다.

APN 설정

iOS에서 FCM을 사용하기 위해서는 APN 인증 키 혹은 APN 인증서(개발 APN 인증서, 프로덕션 APN 인증서)를 등록해야 한다.

Apple Developer에 들어가서 키 페이지로 접속을 한다.

그다음 추가 버튼을 이용하여 새로운 키를 생성해 준다.

Key의 이름을 작성하고 맨 위에 있는 Apple Push Notifications service (APNs) 옵션을 체크해 준 후 Continue를 누른다. 참고로 APNs를 포함한 키는 계정당 최대 2개까지 밖에 생성이 안된다.

Register까지 완료하면 Download 페이지가 나오고 버튼을 통해 키를 다운로드해 준다. 해당 키는 다시 다운로드를 할 수 없으니 잘 보관해야 한다.

마지막으로 Firebase로 돌아가서 Apple 앱 구성에 있는 APN 인증 키에 해당 키 파일과 키 ID, 팀 ID를 추가해 주면 끝이다.

이로써 Firebase 세팅은 모두 끝났다.

프로젝트 세팅

아래 명령어를 통해 필요한 라이브러리를 설치해 준다.

npx expo install @react-native-firebase/app @react-native-firebase/messaging

그 후 app.json 혹은 app.config.js(ts)에 아래 내용을 붙여 넣는다.

{
  "expo": {
	  // android를 사용한다면 추가
    "android": {
      "googleServicesFile": "./google-services.json",
      "package": "com.mycorp.myapp" // 본인 package
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.mycorp.myapp", // 본인 identifier
      "entitlements": {
        "aps-environment": "production"
      }
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/messaging",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

아래는 FCM 관련 코드이다.

import { PermissionsAndroid, Platform } from "react-native";
import messaging from "@react-native-firebase/messaging";

// 기기 토큰 추출
export const getToken = async () => {
  return await messaging().getToken();
};

// 푸시 알람 권한 요청
export const requestUserPermission = async () => {
  if (Platform.OS === "android") {
    const hasPermission = await PermissionsAndroid.check(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
    );
    if (!hasPermission) {
      await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
    }
  }

  if (Platform.OS === "ios") {
    const authStatus = await messaging().hasPermission();
    if (authStatus === messaging.AuthorizationStatus.NOT_DETERMINED) {
      await messaging().requestPermission();
    }
  }
};

iOS의 권한 요청을 firebase의 라이브러리를 사용하는 이유는 기본 알림 권한보다 훨씬 더 세밀하고 유연하게 설정할 수 있기 때문에 공식 문서에서 권장한다.

이제 프로젝트 아무 데서나 getToken을 이용하여 Device 토큰을 추출하고 이를 이용해서 테스트를 해보겠다.

FCM 테스트

Messaging 탭에서 첫 번째 캠페인을 눌러서 Firebase 알림 메시지를 만든다.

그다음 알림 제목, 알림 텍스트 등 원하는 내용을 넣으면 오른쪽에 미리 보기가 뜨고, 테스트 메시지 전송을 통해 테스트를 해볼 수 있다.

FCM 등록 토큰 추가를 눌러서 getToken을 통해 얻은 토큰을 추가해 준다.

npx expo run:ios를 통해 시뮬레이터를 실행 후 테스트를 진행하면 아래와 같이 푸시 알람이 오게 된다.

아쉽게도 Foreground 일 때는 @react-native-firebase 라이브러리 자체로는 안되고 추가적인 라이브러리를 사용해야 한다고 한다.

마주했던 오류

Failed to parse your GoogleService-Info.plist. Are you sure it is a valid Info.Plist file with a REVERSE_CLIENT_ID field?

위 에러는 @react-native-firebase/auth 라이브러리를 사용했을 때 발생하는 것으로 Firebase의 Authentication에서 로그인 방법을 추가 후 새로운 GoogleService-Info.plist를 받으면 해결된다.

마무리하며

FCM 설정이 생각보다 오래 걸렸고 고통도 많이 받았지만 성공했을 때 너무 짜릿했었다. 그래도 나처럼 다들 고통받지 말았으면 하는 마음에 글을 작성했으니 도움이 됐으면 좋겠다.

글의 내용 중 정확하지 않은 부분, 이해가 가지 않는 부분이 있을 수 있는데 댓글로 말씀해주시면 감사하겠습니다.

참고

• Firebase Integration Challenges in React Native - Reverse Client ID Error
• GoogleService-Info.plist > REVERSED_CLIENT_ID 안보입니다.
• React Native Firebase