📘백엔드 구현시 테스트용 FCM 토큰 생성하는 방법
웹 환경에서 FCM 토큰 생성하기
FCM을 사용하려면 클라이언트에서 토큰을 발급받아 백엔드로 전달해야 한다.
프론트엔드가 없거나 백엔드 중심의 프로젝트에서도 테스트를 위해서는 토큰 발급이 필요하다.
Firebase 콘솔에 웹 앱 추가
프로젝트 Console 에서 중앙 상단에 +앱 추가를 눌러서 이름을 등록해준다.
firebaseConfig 발급
이름을 생성하고 나면 SDK가 뜨는데 script 사용을 눌러준다.
그러면 이런 스크립트가 나오는데 이걸 복사해서 따로 저장해놓는다.
<!-- 스크립트 형식 예시 -->
<script type="module">
// Firebase SDK import
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.0.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.0.0/firebase-analytics.js";
// Firebase 설정 (자신의 프로젝트에 맞게 변경)
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
// Firebase 초기화
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
vapidKey 적용
다시 Firebase Console 로 이동한다.
프로젝트 설정 > 클라우드 메시징 > 맨 아래의 Generate Key pair 를 클릭한다.
그러면 vapidKey 가 생성되는데, 이걸 따로 복사해 놓는다.
HTML로 토큰 생성 페이지 생성
이제 토큰 생성을 위한 html 페이지를 만들어야 한다.
firebaseConfig 안에는 위에서 발급받은 내용을 넣어준다.
vapidKey 안에도 위에서 받은 키를 넣어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FCM Web 테스트</title>
</head>
<body>
<h2>FCM 수신 테스트</h2>
<p id="token">[토큰 대기 중...]</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/12.0.0/firebase-app-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/12.0.0/firebase-messaging-compat.js"></script>
<script>
// Firebase 설정
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
const vapidKey = "YOUR_VAPIDKEY";
// Firebase 초기화
firebase.initializeApp(firebaseConfig);
// Messaging 인스턴스 생성
const messaging = firebase.messaging();
// Service Worker 등록 → 토큰 요청 흐름
navigator.serviceWorker.register('/firebase/firebase-messaging-sw.js')
.then((registration) => {
console.log("Service Worker 등록 완료:", registration);
return Notification.requestPermission()
.then((permission) => {
if (permission === 'granted') {
return messaging.getToken({
vapidKey,
serviceWorkerRegistration: registration // 이 방법이 새 방식
});
} else {
throw new Error("알림 권한이 거부되었습니다.");
}
});
})
.then((token) => {
console.log("FCM 토큰:", token);
document.getElementById("token").innerText = token;
})
.catch((err) => {
console.error("FCM 토큰 에러:", err);
});
// 메시지 수신 처리
messaging.onMessage((payload) => {
alert(`🔔 ${payload.notification.title}: ${payload.notification.body}`);
});
</script>
</body>
</html>
서비스 워커 (JS) 생성
그리고 브라우저가 꺼져 있거나, 탭이 닫혀 있어도 받을 수 있도록 하기 위해서는,서비스 워커(Service Worker)가 필요하다. JS 파일도 하나 만들어준다.
// firebase-messaging-sw.js
importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/12.0.0/firebase-app-compat.js');
importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/12.0.0/firebase-messaging-compat.js');
firebase.initializeApp({
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
});
firebase.messaging();firebase.initializeApp 안에도 역시 위에서 발급받은 내용을 똑같이 넣어준다.
그리고 이 파일들을 SpringBoot 프로젝트의 resources > static > firebase 폴더 안에 넣어준다.
유출 방지를 위해 gitignore 처리 해준다.
테스트
이제 프로젝트를 실행하고 웹에서 해당 주소로 접속한다. (port 번호는 환경마다 다를 수 있다.)
http://localhost:8080/firebase/fcm-test.html
이런식의 토큰이 생성되면 성공이다. 이제 이 토큰을 가지고 백엔드 개발에 사용할 수 있다.
