Firebase FCM web push 푸시 알람 받기

FCM(firebase cloud messaging)은 구글에서 제공하는 푸쉬 알림 서비스 입니다. FCM을 이용하여 자신이 만든 서비스에서

유저에게 실시간 알림 서비스를 가능하게 합니다.

이번 블로그에서는 고객의 웹 브라우저에 서버에서 FCM 알림을 보내는 방법을 정리 합니다.

서버 ( java ) + 고객 (javascript )

1. Firebase 프로젝트 생성 페이지로 이동

FCM을 이용하기 위해서 제일 처음 해야할일은 구글 FCM 공식홈페이지에서 프로젝트를 만드는것 입니다.

아래 Firebase 공식홈페이지에 접속하여 신규 프로젝트를 생성하시기 바랍니다.

google firebase 공식 홈페이지 (클릭)

2. 프로젝트 생성

firebase 프로젝트 생성을 위해 아래 프로젝트 추가 버튼을 클릭 합니다.

프로젝트 추가버튼을 누르면 프로젝트를 생성하는 안내 화면이 나옵니다.

사이트 사용량 및 이벤트를 비롯한 사이트 분석정보가 필요하면 구글 애널리틱스를 적용하면됩니다.

3. 서버 비공개키 생성

프로젝트 설정 - 서비스 계정 - 새 비공개 키 생성

버튼을 누르면 아래와 같은 json 파일이 다운로드 됩니다.

FCM 서버와 연동하기 위해서 필요한 비공개 키 파일 정보 이므로 잘 저장해 놓습니다.

push-test2-firebase-adminsdk-jw12w-df1cd26d00.json

{
  "type": "~~~_account",
  "project_id": "~~~push-test2",
  "private_key_id": "~~~61a5f0be6d5a5977bd8fcff84bba",
  "private_key": "-----BEGIN PRIVATE KEY-----\~~~~\n-----END PRIVATE KEY-----\n",
  "client_email": "firebasew@push-test2.iam.gserviceaccount.com",
  "client_id": "~~~~1872270656",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-jw12w%40eer-web-push-test2.iam.gserviceaccount.com"
}

FCM 서버에 최종적으로 알림요청을 보낼때 사용하는 키파일이라고 생각하면 된다.

4. 클라이언트 FCM 등록 토큰 획득

FCM 토큰에는 메세지를 수신할 기기의 식별자 정보가 담겨 있고, 푸시 서비스는 이 정보를 통해 메세지를 전송합니다.

FCM 토큰 정보를 획득하기 위해서는 FCM 콘솔 서버에 로그인하여 확인할 필요한 정보가 2가지가 있습니다.

클라이언트 토큰 정보를 획득 - example code javascript

messagingSenderId : firebase 콘솔의 발신자 아이디
publicVapiKey : 웹구성 -웹푸시 인증서 - 키쌍에 해당하는 키값

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-messaging.js"></script>

// [START get_messaging_object]
    var config = {
        messagingSenderId : "~~~97214"
    };
    var publicVapidKey = '~~~-qvyLEUjYoja7-iogcuXFCoMM6G_CLUcBHNTJywDEn9lf3BHzVm1fR__zP-6DqJwQlCz_zEn8x0';
    firebase.initializeApp(config);
// Retrieve Firebase Messaging object.
    var messaging = firebase.messaging();
// [END get_messaging_object]

// [START set_public_vapid_key]
// Add the public key generated from the console here.
    messaging.usePublicVapidKey(publicVapidKey);
    
    
    ... 중략 ...
    
    messaging.getToken().then(function(currentToken)
    {
        console.log('currentToken: ' + currentToken);
        if (currentToken)
        {
            // 토큰 
            console.log ('Token get - ' + currentToken);
        }
        else
        {
            // Show permission request.
            console.log('No Instance ID token available. Request permission to generate one.');
          ;
        }
    }).catch(function(err)
    {
        console.log('Error retrieving Instance ID token. ', err);
    })

토큰 갱신 예제 코드

    messaging.onTokenRefresh(function()
    {
        messaging.getToken().then(function(refreshedToken)
        {
            console.log('Token refreshed.');
            // Indicate that the new Instance ID token has not yet been sent to the
            // app server.
            // Send Instance ID token to app server.
            sendTokenToServer(refreshedToken);

        }).catch(function(err)
        {
            console.log('Unable to retrieve refreshed token ', err);
        });
    });

5. FCM push 발송

1) firebase console을 이동하여 프로젝트를 생성

2) 비공개키를 받았고,

3) token을 발급 받았으면 push를 발송할 준비는 다 갖추었다.

최종 push 발송 java 예제 코드

테스트 조건

크롬 페이지의 URL은 https ssl 이 적용이 되어야 한다.
- http://appletong.com ( X )
- https://appletong.com ( O )
token을 발급 받은 크롬 페이지를 최소화
WINDOW의 크롬 알림 설정이 켜져 있어야 한다.

아래 senPush를 실행 해보았다.

pom.xml - firebase 디펜던시 추가

		<dependency>
			<groupId>com.google.firebase</groupId>
			<artifactId>firebase-admin</artifactId>
			<version>7.3.0</version>
		</dependency>

JAVA example 코드

    public void sendPush(String token, Map<String, String> data)
    {
		List<FirebaseApp> apps = FirebaseApp.getApps();
        if (apps.isEmpty())
        {
            FirebaseOptions options = new FirebaseOptions.Builder()
                .setCredentials(getCredentials(accountKeyPath)) // 3번에서 발급받은 비공개 키
                .setDatabaseUrl(databaseUrl) // 없어도 간다.
                .build();
            FirebaseApp.initializeApp(options);
        }


        Map<String, String> data = new HashMap<String, String>();
        data.put("title", "appletong");
        data.put("message", "반갑습니다.");
        
        Message message = Message.builder()
            .setToken(token)
            .putAllData(data)
            .build();
        try
        {
            logger.debug(ReflectionToStringBuilder.toString(message, ToStringStyle.SIMPLE_STYLE));
            FirebaseMessaging.getInstance().send(message);
        }
        catch (FirebaseMessagingException e)
        {
            logger.error(ExceptionUtils.getStackTrace(e));
        }
    }
        
     
     
   private GoogleCredentials getCredentials(String accountKeyPath) throws IOException
    {
        String accountKeyFullPath =  accountKeyPath; // 3번에서 발급받은 비공개 키파일
        InputStream serviceAccountKey = new FileInputStream(accountKeyFullPath);
        return GoogleCredentials.fromStream(serviceAccountKey);
    }

테스트 결과 - fcm push 성공

저작자표시 비영리 변경금지

애플통 | APPLE TONG