[React Native] 🔥 Firebase 로 푸쉬 알림 구현하기 - (2) iOS 앱에서 푸시 알림 띄우기!

💫 참고한 사이트

1. React Native Firebase: Get Started - IOS Setup
2. React Native Firebase: Cloud Messaging - Usage
3. React Native Firebase: Cloud Messaging - ios Permissions
4. Provisional Authorization on iOS 12
5. Clint Jang 님 블로그: Firebase Cloud Messaging, push 메세지 설정해보기
6. Firebase 공식 문서: FCM에서 APN 구성

이전 게시글의 내용을 먼저 읽고 와주세요!!
해당 게시글의 내용은 Firebase 설치, Firebase 프로젝트 생성 등의 선행작업이 이루어지지 않으면 제대로 작동하지 않습니다!!

🔥 1. iOS 인증서 생성

iOS 세팅도 안드로이드와 기본적으론 같습니다.
iOS 앱을 내 Firebase 프로젝트와 안전하게 연결하기 위해선, 인증서 파일을 다운받아야 하고, 그걸 내 iOS 앱 안에 세팅해야 합니다.

1.1. Firebase 콘솔에서 iOS 앱 생성하기

앞서 Firebase 프로젝트를 생성하고, 그 안에 안드로이드 앱을 만들었어요!
이번에는 Firebase 콘솔로 가서 iOS 앱을 생성하도록 하겠습니다.
위에 보이는 iOS 앱 생성 버튼을 눌러주세요.
그러면 아래와 같은 창이 뜹니다.

iOS 번들 ID는 반드시 제 프로젝트의 bundle ID 와 같아야 한다고 합니다.
내 프로젝트의 bundle ID 를 알아내는 방법은 다음과 같습니다.

Xcode 에서 내 프로젝트를 켜고, General 탭에 들어가면
Bundle Identifier 라는 항목에 com. 으로 시작되는 번들 ID 가 보입니다. 이걸 그대로 복사해서 넣어주시면 됩니다.

1.2. 인증서 다운로드 후 내 앱에 집어넣기

앱을 등록하고 나면 2번으로 넘어가면서, 인증서 파일을 다운받을 수 있는 항목이 보입니다.

GoogleService-Info.plist 를 다운받아주세요.
그리고 이걸 Xcode 에 열려 있는 내 프로젝트의 root 에 추가해줍니다.
RN Firebase 공식 문서에는 복잡하게 되어있지만 그냥 drag & drop 으로도 됩니다. 위치만 착각하지 마세요!!

GoogleService-Info.plist 파일을 옮겨놓으려 하면 이런 창이 뜹니다.
Copy items if needed 과 Create groups 에 체크해주시고 Finish 를 눌러주세요.

맞는 위치에 파일이 잘 들어갔나요?

🔥 2. iOS 인증서 생성

그런데 Firebase 가 내 프로젝트 안에 있는 인증서를 사용할 수 있게 하려면, 프로젝트의 가장 앞단에서 iOS SDK 를 세팅해주어야 합니다.
(bootstrap phase 를 가장 처음, 가장 앞단으로 번역했는데 혹시 틀렸다면 알려주세요!)

2.1. firebase SDK 추가 (무시)

무시해도 됩니다. 이미 react native firebase 를 설치하면서 SDK 파일이 들어가있을 거라서요!

2.2. iOS SDK 세팅하기

/ios/{projectName}/AppDelegate.m 파일을 열어주세요.

반드시 Xcode 를 열어서 코드를 수정해주세요!!!

파일의 가장 상단에서 Firebase SDK 를 import 해줍니다.

#import <Firebase.h>

그리고 didFinishLaunchingWithOptions 메서드 안쪽에 다음 내용을 추가해줍니다.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Add me --- /\
  // ...
}

2.3. 프로젝트 rebuild

위의 과정이 모두 끝났다면,
firebase 를 내 프로젝트에 링크하기 위해서 프로젝트를 rebuild 해야 합니다.

cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

🔥 3. iOS 환경에서 알림 권한 요청

iOS 세팅은 안드로이드 세팅보다 좀 더 설정해주어야 할 부분이 있습니다.

iOS 에서는 사용자의 승인을 받지 않은 notification 을 수신하지 못하도록 해놓았기 때문인데요. 아이폰 사용자라면 이런 메세지를 보신 적이 있을 겁니다.

바로 이 창을 띄우는 메서드를 사용해야 합니다. requestPermission 메서드입니다.

안드로이드에서는 사용자 승인을 요청할 필요가 없습니다. 하지만 안드로이드 환경에서 requestPersmission 메서드가 불린다고 해서 별다른 문제는 없다고 합니다!! 따로 분기처리는 필요하지 않고, 다만 안드로이드 환경에서 불릴 경우 항상 resolve 처리 된다고 하네요.

