-
[Firebase, Ionic] 페이스북으로 로그인하기 2탄 (친절주의) (Login with Facebook)코딩은 주댕이로/IONIC+Firebase 2015. 8. 14. 22:50
소스 다운로드 > https://github.com/cpromise/realtimeChat
이 예제에 사용된 소스 : initAgain을 다운로드 받으시면 됩니다.
이 예제를 완성시킨 소스 : Login with Facebook을 다운로드 받으시면 됩니다.
이 예제는 Firebase에서 실시간 채팅 구현하기(클릭시이동)에 이어서 진행됩니다.
이제 앱단을 고쳐보도록 합시다!
Step 1. 두 번째 탭을 로그인을 처리하는 탭으로 사용합시다~!
이렇게 만들기 위해서 일단 tabs-account.html을 바꿔줍시다~!
<tabs-account.html>
간단하쥬~~?
3줄밖에 안썻어요!
저같은 경우는 이미지로 버튼을 대체했는데, 그냥 텍스트로 써주셔도됩니다!!
Step 2. 컨트롤러를 수정해줍시다!
로그인버튼을 클릭하면 실행할 메소드를 구현해줍시다.
<tabs-account.html과 연결된 컨트롤러>
YOUR-FIREBASE-APP에는 여러분이 생성한 Firebase계정을 적어주시면 되겠죠?
authData가 있을때만 채팅을 할 수 있게 if 문을 적어주겠습니다.
<tabs-chat.html과 연결된 컨트롤러>
이렇게 해준뒤에 로그인을 실행해보면!!
요렇게 페이스북 로그인창이 뜨네요
Step 3. 페이스북에서 가져온 데이터를 앱에 저장해봅니다.
저희가 저장한 authData에 로그인정보가 들어있을거라는거 예상되시죠?
거기엔 어떤 정보가 담겨있을까요?
https://www.firebase.com/docs/web/guide/login/facebook.html 여기서 확인해보실 수 있습니다.
https://developers.facebook.com/docs/graph-api/reference/user 더 많은 정보는 이곳에 적혀있답니다.
이 중에 이름과 프로필 사진만 가져와봅시다.
<tabs-chat.html과 연결된 컨트롤러>
빨간 밑줄을 그어놓은 부분만 수정해줬어요.
authData에는 facebook이란 객체가 있고 그 안에 여러가지 데이터가 담겨있었네요~!ㅎㅎ
이렇게 셋팅을 한뒤 채팅을 하면 어떤화면이 나올까요?
제 이름과 제 프로필사진이 적나라하게 드러나네요.
이렇게 페이스북으로 로그인하기를 끝내겠습니다~!
'코딩은 주댕이로 > IONIC+Firebase' 카테고리의 다른 글
[IONIC] LocalStroage로 로그인값 유지시키기 (6) 2015.08.16 [Firebase, Ionic] E-mail로 회원가입/로그인하기 (0) 2015.08.15 [Firebase, Ionic] 페이스북으로 로그인하기 1탄 (친절주의) (Login with Facebook) (2) 2015.08.13 [Firebase 3편] AngularJS로 실시간 채팅&공유 웹/앱을 만들고 싶다면? (5) 2015.08.09 [Firebase 2편] AngularJS로 실시간 채팅&공유 웹/앱을 만들고 싶다면? (17) 2015.06.15