모듈, 프레임웍/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..

개요 대부분의 웹 애플리케이션(웹 앱)은 어떠한 유형이라도 사용자 인증 기능이 공통적으로 사용됩니다. 많은 웹 앱은 외부 SNS 서비스 또는 이메일을 통한 로그인 기능을 제공합니다. 또한 사용자와의 커뮤니케이션 및 상호작용을 통해 콘텐츠를 생성하는 웹 앱은 이러한 사용자의 정보를 저장할 필요가 있습니다. 사용자 인증 서비스를 직접적으로 개발을 하는 것은 최소의 개발인력 또는 1인 개발자로 구성된 웹 어플리케이션의 개발에는 적합하지 않을 수 있습니다. 다행히도 파이어베이스는 모바일 및 웹 앱 모두에서 사용 가능한 사용자 인증 서비스를 제공하기 때문에 이를 직접 개발할 필요 없이 쉽게 Angular 프로젝트에 설정하여 적용할 수 있습니다. 이번 포스트에서는 파이어베이스의 사용자 인증 서비스를 사용하여 여러분..

개요 경우에 따라 다르겠지만 일반적으로 웹 또는 모바일 앱을 개발하고 운영하기 위해서는 애플리케이션의 배포, 데이터의 저장, 사용자의 인증 등의 서비스를 제공하기 위한 서버가 필요합니다. 파이어베이스는 웹과 모바일 앱 개발에 필요한 공통적이고 기본적인 기능을 제공하는 **BaaS(**Backend as a Service)입니다. 따라서 Angular 프로젝트에서도 이를 이용하여 개발을 한다면 클라이언트 측의 개발에만 집중하여 전체적인 애플리케이션의 완성을 앞당길 수 있습니다. 이를 위한 환경을 설정해보도록 하겠습니다. Firebase 설정 파이어베이스를 앞선 과정을 통해 생성한 Angular 프로젝트에 연결하도록 하겠습니다. 두 단계로 나누어 진행하도록 하겠습니다. 새로운 Firebase 프로젝트를 생성..