[Delphi] 델파이 안드로이드/iOS 에서 FCM(Firebase Cloud Messaging) 사용하기

안녕하세요

로로봉입니다 : )

오늘은 델파이에서 안드로이드와 iOS에서 Firebase Cloud Messaging(FCM)을 사용하여 푸쉬 메시지를 보내는 방법을 포스팅해보겠습니다.

1.Firebase 프로젝트 생성

 우선 FCM을 사용하기 위해 아래 사이트에 접속하여 구글 계정으로 로그인을 해 줍니다.

로그인 - Google 계정

 구글 계정으로 로그인 한 뒤 프로젝트 만들기 버튼을 눌러 프로젝트를 추가해줍니다.

[ 그림 1 : Firebase 프로젝트 추가 ]

 프로젝트 이름을 작성하고 계속 버튼을 누릅니다.

[ 그림 2 : 프로젝트 만들기(1/3) ]

 계속 버튼을 눌러 진행합니다.

[ 그림 3 : 프로젝트 만들기(2/3) ]

 Google 애널리틱스 계정 선택에서 Default Account for Firebase를 선택 후 프로젝트 만들기 버튼을 눌러줍니다.

[ 그림 4 : 프로젝트 만들기(3/3) ]

 프로젝트가 자동으로 생성되며 아래와 같이 완료되는 것을 볼 수 있습니다.

[ 그림 5 : 프로젝트 생성 완료 ]

 이제 프로젝트 생성은 완료되었으며, 안드로이드와 iOS를 각각 추가하여 구성파일을 다운받아주어야 합니다.

추후 다운 받은 구성파일은 델파이에 연결하여 안드로이드와 iOS에서 푸쉬 메시지 연동을 가능하게 합니다.

우선 Android를 먼저 준비해보겠습니다.

앱의 "Firebase를 추가하여 시작하기" 아래에 Android 아이콘을 선택합니다.

[ 그림 6 : Firebase 프로젝트 초기 화면 ]

 패키지 이름에 실제 델파이 프로젝트의 패키지 명을 입력해 줍니다. 예시로 com.xxx.xxx 식으로 정해진 패키지 명칭을 작성 후 앱 등록 버튼을 클릭합니다.

[ 그림 7 : Android 앱 추가 ]

 구성 파일 다운로드에서 google-services.json 다운로드 버튼을 눌러 json 파일을 다운 받아줍니다.

[ 그림 8 : Android 구성 파일 다운로드 ]

 구성 파일을 다운받았기 때문에 앱을 실행하여 설치 확인 단계 까지 다음을 눌러주고, 이 단계 건너띄기를 눌러주면 됩니다.

[ 그림 9 : Android 앱 추가 마지막 단계 ]

이제 아이폰 iOS용 구성파일을 받아보겠습니다. 다시 Firebase 첫 화면으로 돌아와서 + 앱 추가 버튼을 눌러줍니다.

[ 그림 10 : 앱 추가 화면 ]

 iOS 아이콘을 선택합니다.

[ 그림 11 : iOS 아이콘 클릭 ]

 Android와 동일하게 패키지 명칭을 번들 ID에 입력해주고 앱 등록 버튼을 눌러줍니다.

[ 그림 12 : iOS 앱 추가 ]

 구성 파일 다운로드에서 GoogleService-Info.plist 다운로드 버튼을 클릭해 plist 파일을 다운받아줍니다.

[ 그림 13 : iOS 구성 파일 다운로드 ]

 구성 파일을 다운받았기 때문에 Android와 동일하게 앱을 실행하셔 설치 확인 단계까지 다음을 눌러줍니다.

이 단계 건너띄기를 눌러 줍니다.

[ 그림 14 : iOS 앱 추가 마지막 단계 ]

 다운 받은 구성파일은 FCM을 사용하기에 꼭 필요한 파일이기에 기억가능한 곳에 저장해 두시면 됩니다.

---

2. 앱 푸시 서버 구현하기

 앱 푸시 메시지를 보내기 위해서 각 기기마다 해당 기기에 부여되는 토큰 값으로 구분이 가능합니다. 

