firebase hosting - 사용자 인증

구글 클라우드를 기반으로 제공하는 서비스.

 

firebase라는 이름으로 보면 데이터베이스쪽으로 강한 느낌인데, 원래 firebase.com이라는 도메인으로 데이터베이스 서비스를 제공했었다.

 

구글 클라우드에 가입되어 있다면 바로 사용할 수있다.

구글 클라우드에도 앱엔진이라는 것이 있어 호스팅이 가능한데 부가적인 편의성의 제공한다. 앱엔진 처럼 서버에서 기능을 수행하는 것은 불가하고, 정적인 페이지 들만 서비스 가능하다. 생성되어 나오는 도메인도 구글 클라우드보다는 보기 좋다. 지저분한 숫자, 대쉬 조합 없이.

 

부가적인 기능중에 일단 눈에 띄는 편의성인 사용자 인증을 만들어 본다. 앱엔진으로도 가능은 하겠지만 좀 더 많은 노가다(?)가 필요.

쉽게 로그인 기능이라고 보면 되는데, 매번 사용자 디비 만들고, 부가적인 서버쪽 코딩도 많이 필요한 작업이었다.(물론 복붙이 있긴하지만...)

 

프로젝트는 구글 클라우드와 연동되어있다. 일단 프로젝트를 하나 생성한다. 기존 구글 프로젝트를 가져와도 된다.

 

프로젝트 메뉴에 hosting을 클릭하면 시작하기 버튼이 있는 페이지가 보이고 이를 클릭하면, npm으로 firebase-tools를 설치하는 명령줄을 알려준다.

 

npm install -g firebase-tools

 

 

 

 

 

계속을 클릭하면 firebase 로그인과 프로젝트 시작 명령을 보여준다.

 

 

로컬 작업공간에서 위 명령들을 차례대로 실행한다.

 

deploy는 해봐야...아직 ㅋㅋ

 

일단 deploy를 하기위해서 로그인이 적용된 index.html을 만들자.

 

로그인 페이지도 다 만들어진 걸 주나보다. 주니까 일단 냉큼 가져다 붙인다. (참고 : https://github.com/firebase/FirebaseUI-Web)

 

위 페이지의 예제 코드에 사용할 키와 도메인은 아래 그림처럼 해당 프로젝트 메인 페이지의 웹앱에 Firebase추가 라는 오른쪽 상단 이미지를 클릭하면 알 수있다.

 

 

 

예제 코드에 여러 방법에 대한 것 중 일단 이메일 / 패스워드만 가능하게 하고 동작을 확인하자.

 

관리자 콘솔에서 이메일/패스워드 인증 사용 on.

 

 

 

일단 간단한 준비는 끝났고, 만든 페이지를 호출해 보면!

 

 

위와 같은 버튼이 하나 보인다. 이걸 클릭하면 크롬에서 구글에 로그인 된 상태라 아래와 같은 화면이 나오고, 클릭하면 이메일/ 이름 칸이 채워진 가입 양식 화면이 출력된다.

 

 

 

 

 

대충 패스워드를 넣고 클릭. 관리자 콘솔에서 가입확인!

 

 

다시 만든 페이지를 호출 해보면 이번에는 가입이 아닌 로그인 화면이 보인다.

 

 

 

여기까지 코딩한 거라곤, 페이지 하나 복붙....

 

물론 가입 양식이나, 가입 후 리다이렉션 되는 페이지등 작업들이 남았지만, 처음부터 만드는 것보다 많이 편한 듯하다.