파이어베이스

사전작업 Firebase 호스팅 사용 파이어베이스(Firebase) 앱 등록 ※ 이하 웹앱(PWA)은 사전작업을 통해 생성한 프로젝트를 지칭합니다. Firebase SDK 설정 메시징 서비스를 사용하기 위하여 Firebase SDK를 웹앱(PWA)에 추가합니다. 여러 가지 방법이 있지만 Firebase 호스팅 사용 포스팅에서 생성한 프로젝트를 바탕으로 한다면, 태그 사이에 아래 내용(인증, 데이터베이스, 메시징, 스토리지 서비스 사용을 위한 SDK 설정)이 이미 삽입되어 있습니다. ▲ index.html ※ 버전(7.16.0)을 의미하는 숫자는 프로젝트 생성 시의 최신 버전 값으로 진행 시점에 따라 차이가 있습니다. firebase-messaging-sw.js 생성 기본적으로 메시징 서비스가 동작하려면 ..

개요 만약 파이어베이스 호스팅 서비스 외에 추가로 파이어베이스가 제공하는 인증, 실시간 데이터 베이스, 메시징(Firebase Cloud Messaging) 등의 Back-End 서비스를 사용하려면 appId를 비롯한 apiKey를 발급 받아야 합니다. 파이어베이스는 앱 등록 메뉴에서 해당 기능을 제공합니다. 웹앱 등록 Firebase Console의 프로젝트 개요 페이지로 이동하여 앞서 생성한 프로젝트(FCM-PUSH-PWA)를 선택합니다. 웹 아이콘()을 클릭하여 설정 워크플로를 시작합니다. 앱의 닉네임을 입력합니다. 닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다. "또한 이 앱의 Firebase 호스팅을 설정하세요." 항목을 체크합니다. (프로젝..

사전 준비 node.js를 설치합니다. (참고) Firebase 프로젝트 생성 Firebase 호스팅을 사용하려면 먼저 Firebase 프로젝트를 만들어야 합니다. 다음과 같이 프로젝트를 생성합니다. Firebase에 가입합니다. (무료 서비스(Spark 요금제)로 본 포스팅의 내용을 수행할 수 있습니다.) Firebase Console에서 프로젝트 추가를 클릭한 후 프로젝트 이름을 선택하거나 입력합니다. Firebase Console에서 나머지 설정 단계를 따른 다음 프로젝트 만들기(또는 기존 Google 프로젝트를 사용 중인 경우 Firebase 추가)를 클릭합니다. Firebase CLI 설치 Firebase는 Firebase 호스팅을 비롯한 Firebase 제품을 쉽게 구성 및 관리할 수 있도록 ..

개요 앞서 진행하였던 Firebase 의 이메일과 소셜네트워크 계정을 이용한 사용자 인증을 통해 획득되는 기본적인 정보는 사용자의 식별자와 uid 정보입니다. 하지만 이외에도 로그인 과정을 통해 획득할 수 있는 사용자의 정보는 다양합니다. 필요에 따라 이러한 사용자의 추가 정보를 수집하여 데이터베이스에 저장하면 어플에 등록된 사용자에 대한 반복작업을 수행하는데 도움이 될 것입니다.이번 포스트에서는 인증(로그인) 과정을 통해 획득한 사용자의 상세한 정보를 Firebase 파이어 베이스의 데이터베이스 중 하나인 Cloud Firestore 에 저장해 보도록 하겠습니다.기존에 구현하였던 로그인 기능을 바탕으로 수정합니다. 사용자의 정보를 데이터베이스에 저장하기 사용자의 정보를 데이터베이스에 저장하기 위해, A..

개요 이번에는 이메일을 이용하여 회원가입 및 로그인 기능을 구현하도록 하겠습니다. 이메일을 통한 회원가입 및 로그인 기능은 SNS를 통한 인증과 크게 다르지 않으므로 간단히 진행할 수 있습니다. 파이어베이스에서 이메일/암호 인증 활성화 이메일/암호 인증을 사용할 수 있도록 파이어베이스의 이메일/암호인증 기능을 활성화합니다. Auth Service 추가 앞선 과정에서 사용하였던 auth 서비스를 기반으로 내용을 작성하도록 하겠습니다. ▼ /src/app/auth.service.ts ... 생략 ... @Injectable() export class AuthService { authState: FirebaseAuthState = null; constructor(public afAuth: AngularFire..

개요 앞선 포스트에서는 Angular Material, Flex Layout의 사용법을 습득하여 로그인 기능 구현을 위한 화면을 구성하였습니다. 이번 포스트에서는 본격적으로 Firebase에서 제공해주는 사용자 인증 API를 사용하여 회원가입 및 로그인 서비스를 구현하도록 하겠습니다. 본문 사전 준비 Firebase 연결하기 포스트의 내용을 참고하여 앞서 생성한 로그인 프로젝트를 Firebase 프로젝트와 연결합니다. 추가로 파이어베이스의 사용자 인증 기능을 사용할 예정이므로 라이브러리의 인증모듈(AngularFireAuthModule)도 import 합니다. ▼ /src/app/app.module.ts import { NgModule } from '@angular/core'; // ... 생략 // A..