FCM의 HTTP 프로토콜을 이용해 토큰 값을 보내게 되면 해당 토큰의 기기로 푸시 알림이 전송되도록 되어 있습니다.

푸시 메시지 형식은 아래 Firebase 문서 사이트에서 확인 할 수 있습니다.

Firebase 클라우드 메시징 HTTP 프로토콜

 앱 푸시 서버를 구현하기에 앞서 우선적으로 FCM의 서버 키 값을 알아야 합니다. HTTP 프로토콜을 전송할 때 해더부분에 서버 키 값을 포함시켜야 FCM 클라우드 메시징이 제대로 동작합니다.

 서버 키 값을 확인하기 위해 Firebase 콘솔창에서 프로젝트 설정으로 들어가 줍니다.

[ 그림 15 : 프로젝트 설정 메뉴 확인 ]

 상단 탭에서 클라우드 메시징을 선택하면 서버 키를 확인 할 수 있습니다.

[ 그림 16 : 서버 키 확인 ]

 해당 서버키를 복사하여 특정 파일이나 데이터베이스에 저장해줍니다. 푸시 서버는 일정한 가격을 두고 데이터베이스에 쌓이는 데이터를 FCM API로 보내는 역할을 해야 합니다.

 서버 키 값을 저장해 두었다면 이제 델파이에서 FCM HTTP를 사용하는 법을 알아보도록 하겠습니다.

아래와 같이 uses 절에 JSON과 HttpClientComponent를 추가해 줍니다.

uses
  System.JSON, System.Net.HttpClientComponent;

 푸시 함수를 아래와 같이 구현해 줍니다.

procedure PushSend(usToken, usTitle, usMessage: String);
var
  JSONObject : TJSONObject;
  JSONData   : TJSONObject;
  JSONData1  : TJSONObject;
  
  NetHTTP : TNetHTTPClient;
  RequestBody : TStream;
begin
  JSONData   := TJSONObject.Create;
  JSONData1  := TJSONObject.Create;
  JSONObject := TJSONObject.Create;

  JSONData.AddPair('title', usTitle);           	// 알림 타이틀
  JSONData.AddPair('body', usMessage);          	// 알림 바디
  JSONData.AddPair('sound', 'notification');    	// 알림 사운드 처리
  JSONObject.AddPair('notification', JSONData); 	// notification 안에 title, body 담기
  JSONData1.AddPair('ptitle', usTitle);
  JSONData1.AddPair('pdata', usMessage);
  JSONObject.AddPair('data', JSONData1);        	// data 안에 title, body 담기
  JSONObject.AddPair('priority', 'high');
  JSONObject.AddPair('to', usToken);            	// 클라이언트 앱에서 발급 받은 토큰

  NetHTTP := TNetHTTPClient.Create(nil);

  RequestBody := TStringStream.Create(
    JSONObject.ToString,
    TEncoding.UTF8
  );
  try
    NetHTTP.AcceptCharSet := 'utf-8';
    NetHTTP.ContentType   := 'application/json';
    NetHTTP.CustomHeaders['Authorization'] := 'key='+usFServerKey;		// 서버 키 값

    NetHTTP.Post('https://fcm.googleapis.com/fcm/send',RequestBody);

    if bFLogWrite then
      LogWrite('푸시메시지 전송', JSONObject.ToString);
  except
    on E : Exception do
      LogWrite('푸시메시지 ERROR',E.Message);
  end;
end;

 위의 함수를 구현하면 특정 이벤트나 조건에 맞을 때 해당 함수를 호출하여 푸시 메시지를 보낼 수 있습니다.

---

3. Android FCM 설정하기

 Android에서 FCM을 사용하기 위해서 우선적으로 uses 절에 푸쉬 메시지에 관련한 파일들를 추가해주어야 합니다.

uses
  System.PushNotification, FMX.PushNotification.Android;

 푸쉬 메시지 관련 변수 및 함수를 선언해줍니다.