아래 코드를 필요한 곳에 추가해주시면 됩니다. 앱 첫 실행 시 권한을 물어봐야 한다면 App.tsx 에 넣으면 될 것이고, 저 같은 경우는 푸쉬알림을 설정하는 페이지에 해당 코드를 추가할 예정입니다.

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

해당 코드는 첫 요청 시에만 권한을 묻는 Alert 창을 띄웁니다. 그 이후로는 authorizationStatus 값에 현재 Notification 이 가능한 상태인지, 아닌지의 값을 받아올 수 있습니다.

• 0 이 들어올 경우 : 거절 상태일 때.
• 1 이 들어올 경우 : 승인 상태일 때.
• 2 가 들어올 경우 : iOS 12 이상에서의 '잠정적 승인' 상태일 때. iOS 12 이상에서는 유저에게 권한을 묻지 않고 저희가 잠정적 승인 상태로 만들어버릴 수 있는데요. 저는 패스했습니다. (로직을 짜봤자 iOS 12 이전 유저에게는 작동하지 않기 때문에) 해당 내용에 대해 더 궁금하시다면 이 페이지를 참고하세요.

if (authorizationStatus) {
  console.log('이 곳은 승인 상태일 때에만 타게 됩니다.')
}

저는 이렇게 처리했습니다.

• 승인을 눌렀을 경우 : 정상적으로 알림 여부 세팅을 할 수 있도록 처리
• 거절을 눌렀을 경우 : 거절을 눌렀는데 앱 내부에서 알림 세팅을 수정하려고 할 경우, 앱 세팅 페이지에서 수정이 가능하다고 Alert 을 띄웠습니다. 취소 버튼과 이동하기 버튼 두 개의 선택지를 주고, 이동하기 버튼을 누를 경우 디바이스 앱 세팅 페이지로 이동시켰습니다.

앱 세팅 페이지는 이렇게 생겼습니다.

여기서 알림을 허용하고 나면 다시 알림 사용이 가능합니다.
앱 세팅 페이지로 이동하는 방법은 이 포스트를 참고해주세요.

어떤가요? 값이 잘 들어오나요?

🔥 4. firebase 에서 APN 구성하기

아직 한 단계가 더 남았습니다.
APN이란 Apple Push Notification, 즉 애플 푸시 알림 서비스인데요.
Firebase 에서 APN을 구성해 푸시 알림을 보내려면 다음이 필요합니다.

• 앱 ID

• Apple 개발자 계정의 Apple 푸시 알림 인증키 ===> FCM(Firebase Cloud Messaging)이 이 토큰을 사용하여, 앱 ID로 식별되는 애플리케이션에 푸시 알림을 보냅니다.

• 푸시 알림 인증서

다음과 같은 순서로 진행하도록 하겠습니다!!

1. 인증서 발급
2. 인증키 생성
3. 앱 ID 생성
4. Firebase 에 생성해둔 내 iOS 앱에 APN 인증 키 등록
5. 내 앱의 Capabilities 추가하기
6. Firebase 콘솔에서 테스트 메세지 보내기

4.1. 인증서 발급하기

Macbook 에서 기타 -> 키체인 접근 앱을 실행시킵니다.

그리고 왼쪽 상단 메뉴에서 인증서 지원 -> 인증 기관에서 인증서 요청 을 클릭합니다.

아래 화면이 뜨면, 본인의 apple 계정 메일 주소와 이름을 입력하고,
디스크에 저장됨 / 본인이 키 쌍 정보 지정을 체크합니다.

저장할 위치를 확인하고 계속 을 누르면, 지정한 위치에 인증서가 저장됩니다.

이렇게요!

4.2. 인증키 생성하기

https://developer.apple.com/ 에 들어가 로그인하고,
Account -> Certificates, IDs & Profiles로 들어갑니다.

아래 사진의 Key 로 이동해 제목 옆의 + 버튼을 클릭합니다.

생성할 인증키의 이름을 입력하고, 첫번째 항목인 Apple Push Notification service(APNs)에 체크합니다.
체크까지 하셨다면 Continue 를 눌러 진행해주세요!

정보가 일치하는지 확인하시고 Register을 눌러주세요.

아래와 같은 화면이 뜨면, Key ID를 잘 적어두시고,
우측 상단 Download 버튼을 통해 안전한 곳에 인증키를 다운받습니다.

노란 경고박스에도 쓰여있듯이, 인증키는 한 번 다운받고 나면 두 번 다시 다운받을 수 없습니다. 따라서 지금 당장 안전한 곳에 인증키를 다운받을 수 있는 상황이 아니라면, Done 버튼을 누르고 추후 다운로드받으세요.

