개요
만약 파이어베이스 호스팅 서비스 외에 추가로 파이어베이스가 제공하는 인증, 실시간 데이터 베이스, 메시징(Firebase Cloud Messaging) 등의 Back-End 서비스를 사용하려면 appId를 비롯한 apiKey를 발급 받아야 합니다.
파이어베이스는 앱 등록 메뉴에서 해당 기능을 제공합니다.
웹앱 등록
- Firebase Console의 프로젝트 개요 페이지로 이동하여 앞서 생성한 프로젝트(FCM-PUSH-PWA)를 선택합니다.
- 웹 아이콘(
</>)을 클릭하여 설정 워크플로를 시작합니다.
- 앱의 닉네임을 입력합니다.
닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다. - "또한 이 앱의 Firebase 호스팅을 설정하세요." 항목을 체크합니다.
(프로젝트 내부적으로 달라지는 것은 없으며 제공되는 SDK 설치 코드(Firease SDK snippet)가 변경되어 표시됩니다.)
- 앱 등록을 클릭합니다.
Firebase SDK 추가 및 Firebase 초기화
이후, 파이어베이스 호스팅을 설정하면 자동으로 예시 코드가 생성됩니다. 자동 생성된 index.html 파일에는 Firebase SDK 및 초기화 코드가 포함되어 있으므로 이 파일을 수정하면 손쉽게 자바스크립트 프로젝트에서 파이어베이스 서비스를 사용할 수 있습니다. (사용하고자 하는 서비스의 주석부분을 해지합니다.)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.15.5/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.15.5/firebase-auth.js"></script>
<script defer src="/__/firebase/7.15.5/firebase-database.js"></script>
<script defer src="/__/firebase/7.15.5/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.15.5/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
... 중간 생략 ...
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥※ 버전값(7.15.5)는 현재(20.07.02) Firebase SDK의 최신 버전 값입니다.
결론
파이어베이스 앱 등록 메뉴는 결국 서비스 접근을 위한 키를 발급받는 과정입니다.
파이어베이스 서비스를 사용할 앱의 플랫폼(ios, android, web, unity)에 따라 기술한 과정이 조금씩 달라지겠지만 파이어베이스에서 제공하는 상세한 안내 덕분에 발급된 키를 손쉽게 개발하고자 하는 앱에 적용할 수 있습니다. 특히나 파이어베이스 호스팅을 사용하는 웹앱의 경우는 키를 발급받은 후, 파이어베이스 호스팅을 설정하면 즉시 파이어베이스에서 제공하는 Back-End 서비스를 사용할 수 있는 프로젝트 구성됩니다.
참고
'모듈, 프레임웍 > Firebase' 카테고리의 다른 글
| Firebase Cloud Messaging - 클라이언트(JavaScript) 설정 (0) | 2020.07.28 |
|---|---|
| Firebase 호스팅 사용하기 - Custom Domain 연결 (0) | 2020.07.21 |
| Firebase 호스팅 사용하기 (0) | 2020.07.02 |
| Firebase 사용자 정보 저장 (0) | 2018.12.21 |
| Angular Firebase - 사용자 인증 (이메일) (0) | 2018.11.09 |
