웹 개발 - 프로젝트 2 - 14. firebase 알림 전송

firebase를 이용해서 사용자에게 리마인드 알림을 보내려 합니다. 앱이 닫혀 있어도 메세지를 보내야 하므로 firebase를 사용해 보도록 하겠습니다.

firebase가 최근에 바뀐 것으로 보입니다. GPT한테 물어보면서 만들면 오류가 발생합니다. 공식 문서를 확인하는 것을 추천드립니다.

firebase 설정

firebase에서 웹 프로젝트를 하나 만듭니다.

 

프로젝트 개요 오른쪽 톱니바퀴를 누르고 서비스 계정으로 갑니다.

 

화면 아래 새 비공개 키를 누릅니다. 그러면 json 파일 하나가 다운받아 집니다.

 

그리고 클라우드 메시징으로 이동해서 웹 푸시 인증서를 받습니다. 이 정보는 프론트에서 사용됩니다.

프론트

react에 firebase를 인스톨해 줍니다.

npm install firebase

 

그리고 firebase를 초기화 해 줍니다. 프로젝트 개요 오른쪽 톱니바퀴를 누르고 일반으로 갑니다.

 

아래로 쭉 내리면 npm에서 어떻게 설정하는지 보여줍니다. 여기서 중요한 것은 firebaseConfig 변수입니다.

 

해당 공식 문서(https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ko#web_1)에서 메세지 수신하는 것에 대해 자세히 알려주고 있습니다.

 

저는 로그인 한 사람에게 메시지를 보낼 것입니다. App.jsx에서 initializeApp까지 진행합니다.

 

로그인 한 경우 getMessaging을 진행합니다. getToken으로 토큰을 받아옵니다. 이 정보는 기기마다 할당된다고 생각하면 됩니다. vapidKey에는 클라우드 메시징에서 받은 공개키를 넣으면 됩니다. 그렇게 받은 토큰을 db에 저장해 둡니다. 해당 토큰을 이용해서 메세징을 보내면 그 기기로 알림이 갑니다.

백엔드

토큰 정보를 저장하는 db를 만들고 저장합니다. 로그인 할 때 마다 같은 정보가 오므로 중복되는 경우 패스합니다.

 

이제 메세지를 보내봅시다. 자세한 정보는 공식 문서(https://firebase.google.com/docs/cloud-messaging/migrate-v1?hl=ko&_gl=1*vloa19*_up*MQ..*_ga*NTU2NDE4ODM4LjE3MzI5Mjk5MzA.*_ga_CW55HF8NVT*MTczMjkyOTkyOS4xLjAuMTczMjkyOTkyOS4wLjAuMA..)에 있습니다.

 

알림을 보내기 위해서는 아래 url로 메시지 전송 요청을 보내면 됩니다. 이때, myproject-b5ae1 위치에는 자신의 프로젝트 정보를 넣으면 됩니다.

 

그 정보는 프로젝트 설정 - 일반 - 프로젝트 ID에 있습니다.

 

그리고 해당 데이터를 넣으면 됩니다. token에는 db에 저장한 유저 토큰을 넣으면 됩니다.

 

처음에 만든 json파일을 프로젝트 resources 폴더에 넣습니다.

 

이제 알림을 보내겠습니다. 우선 인증 관련 부분을 진행하겠습니다. firebaseConfigPath는 json 파일 경로(src/main/resources/service-account-file.json)입니다. 이 방식은 공식 문서의 "사용자 인증 정보를 사용하여 액세스 토큰 발급"에 있습니다.

 

여기서 GoogleCresentials를 쓰기 위해서는 build.gradle에 다음 의존성을 추가해 줍니다.

 

데이터 부분을 아래와 같이 만듭니다. targetToken은 유저한테서 받은 토큰입니다.

 

인증 토큰을 받은 다음 토큰을 받아 헤더에 넣어줍니다.

 

이제 요청을 보내면 알림이 옵니다.