private
  FDeviceToken : String;
  
  procedure OnServiceConnectionChange(Sender: TObject; PushChanges: TPushService.TChanges);
  procedure OnReceiveNotificationEvent(Sender: TObject; const ServiceNotification: TPushServiceNotification);

 이제 앱의 OnCreate 함수에서 푸시 이벤트를 추기화 해줍니다.

TPushService.TServiceNames.FCM 은 델파이 10.4버전 부터 생긴 것으로 보이며, 이전 버전에서는 GCM으로 대체하시면 됩니다.

procedure TfrmMain.FormCreate(Sender: TObject);
var
  ServiceConnection: TPushServiceConnection;
begin
  PushService := TPushServiceManager.Instance.GetServiceByName(TPushService.TServiceNames.FCM);
  ServiceConnection := TPushServiceConnection.Create(PushService);
  ServiceConnection.Active := True;
  ServiceConnection.OnChange := OnServiceConnectionChange;
  ServiceConnection.OnReceiveNotification := OnReceiveNotificationEvent;
end;

 OnChange와 OnReceiveNotification 함수는 아래와 같이 구현해줍니다.

procedure TfrmMain.OnServiceConnectionChange(Sender: TObject; PushChanges: TPushService.TChanges);
begin
  // Push 메시지 토큰 발행 - 발행된 토큰 값 회원 인증 시 서비스로 전송
  PushService := TPushServiceManager.Instance.GetServiceByName(TPushService.TServiceNames.FCM);
  if TPushService.TChange.DeviceToken in PushChanges then
    FDeviceToken := PushService.DeviceTokenValue[TPushService.TDeviceTokenNames.DeviceToken];

  // 토큰 발급 에러 시 오류 메시지
  if (TPushService.TChange.Status in PushChanges) and (PushService.Status = TPushService.TStatus.StartupError) then
    Log.d('Error: ' + PushService.StartupError);
end;

procedure TfrmMain.OnReceiveNotificationEvent(Sender: TObject; const ServiceNotification: TPushServiceNotification);
var
  usTmp : String;
  MyNotification: TNotification;
begin
  usTmp := ServiceNotification.Json.ToString;
  if JSONConvert(usTmp,'gcm.notification.body') <> '' then
  begin
    MyNotification := NotificationCenter.CreateNotification;
    try
      MyNotification.Name  := '알림 타이틀';
      MyNotification.Title := JSONConvert(usTmp,'gcm.notification.title');
      MyNotification.AlertBody := JSONConvert(usTmp,'gcm.notification.body');
      NotificationCenter.PresentNotification(MyNotification);
    finally
      FreeAndNil(MyNotification);
    end;
  end;

  if JSONConvert(usTmp,'pdata') <> '' then
  begin
    FbMsgFlag := True;
    btnMsg.Fill.Bitmap.Bitmap.LoadFromResource('PushMsg');
  end;
end;

 위 함수에 대해 궁금하신 점은 댓글로 문의주시면 좀 더 자세히 설명 드리겠습니다.

이제 다운받은 Android 구성 파일을 프로젝트에 등록해 주어야 합니다. 델파이에서 Ctrl + Alt + F11 을 누르시면 프로젝트 옵션 창이 표시됩니다. 좌측의 Application - Services 탭을 선택하고, Import… 버튼을 눌러 google-services.json 파일을 지정해 줍니다.

[ 그림 17 : 프로젝트 옵션 창 ]

 구성 파일을 추가하고 Application - Entitlement List 탭에서 push notifications 설정을 true로 변경해 주어야 합니다.

[ 그림 18 : Push 설정 활성화 ]

 이제 앱을 실행하면 FDeviceToken 변수로 토큰 값이 저장되는 것을 볼 수 있습니다. 해당 토큰을 푸시 서버 쪽에 저장하여 전송하면 안드로이드 폰에 알람이 오는 것을 볼 수 있습니다.

---

4. iOS FCM 설정하기

 iOS 에서 FCM을 사용하기 위해서 아래 URL에서 iOS용 라이브러리를 다운받아야 합니다.

DelphiWorlds/KastriFree

 Code 버튼을 누르고 Download ZIP을 선택하여 라이브러리르 다운받아 줍니다.

