Firebase, FirebaseUI로 로그인 기능 추가하기 1. 개요

 

 html, css로 만들어낸 뷰 페이지에 google 아이디로 로그인하는 기능을 추가하려고 한다.

대표님께서 Firebase UI란 라이브러리를 사용해보라는 말씀을 해주셔서

적용하기 위해 공부한 내용을 사부작 작성해본다.

먼저, Firebase UI가 제공하는 기능을 살펴보자면, 아래와 같다.

• 여러 제공업체: 이메일/비밀번호, 이메일 링크, 휴대전화 인증, Google, Facebook, Twitter, GitHub 로그인에 사용되는 로그인 흐름을 제공
  
  
• 계정 연결: 여러 ID 공급업체에서 사용자 계정을 안전하게 연결하는 흐름을 제공
  
  
• 맞춤설정 - 앱의 요구사항에 맞게 FirebaseUI의 CSS 스타일을 재정의, 또한 FirebaseUI는 오픈소스이므로 프로젝트를 가져와 내 요구사항에 정확하게 맞춰 맞춤설정 가능
  
  
• 간편 가입 및 자동 로그인 - 신속한 교차 기기 로그인을 위해 간편 가입과 자동 통합
  
  
• 현지화된 UI - 40개 이상 언어로 국제화
  
  
• 익명 사용자 업그레이드 - 로그인/가입을 통해 익명 사용자를 권한을 가진 사용자로 업그레이드 가능
  
  
  

그리고 적용과정을 요약하면,

1.  firebase 홈페이지에서 프로젝트(콘솔)를 하나 생성한다. (웹, 어플 중 선택 가능)
   
   
2. 권한 카테고리 -> 로그인 방법 -> 사용하고자 하는 로그인 API(ex. 구글, 페이스북)를 개방해준다.
   
   
3. 본인이 만든 html내에 태그로 imprt 해주는 방식과 vue.js 등을 이용하는 방식 중 하나를 고른다.
   
   
4.  해당 방식대로 따라해준다ㅏㅏ
   
   

** 사실 뷰를 만들던 중에 우리 프로젝트 명세서가 필요해져 혼자서 개발문서를 작성하게 되었는데,
그 결과, vue.js로 만드는 것이 더 적합하다고 판단해 vue.js 공부를 병행하며 firebase 적용을 시도했다.

때문에 다음장에는 vue.js를 사용하기위한 환경설정을 해볼 것이다ㅏㅏ