[firebase] angularfire로 로그인 하기
email와 facebook
사실..., 전 웹 개발과는 거리가 멀어도 아~~~~~~~~~~~~~~~~~~~~주 먼 사람입니다.
마지막으로 웹개발을 해본 것이 2007년 휴학 중에 SI 아르바이트를 한 것이니까 상당한 시간이 흘렀지요. 아니나 다를까 이름만 웹이지 너무 이상합니다. 하지만 필요는 공부의 원동력이라고 작년에 공부해볼까(?)하고 구입했다 책 꽂이에 봉인한 AngularJS 책을 소환했습니다.
그 때는 재미없고 이해도 잘 안되는 것 같았는데 다시 보니 이제 뭔지 조금 알것 같은 느낌이 드네요. ionic으로 하이브리드 앱을 하나 만들어볼까 하는 유혹에 빠져 봅니다. ^^
로그인 방법
email & password
facebook 로그인
사용할 라이브러리
angular 1.5.8
angularfire 2.1.0
bootstrap-social 5.0.0
firebase 3.5.0
진행순서
1. firebase 프로젝트 생성
2. facebook app 생성
3. firebase와 facebook app 설정
4. 구현 예제
step 1. firebase 프로젝트 생성
firebase 일명 불판은 authentication과 realtime database 서비스를 제공했었는데 지난번 구글 I/O 이후로 notification, analytics, admob, test lab 등등이 추가되면 앱 개발용 종합 선물셋트로 거듭났습니다.
물론... 새 버전이 나올 때마다 백만을 세고 적용하시는게 정신건강에 이로울 것 같습니다.
1. 콘솔 화면에서 "CREATE NEW PROJECT"를 선택해 프로젝트를 생성합니다.
2. 프로젝트 화면에서 "Add Firebase to your web app"을 클릭하시면 웹서비스에서 firebase를 사용하기 위해 필요한 초기화 정보가 나옵니다.
step 2. facebook app 생성
facebook 개발자 사이트에 가입하고 "새앱 추가" 메뉴로 로그인에 사용할 앱을 생성합니다.
대시보드에 있는 앱ID와 앱시크릿 코드를 확인했다면 firebase와 facebook 설정 단계로 넘어갑니다.
step3. firebase와 facebook 설정
이번 단계에서는 firebase의 authetication 기능에 facebook을 연동하기 위한 설정을 합니다.
facebook 로그인 기능과 비교를 하기 위해 email / password 로그인 기능을 활성화 하고 facebook을 선택하여 아래와 같의 설정합니다.
빨간펜으로 체크한 곳에 있는 URL을 복사하여 아래와 같이 facebook app에 추가합니다.
그리고 "설정" 항목에서 localhost 테스트를 위한 정보를 추가합니다.
step4. 구현 예제
로그인 상태에 따라 로그인 UI 또는 로그인 정보를 출력하는 간단한 예제를 작성했다.
index.html : 로그인 UI
js/application.js : firebase 객체를 초기화 하고 AngularJS 모듈을 생성 한다.
js/controller.js : 로그인에 관련된 기능을 구현한다.
너무 간단한 예제라 코드에 대한 상세한 설명은 생략했습니다라고 말하고 싶지만 설명을 할만큼 완벽하게 이해하지는 못했습니다. 조금더 공부해서 추가로 설명을 달아보도록 하겠습니다.