[ 그림 19 : 라이브러리 다운로드 ]

 다운받은 라이브러리를 압축해제 해준 뒤 델파이에서 Tools - Options 창을 띄워줍니다.

Options 창에서는 Language - Delphi - Library 탭을 선택하고 iOS Device 64-bit를 선택하여 Library Path에 압축 해제한 파일 경로를 등록해 줍니다.

[ 그림 20 : 라이브러리 경로 등록 화면 ]

위와 같이 라이브러리 경로를 지정하고 uses절에 아래와 같이 추가해 줍니다.

uses
  FMX.PushNotification.iOS, DW.Firebase.Messaging, DW.OSLog, DW.UIHelper;

사용할 변수 및 함수를 추가해줍니다.

private
  FDeviceToken : String;
  
  procedure CreateFirebaseMessaging;
  procedure FCMAuthorizationResultHandler(Sender: TObject; const AGranted: Boolean);
  procedure FCMTokenReceivedHandler(Sender: TObject; const AToken: string);
  procedure FCMMessageReceivedHandler(Sender: TObject; const APayload: TStrings);

위의 각 함수는 아래와 같이 구현해줍니다.

procedure TfrmMain.CreateFirebaseMessaging;
begin
  FFCM := TFirebaseMessaging.Create;
  FFCM.OnAuthorizationResult := FCMAuthorizationResultHandler;
  FFCM.OnTokenReceived := FCMTokenReceivedHandler;
  FFCM.OnMessageReceived := FCMMessageReceivedHandler;
  FFCM.RequestAuthorization;
end;

procedure TfrmMain.FCMAuthorizationResultHandler(Sender: TObject; const AGranted: Boolean);
begin
  if AGranted then
    FFCM.Connect;
end;

procedure TfrmMain.FCMTokenReceivedHandler(Sender: TObject; const AToken: string);
begin
  FDeviceToken := AToken;
end;

procedure TfrmMain.FCMMessageReceivedHandler(Sender: TObject; const APayload: TStrings);
var
  usTmp : String;
begin
  TOSLog.d('FCM Message : %s', [APayload[0]]);

  usTmp := APayload[0];
  if JSONConvert(usTmp,'pdata') <> '' then
  begin
    NotificationCenter.ApplicationIconBadgeNumber := NotificationCenter.ApplicationIconBadgeNumber + 1;
    FbMsgFlag := True;
    btnMsg.Fill.Bitmap.Bitmap.LoadFromResource('PushMsg');
  end;
end;

 OnCreate 함수에 CreateFirebaseMessaging 함수를 호출해주면 안드로이드와 동일하게 FDeviceToken 변수에 토큰 값이 저장되는 것을 볼 수 있습니다.

 소스상에서 해야할 것은 모두 되었고, 이제 정상적으로 컴파일 하기 위해 iOS Framework를 추가해 주어야 합니다.

 Tools - Options 창을 열어주고 Depolyment - SDK Manager를 선택합니다. 기존에 추가된 iOS SDK를 선택하고 아래 리스트의 SDK를 추가해 줍니다.

[ 그림 21 : iOS Frameworks 리스트 ]

 추가해준 뒤 하단의 Update Local File Cache 버튼을 눌러 SDK 업데이트를 해주어야 합니다.

[ 그림 22 : SDK Manager 화면 ]

 이제 Firebase에서 다운받은 구성파일을 Deployment에 추가해 주어야 합니다. Project - Deployment를 선택하여 창을 열고 GoogleService-Info.plist 파일을 추가해 줍니다.

[ 그림 23 : 구성 파일 추가 화면 ]

안드로이드는 FCM 기능을 구현하고 구성 파일만 추가해서 동작했지만, iOS는 별도의 추가 작업이 필요합니다.

개발 과정에서 푸쉬 메시지를 매번 배포하면서 테스트 할 수 없기 때문에 개발 디바이스를 추가해주어야 하고, 푸시 메시지를 사용하기 위해 iOS용 키 파일을 저장하여 FCM에 등록해주는 작업이 필요합니다.

이전 게시물에서 iOS 환경 설정하는 방법은 확인이 가능합니다.