잘 저장되었나요?

4.3. 앱 ID 생성하기

이번엔 App ID를 생성해야 하는데요.
다시 https://developer.apple.com/ 로 돌아간 후,
Identifiers 메뉴에 들어가 제목 옆의 + 버튼을 누릅니다.

첫 줄에 있는 App IDs를 클릭해 들어갑니다.

App을 선택하고, 다음으로 넘어갑니다.

Description에 이름을 써주시고, Explicit을 선택합니다.
Bundle ID엔 뭘 써야 하는지 아시죠? 글 처음에 xCode 의 general 에서 긁어왔던 .com 으로 시작하는 Bundle Identifier 를 집어넣습니다.

그리고 Push Notification에 체크를 한 후 Continue를 누릅니다.

그대로 쭉쭉 Register 까지 진행하시면 앱 ID 생성이 완료됩니다.

4.4. 내 iOS 앱에 APN 인증키 등록

이제 위에서 생성한 인증키를 제 iOS 앱에 등록할 차례입니다.

Firebase 콘솔로 가서, 만들어두었던 iOS 앱으로 이동합니다.

클라우드 메시징 탭으로 이동합니다.
그러면 하단에 iOS 앱 구성이라는 항목이 보입니다.

APN 인증 키 라고 되어있는 곳에 저희가 만든 .p8 인증키를 업로드합니다.
참고로 아래의 APN 인증서라고 되어있는 곳은 .p12 인증서 설정이라고 하네요.
헷갈리지 않고 인증키를 등록합니다.

아까 안전한 곳에 저장해두었던 .p8 인증키 파일을 업로드합니다.
그리고 안전한 곳에 적어두었던 key ID도 입력합니다.
팀 ID 는 여기에 들어가면 확인할 수 있습니다.

모두 입력했다면 업로드 버튼을 눌러주세요.
저는 이 앱에 저장된 팀 ID 가 없습니다 라는 에러가 났습니다. 그런데 다시 한 번 업로드 버튼을 누르니 그냥 등록이 됐어요 ㅇ.ㅇ

정상적으로 등록되었나요?

🔥 5. firebase 콘솔에서 테스트 메세지 보내기

5.1. capabilities 설정

xCode 의 개발 소스로 돌아갑니다.

Signing & Capabilities -> + Capability

• Push Notifications를 추가합니다.
• Background Modes 를 추가하고 Remote Notifications 에 체크합니다.

이렇게 앱에서 push notification 을 받을 준비는 끝났습니다.

5.2. firebase 콘솔에서 테스트 메세지 보내기

푸시 알림을 테스트하는 방법은 이전 게시글을 참고해주세요.

• 앱이 켜져있을 때 (Foreground)
• 앱이 켜져있지만 background 에 있을 때 (Background)
• 앱이 꺼져있을 때 (Quit)

세 가지 경우를 테스트해보셔야 합니다.

5.3. 여기까지 했는데 푸쉬 알림 테스팅에 실패했다면...

앱 ID configuration을 변경해 보도록 합니다.
다시 Identifiers 화면으로 돌아가서, 아까 등록했던 앱 ID를 클릭합니다.

쭉 아래로 내려가면 아까 체크해둔 Push Notifications 옆에 Configure 버튼이 생겨있습니다. 그리고 옆에 Certificates (0)이라고 되어있네요.

Push Notification 에 등록된 인증서가 0개라는 뜻입니다.
Configure 버튼을 눌러줍니다.

그러면 아래와 같은 화면이 뜨는데요, 순서대로 하나씩 등록해주시면 됩니다.
위에 있는 건 개발용 인증서고, 아래 있는 건 production용 인증서예요.
둘 다 같은 방식으로 진행해주시면 됩니다.
Create Certificate를 눌러주세요.

Choose File을 누르고, 4.1. 인증서 발급하기에서 발급받았던 인증서를 업로드합니다.
CertificateSigningRequest.certSigningRequest 파일입니다.
업로드 후 Continue를 누릅니다.

Certificate Details 를 확인 후, 맞다면 Download를 눌러 다운로드해주세요.
마찬가지로 안전한 곳에 잘 저장해주세요.

다시 아까의 화면으로 돌아가보면 Certificate (1) 로 바뀌어 있는 것을 볼 수 있습니다.
Edit을 눌러 나머지 하나도 등록해줍니다.

같은 방식으로 development, production 버전 둘 다 인증서를 발급받고 나면 다음과 같은 파일이 두 개 생깁니다.
각각의 파일을 더블클릭 해 설치합니다. (설치 후 키체인 화면에서 확인 가능합니다.)

푸시 알림을 띄우는 데 성공하셨나요?