🐰: 개인프로젝트를 하면서 푸시알림발송을 해보았다!
너무 어려웠는데 하나부터 열까지 너무 깔끔하게 정리해놔주신 블로그..!
불과 4년전 글임에도 불구하고 차근차근 따라하니까 너무 잘되었다!
요로코롬 아주 잘 왔다 !
기록겸 개념 정리를 위해 내 블로그에 한번 더 정리하기!
참고사이트
May님 블로그 : [React Native] 🔥 Firebase 로 푸쉬 알림 구현하기 - (2) iOS 앱에서 푸시 알림 띄우기!
1. iOS 인증서 생성
iOS앱을 내 Firebase 프로젝트와 안전하게 연결하기 위해 인증서 파일을 다운받아 iOS앱 내에 세팅해야한다.
1.1) Firebase 콘솔에서 iOS 앱 생성하기
저는 이미 Android, iOS앱을 생성해서 2 apps라고 표기되지만
생성전이라는 가정하에 + Add app 버튼을 눌러줍니다.
이곳 또한 저는 이미 생성된 앱이라 아이콘이 주황색 컬러로 선택되어 있어요!
iOS+아이콘을 클릭해주세요!
Apple bundle ID는 반드시 본인 프로젝트의 bundle ID와 같아야 합니다.
내 프로젝트의 bundle ID를 알아내는 방법은 다음과 같습니다.
Xcode에서 내 프로젝트를 켜고, General 탭 -> Bundle Identifier -> com.으로 시작되는 번들 ID를 복사해서 넣어줍니다.
1.2) 인증서 다운로드 후 내 앱에 집어넣기
앱을 등록하고 나면 2번으로 넘어가면서, 인증서 파일을 다운받을 수 있는 항목이 보인다.
GoogleService-Info.plist 다운받아서 Xcode에 열려잇는 프로젝트 root에 추가해준다.
GoogleService-Info.plist 파일을 옮겨 놓으려 하면 이런 창이 뜨는데 위와 같이 선택하고 Finish를 눌러주면 된다.
파일 위치가 굉장히 중요하니까 올바른 위치에 들어갔는지 한번 더 확인해주세요!
2.iOS 인증서 생성
2.1) iOS SDK 세팅하기
/ios/{projectName}/AppDelegate.m 파일 상단에 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.2) 프로젝트 rebuild
위 과정이 모두 끝났다면 프로젝트를 rebuild 해줍니다.
cd ios
pod install --repo-update
cd ../
yarn ios
3.iOS 환경에서 알림 권한 요청
iOS는 사용자의 승인을 받지 않은 notification 을 수신하지 못하도록 해놓았기 때문인에 앱을 설치하면 아래와 같은 알림창을 확인할 수 있다.
바로 이 창을 띄우는 메서드인 requestPermission 메서드를 사용해줘야 한다.
안드로이드에서는 사용자 승인을 요청할 필가 없지만, 안드로이드 환경에서 requestPersmission 메서드가 불린다고 해서 별다른 문제는 없다고 합니다!! 따로 분기처리는 필요하지 않고, 다만 안드로이드 환경에서 불릴 경우 항상 resolve 처리가 된다.
아래 코드를 필요한 곳에 추가해주시면 됩니다. 앱 첫 실행 시 권한을 물어봐야 한다면 App.tsx 에 넣으면 될 것이다.
import messaging from '@react-native-firebase/messaging';
const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log('알림 권한 상태:', authStatus);
} else {
console.log('알림 권한이 거부되었습니다.');
}
};
해당 코드는 첫 요청 시에만 권한을 묻는 Alert 창을 띄웁니다. 그 이후로는 authorizationStatus 값에 현재 Notification 이 가능한 상태인지, 아닌지의 값을 받아올 수 있다.
- 0 이 들어올 경우 : 거절 상태일 때.
- 1 이 들어올 경우 : 승인 상태일 때.
- 2 가 들어올 경우 : iOS 12 이상에서의 '잠정적 승인' 상태일 때. iOS 12 이상에서는 유저에게 권한을 묻지 않고 저희가 잠정적 승인 상태로 만들어버릴 수 있다.
4.firebase에서 APN 구성하기
APN이란?
Apple Push Notification, 즉 애플 푸시 알림 서비스 이다.
Firebase에서 APN을 구성해 푸시 알림을 보내려면 다음이 필요하다.
- 앱ID
- Appl 개발자 계정의 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 생성하기
다시 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 인증키 등록
Firebase 콘솔로 가서, 만들어두었던 iOS 앱으로 이동.
클라우드 메시징 탭으로 이동.
그러면 하단에 iOS 앱 구성이라는 항목이 보입니다.
APN 인증 키 라고 되어있는 곳에 저희가 만든 .p8 인증키를 업로드.
참고로 아래의 APN 인증서라고 되어있는 곳은 .p12 인증서 설정.
헷갈리지 않고 인증키를 등록합니다.
아까 안전한 곳에 저장해두었던 .p8 인증키 파일을 업로드.
그리고 안전한 곳에 적어두었던 key 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 버전 둘 다 인증서를 발급받고 나면 다음과 같은 파일이 두 개 생깁니다.
각각의 파일을 더블클릭 해 설치합니다. (설치 후 키체인 화면에서 확인 가능합니다.)