델파이 10.4 Sydney iOS 개발 환경 만들기

개발 환경이 어느정도 갖춰져 있다고 가정하고 알아보도록 하겠습니다. 우선 iOS 개발자 사이트에 접속해 줍니다.

Apple Developer

 개발자 계정으로 로그인 후에 Account 메뉴를 선택하고 좌측의 Certificates, IDs & Profiles를 선택해 줍니다.

[ 그림 24 : 개발자 iOS 사이트 화면 ]

좌측의 Identifiers 메뉴를 선택하여 앱 명칭으로 App ID를 만들어 줍니다. App ID를 만들어야 개발 프로파일을 만들 수 있습니다.

App ID 등록을 위해 +기호를 눌러 줍니다.

[ 그림 25 : Indentifiers 추가 버튼 클릭 ]

App IDs를 선택하고 Continue를 눌러 줍니다. App을 선택하고 Continue를 눌러줍니다.

Description 에는 해당 앱의 설명을 작성하고, Bundle ID에 FCM에서 입력한 번들 ID와 동일한 번들 ID(com.xxx.xxx)를 입력해 줍니다.

[ 그림 26 : 앱 ID 명칭 및 번들 ID 등록 화면 ]

스크롤을 내리시면 Push Notifications 기능이 있는 것을 볼 수 있습니다. 체크하여 활성화 합니다.

[ 그림 27 : Push Notifications 체크 화면 ]

Continue를 누르면 입력한 번들 ID가 중복되지 않은 경우 Register 버튼으로 변경되는 것을 볼 수 있습니다.

Register 버튼을 눌러 등록해줍니다. 번들 ID는 FCM과 델파이 프로젝트에서 번들 ID가 동일해야만 푸시 메시지가 올바르게 동작하기 때문에 정확하게 입력해 주셔야 합니다.

App ID 등록을 마친 후 좌측의 Devices 를 선택해줍니다. 푸시 메시지 기능을 디버깅 하기 위해서는 개발 디바이스를 등록하여 프로파일에 연결해 주어야 합니다.

새로운 디바이스 추가를 위해 Devices 옆에 +기호를 눌러줍니다.

[ 그림 28 : Devices 추가 버튼 클릭 ]

Device Name에 디바이스 명칭을 입력하고 Device ID는 맥북에 iPhose이나 iPad를 연결하고 XCode를 실행하여 확인이 가능합니다.

[ 그림 29 : Device 추가 화면 ]

UDID를 확인하기 위해 XCode 상단 메뉴 Window - Devices and Simulators 를 선택해 줍니다.

[ 그림 30 : XCode 메뉴 선택 ]

연결된 장치가 Devices에 표시되며 Identifier 에 나와있는 데이터가 Device ID(UDID) 입니다. 

[ 그림 31 : Device ID 확인 화면 ]

해당 데이터를 복사하여 입력하고 Continue를 눌러 주고 Register 버튼과 Done을 순차적으로 눌러서 등록을 완료합니다.

이제 좌측의 Profies를 선택하여 프로파일을 만들어 줍니다. Profiles 우측의 + 버튼을 눌러줍니다.

[ 그림 32 : 프로파일 추가 버튼 클릭 ]

개발 프로파일으로 만들 것이기 때문에 iOS App Development 를 선택 후 Continue를 눌러줍니다. 만들어 두었던 App ID를 선택 후 Continue를 눌러줍니다.

[ 그림 33 : App ID 선택 화면 ]

개발 인증서를 체크하고 Continue를 눌러줍니다.

[ 그림 34 : 개발 인증서 선택 화면 ]

개발 인증서에서 사용할 장치를 체크하고 Continue를 눌러줍니다. 개발 인증서로 빌드하는 경우 이 단계에서 장치 체크가 안되어 있다면 푸시 메시지가 제대로 동작하지 않을 수 있습니다.

프로파일 명칭을 입력하고 Generate 버튼을 누른 뒤 Download 버튼으로 활성화되면 Download 버튼으로 인증서를 다운 받아 줍니다.

