[Firebase, Ionic] E-mail로 회원가입/로그인하기

소스 다운로드 > https://github.com/cpromise/realtimeChat

E-mail주소로 간단한 가입하기.

먼저 화면을 좀 바꿔봅시다.

Facebook으로 로그인하기 예제에 이어서 작업할 것이므로 제가 표시한 코드만 참고하시면 됩니다!!

Step 1. E-mail, 비밀번호 입력창, 버튼을 만들어 줍시다.

코드에는 어떻게 넣어줬나 보십시다!

<tabs-account.html 수정>

input태그 2개, 버튼태그 2개를 만들어주었고 Login(), Register()메소드를 사용하겠다고 선언했군요.

그럼 화면은 끝났고 컨트롤러로 가봅시다!!

Step 2. Controller를 수정해 봅시다.

<tabs-account.html과 연결된 컨트롤러 수정>

login(), register()를 구현해주었습니다.

* 로그인타입이 여러종류(페이스북, 이메일)이므로 로그인타입을 명시해줬습니다.

<tabs-chat.html과 연결된 컨트롤러>

loginType에 따라 채팅기능을 다르게 구현했습니다. (사실 거의 같음)

좋은코드를 위해서 sendChat()에 parameter를 추가하여 코드양을 10줄이상 줄이는게 바람직하겠네요.

채팅 보내기 버튼을 누르면 E-mail아이디가 채팅창에 노출되게 됩니다.

authData에 있는 데이터 목록 > https://www.firebase.com/docs/web/guide/login/password.html

Step 3. 테스트해봅시다!

회원가입을 해주시고!!

채팅을 해주니 제 이메일 아이디가 보이네요.

MoreStep은 클릭해주시면 내용이 나옵니다.

More Step 1. 회원목록이 보고싶어요.

Firebase 대시보드에서 스샷따라 이동하시면 보입니다^^

More Step 2. 비밀번호를 까먹었어요.

<급 버튼추가 ㅎㅎㅎ>

<tabs-account.html>

버튼하나 추가해주고 resetPassword 메소드를 연결해주었습니다.

이 메소드만 구현해주면 되겠군요 ㅎㅎ

<tabs-account.html과 연결된 controller>

비밀번호를 잃어버렸을 때는 이메일만 파라미터로 넘겨주면 됩니다.

이렇게 구현을 해 준뒤에, 테스트를 해보죠!!

이렇게 이메일을 입력한 뒤 Forgot Password버튼을 눌러줬더니,

메일이 도착했습니다. ㅎㅎ 제 임시 비밀번호는 ZRxzLx~~~~ 이네요.

More Step 3. 회원 탈퇴할래요.

<탈퇴버튼을 추가해주었습니다.>

<tabs-account.html>

Deactivate란 메소드를 연결시켜주었구요.

탈퇴는 비밀번호 찾기와 달리 이메일과 비밀번호를 같이 파라미터로 전달해줍니다.

딱 1줄 추가했네요. 그쵸?

<tabs-account.html과 연결된 컨트롤러>

테스트해봅시다!!

아이디와 비밀번호를 입력하신뒤!! 버튼을 눌러보면

비밀번호가 틀리면 틀렸다고하고,

비밀번호가 일치하면 삭제가 정상적으로 이루어지네요.^^

물론 대시보드에 있는 회원목록에서도 사라집니다.

이메일로 로그인하기편 끝!!

치명적인 결함이 있죠?

한번 로그인하면 절대로 세션이 저장이 안된다는겁니다.

로그인을 유지시킬 방법에 대해서는 다음화에 이어집니다. ^^ (Firebase는 사용하지 않아요.)

혹시 무한도전보다 고무망치의 다음화가 기다려지시진 않나요? ^^