Firebase Messaging

플러터에서 푸시 알림을 전송하기 위한 Firebase 프로젝트 구성 방법에 대해 정리한다.

 

 

1. iOS용 p8키 발급 및 Xcode 세팅

1) 애플 개발자 홈페이지에 로그인한다.

 

2) 인증서, ID 및 프로파일 > 키(영문)를 누른다.

 

3) + 버튼을 눌러 새 키를 생성한다.

- Key name에 용도에 맞는 키 이름(e.g. MyProject Firebase Push Key)을 입력한다.

- Apple Push Notifications service (APNs)를 체크한 후, Configure 버튼을 누른다.

- Environment로 Sandbox & Production을 선택한 후 Save 버튼을 누른다.

- Contiunue > Register 버튼을 차례로 눌러 키 생성을 마친다.

 

4) 우측 상단의 Download 버튼을 눌러 p8키를 저장한다.

다운로드는 딱 한 번 받을 수 있으므로 안전한 곳에 키를 잘 보관한다.

 

5) 플러터 프로젝트의 ios 폴더 안에 있는 Runner.xcworkspace를 더블클릭하여 Xcode를 실행한다.

 

6) TARGETS > Runner > Signing & Capabilities에서 + Capability 눌러서 기능을 추가한다.

- Background Modes, Push Notifications 2개 선택

- Background Modes options: Remote notifications 체크

 

 

2. Firebase 프로젝트 구성

Firebase 콘솔에 로그인 한 후 새 프로젝트를 생성한다.

 

 

3. Firebase CLI 설치

1) 다음 명령어를 실행하여 Firebase CLI를 설치한다.

npm install -g firebase-tools

 

2) 다음 명령어를 실행하여 Firebase에 로그인한다.

firebase login

 

2-1) 다른 계정을 추가하고 싶을 경우 다음 명령어를 입력한다.

firebase login:add

 

2-2) 추가한 계정으로 로그인하고 싶을 경우 다음 명령어를 입력한다.

firebase login:use my_email@address

my_email@address에 로그인하고 싶은 구글 계정 이메일 주소를 입력한다.

 

3) 다음 명령어를 실행하여 FlutterFire CLI를 설치한다.

dart pub global activate flutterfire_cli

 

4) 내 플러터 프로젝트 루트 디렉토리에서 다음 명령어를 실행한다.

flutterfire configure

 

5) 프로젝트 선택 안내 문구가 출력되면 방향키를 움직여 2에서 생성한 Firebase 프로젝트를 선택한다.

 

6) 플랫폼 선택 안내 문구가 출력되면 내 플러터 앱에 맞는 플랫폼(e.g. Android, iOS 등)을 선택한 후 Enter를 눌러준다.

 

7) 선택한 플랫폼에 맞게 새 앱이 Firebase 프로젝트에 추가되며, 다음 파일들이 내 플러터 프로젝트에 자동으로 생성된다.

- 안드로이드 플러그인 파일(google-services.json)

- iOS 구성 파일(GoogleService-Info.plist)

- Firebase 구성 파일(firebase_options.dart)

- settings.gradle.kts, build.gradle.kts 파일에 안드로이드 플러그인 관련 코드 자동 추가

 

 

4. Firebase 패키지 추가

1) pubspec.yaml에 다음 패키지를 추가한다.

  firebase_core: ^4.2.1
  firebase_messaging: ^16.0.4
  flutter_local_notifications: ^19.5.0

각 패키지에 맞게 최신 버전을 적용해준다.

(flutter_local_notifications 패키지는 foreground 메세지를 수신하는 데 필요하다.)

 

1-1) 변경 사항이 자동으로 적용되지 않았을 경우 수동으로 적용해준다.

flutter pub get

 

 

5. iOS 키 파일 업로드

1) 2의 Firebase 콘솔에 다시 접속한다.
2) 프로젝트를 선택하고, 클라우드 메시징 > APN 인증 키 부분에서 업로드 버튼을 눌러 1에서 생성한 p8키를 업로드한다.

 

 

6. 안드로이드 아이콘 설정

푸시 알림을 수신했을 때 상단바에 보이는 아이콘을 설정한다.

iOS는 기본적으로 앱 아이콘으로 설정되지만 안드로이드는 따로 세팅을 해주어야 한다.

 

1) 아이콘으로 사용할 이미지 업로드

- 안드로이드 스튜디오에서 android 폴더를 안드로이드 뷰로 오픈한다.

- res 폴더를 우클릭하여 New > Image Asset을 선택한다.

- Icon type을 Notification Icons로 변경한 후, 이름을 세팅해준다.(e.g. ic_notification)

- 파일 업로드 후 프리뷰를 보면서 trim, padding 값을 조절한다.

- Next > Finish를 누르면 해상도별로 아이콘 이미지가 생성된다.

 

2) 다음 코드를 AndroidManifest.xml의 <application></application> 안에 추가한다.

<meta-data
	android:name="com.google.firebase.messaging.default_notification_icon"
	android:resource="@drawable/ic_notification" />

resource에 위에서 설정한 이름을 적어준다.

 

 

7. Google Cloud Console API 키 제한 설정

API 키 무단 사용 방지를 위해 Google Cloud Console에서 iOS, 안드로이드 API 키에 제한 설정을 추가한다.

 

1) iOS 세팅

- iOS key를 누르고 애플리케이션 제한사항에서 iOS 앱을 선택한다.

- Add를 눌러 bundle id를 추가하고, 하단 저장 버튼을 눌러 저장한다.

 

2) Android 세팅

- Android key를 누르고 애플리케이션 제한사항에서 Android 앱을 선택한다.

- Add를 눌러 Package name과 SHA-1 인증서 지문을 추가하고, 하단 저장 버튼을 눌러 저장한다.

 

 

8. 코드 구현

푸시 알림을 수신하는 코드를 구현하고, main.dart에서 초기화해준다.

* FlutterLocalNotificationsPlugin InitializationSettings를 초기화 할 때 반드시 아래와 같이 아이콘 파일을 포함해주어야 한다. (6번 참고)

InitializationSettings(
      android: AndroidInitializationSettings(
        '@drawable/ic_notification',
      ),
      ...

 

 

9. 테스트

내 기기(또는 시뮬레이터)의 Firebase 토큰 값을 알고 있다고 가정한다.

 

1) Firebase 콘솔에서 프로젝트를 선택하고, 좌측 제품 카테고리 > 실행 > Messaging을 선택한다.

 

2) 첫 번째 캠페인 만들기 또는 새 캠페인을 선택한다.

 

3) Firebase 알림 메세지를 선택한 후, 알림 제목과 알림 텍스트를 입력한다.

3-1) 딥링크를 포함하여 전송할 경우 추가 옵션(선택사항) > 맞춤 데이터에서 6번에서 구현한 대로 key, value를 입력한다.

e.g.

 

4) 우측 기기 미리보기에서 테스트 메시지 전송을 클릭한다.

 

5) FCM 등록 토큰 추가란에 테스트 할 기기의 토큰값을 입력하고 + 버튼을 눌러 추가한다.

 

6) 추가된 토큰을 선택하고 테스트 버튼을 누른다.

 

7) 푸시 알림이 기기에서 수신되는지 확인한다.

 

 

* Firebase CLI 자주 사용하는 명령어

- 연결된 계정 리스트를 출력한다.

firebase login:list

 

- 현재 계정에 연결된 프로젝트 리스트를 출력한다.

firebase projects:list

 

- 현재 사용되고 있는 버전 값을 출력한다.

firebase --version