[ 그림 35 : 프로파일 다운로드 화면 ]

이제 좌측의 Keys 메뉴를 선택하여 Key 파일을 추가해 줍니다. Keys 옆에 + 기호를 눌러줍니다.

[ 그림 36 : Key 추가 버튼 클릭 ]

Apple Push Notifications service (APNs) 를 체크하고 Key Name에 키파일 명칭을 입력한 뒤 Continue 버튼을 눌러줍니다.

[ 그림 37 : Key 추가 화면 ]

Register 버튼을 눌러 등록해 줍니다.

[ 그림 38 : Key 등록 화면 ]

키 파일은 1회만 다운로드 되기 때문에 등록 후에 Download 버튼을 눌러 키 파일을 다운받아 주시고 잘 보관해 주어야 합니다.

키 파일은 Firebase에 등록해 주어야 하기 때문에 아래 Firebase 콘솔 사이트를 접속해 줍니다.

로그인 - Google 계정

만들어져 있는 프로젝트를 선택해 줍니다.

[ 그림 39 : Firebase 로그인 후 화면 ]

좌측의 설정 아이콘을 눌러 프로젝트 설정을 들어가 줍니다.

[ 그림 40 : 프로젝트 설정 버튼 ]

상단의 클라우드 메시징 탭을 선택합니다.

[ 그림 41 : 클라우드 메시징 탭 선택 ]

iOS 앱 구성에서 APN 인증 키에 다운받은 키 파일을 업로드 해주시면 됩니다.

[ 그림 42 : 키 파일 업로드 ]

찾아보기를 눌러 키 파일을 업로드 해줍니다. 키 ID는 키 파일을 만들 때 표시되고 파일 명으로도 저장이 됩니다. 혹시나 파일명을 변경하셨다면 iOS 개발자 사이트를 다시 들어가서 생성해놓은 Key를 선택하면 확인 할 수 있습니다.

[ 그림 43 : APN 인증 키 업로드 화면 ]

키 파일까지 업로드가 완료되었다면 이제 마지막으로 XCode에서 델파이 프로젝트와 동일한 프로젝트를 만들어 줍니다.

동일한 번들 ID로 프로젝트를 만들어서 프로파일을 불러올 수 있도록 합니다. 프로젝트를 선택하고 Signing & Capabilities 탭을 선택하면 프로파일을 선택 할 수 있습니다.

[ 그림 44 : XCode 프로파일 확인 화면 ]

거기에서 등록한 개발 프로파일이 뜨지 않는다면 Automatically manage signing의 체크를 풀고, Import Profile… 버튼을 눌러 다운받아놓은 개발 프로파일을 추가해줍니다.

프로파일을 선택했을 때 오류 없다면 XCode에서 빌드를 1회 해줍니다. 특별히 소스를 수정한 것이 없기 때문에 빈화면으로 앱이 설치되어 실행되는 것을 볼 수 있습니다.

정상적으로 앱이 설치 된다면 프로파일이 잘 인식 되었다고 보면 됩니다.

이제 PAServer를 실행하고 델파이에서 실제 프로젝트를 빌드하면 됩니다. 빌드하기 전에 Project - Options 메뉴를 선택하고 좌측의 Deployment - Provisioning을 선택하여 개발 프로파일이 잘 불러와지는지 확인하시면 좋습니다.

[ 그림 45 : 델파이 프로파일 확인 화면 ]

Apple Development 인증서가 잘 불러지면 빌드하여 푸시 메시지를 테스트 하시면 됩니다.

테스트 과정에서 푸시 메시지가 잘 안되는 경우를 확인해보니 프로파일을 제대로 불러오지 못해 생긴 문제가 빈번했습니다.

그리고 델파이에서 iOS SDK를 13.7 버전까지만 지원하기 때문에 XCode를 다시 설치해서 SDK를 받아야하고 여러번 시행 착오가 있었던 것 같습니다.

다른 분들은 시행 착오 없이 잘 구현하셨으면 좋겠네요 ^^

조금이라도 도움이 되셨다면 좋아요 ♥ + 구독 부탁드립니다 : )