섹션 6. 다이어트 메모 앱 만들기(2)-파이어베이스로 이메일 로그인 기능 구현하기
지난 글에서 파이어베이스를 이용해 익명 로그인 하는 것을 구현해봤다.
이번에는 이메일 로그인을 구현해보자.
구글에 android firebase email auth 라고 검색하면 가이드라인이 상세하게 나온다.
하란대로 해주면 된다.
새로운 프로젝트를 만들어주자.
이름은 fb_firebase_email_password_auth
파이어베이스 들어가서 새로운 프로젝트 만들어서 이전 글과 똑같이 파이어베이스 프로젝트도 새로 만들어주고... 이름도 짓고... 해주자.
안드로이드 아이콘 눌러서 'Android 앱에 Firebase 추가'를 차례로 해주자. 그래들 파일에 넣으란 거 다 넣어주기.(지난 글 참고)
절차 끝난 후 '콘솔로 이동' 클릭.
콘솔에서 좌측 더보기 열고 빌드-Authentication 클릭(인증 기능 사용하겠단 뜻), 시작하기 클릭
로그인방법-이메일/비밀번호 클릭-사용설정(상단) 켜주고 '저장'누르면 다음과 같이 뜸
이제 버튼 누르면 이메일/비밀번호 인증이 되도록 해보자.
일단 레이아웃부터!
메인액티비티 레이아웃 파일 안만들어져있으면 res폴더-New-XML-Layout XML File 클릭. 이름은 activity_main(임의설정)
LinearLayout으로 EditText 뷰랑 버튼을 두개씩 만들기
이제 이 버튼들을 메인액티비티로 가져오기
회원가입 버튼을 먼저 findViewById로 가져와서 뷰 객체를 생성하고
setOnClickListener로 클릭이벤트 생성.
버튼 클릭하면 emailArea 와 passwordArea 라고 이름붙인 텍스트뷰에 입력된 값들을 각각 변수로 저장하고,
이 값들을 로그로 찍어서 확인해보자.
<오류노트(?)
왜 EditText뷰에 영어가 안 입력되는지, 다른데서 입력하고 복붙하고 하다가,
애뮬레이터 디바이스의 키보드에서 한글->영어로 바꿔주니까 해결됐다! />
아무렇게나 입력해주고 '회원가입'버튼 누르면 그대로 email과 password 값이 로그로 잘 찍히는 것을 확인할 수 있다.
잘 나오는 거 확인했으니까 이제 실제 회원가입 기능을 만들어보자
가이드를 보면
모듈(앱 수준) Gradle 파일에 추가해야 하는 것들 중, 첫번째 것은 프로젝트 만들때 추가했고, 두번째 것이 인증기능을 이용하기 위한 선언이므로 추가하고 Sync Now를 눌러준다.
그새 업데이트가 되어서 강의와 현재 파이어베이스의 가이드라인 내용이 다르다
강의에서는 비밀번호 기반 계정 만들기라는 항목이 있는데 지금은 사라졌다. 보안이 강화된 듯 하다.
강의를 보고 따라해주겠다.
private lateinit var auth: Firebaseauth이 줄을 메인액티비티의 MainActivity 클래스 안에 넣어주고 (OnCreate()와 같은 수준)
auth = Firebase.auth이 줄은 OnCreate() 안에 넣어준다.
강의에 따르면 다음과 같은 코드를 복붙해준다.
회원가입버튼의 setOnClickListener 함수 안에 위의 코드를 복붙해주고
필요없는 코드를 위와 같이 지운다음 성공, 실패 여부에 따라 토스트메시지를 띄워주자.
애뮬레이터를 실행하고 로그인해보면
<오류노트
: 로그는 잘 뜨는데 회원가입은 실패했다고 한다~ 토스트메시지에 "실패"라고 뜬다.
파이어베이스 User 관리 탭에 들어가도 아직 사용자가 없다고 한다...
로그를 확인해보니 다음과 같은 에러가 뜬다
Initial task failed for action RecaptchaAction(action=signUpPassword)with exception - An internal error has occurred. [ API key not valid. Please pass a valid API key. ]참고블로그: https://remnant24c.tistory.com/78
해결책
:기존의 google-services.json 파일을 삭제하고 새로 다운받아서 적용해주면 된다.
새로운 파일을 적용하려면 Build-Clean Project 를 눌러주자
이때, 콘솔 가서 새로운 앱 만들기-안드로이드 아이콘 클릭 하고 절차 따라가면 중간에 json 뭐시기 파일을 다운받을 수 있다.
파일을 새로 다운받으면 google-services.json-(2) 이런식으로 뜨는데 이름이 정확하게 'google-services.json'으로 되어있어야 프로그램이 인식할 수 있다.
오류 해결~
/>
토스트메시지도 성공으로 잘 뜨고 관리자페이지 가서도 유저와 UID가 잘 생성된 것을 볼 수 있다.
이제 로그아웃 버튼을 만들어보자.
로그아웃은 간단하다.
그 전에 참고로 입력하기 전 칸에 힌트를 넣는 법을 알아보자.
hint 속성을 추가하고 넣고 싶은 문자열을 넣어주면 왼쪽 사진과 같이 추가된다.
다시 로그아웃으로 돌아와서, 오른쪽사진과 같이 버튼을 추가해주자.
이제 메인액티비티로 가서
회원가입버튼의 setOnClickListener 함수를 빠져나온 다음부터 시작한다.(괄호를 클릭하면 어디에 속한 괄호인지 표시된다.)
findViewById로 버튼 뷰 객체를 생성한다음.
setOnClickListener 함수로 이벤트를 처리할 예정.
그 안에 Firebase.auth.signOut() 로 파이어베이스에 기본으로 있는 로그아웃 함수를 호출함.
이때 버튼이 클릭된 것을 확인하기 위해 토스트메시지도 설정해줌.
실행해보면
로그아웃 완료 토스트 메시지가 잘 뜨는 것을 확인할 수 있따~
이제 로그인 기능을 만들자.
이 부분도 강의 촬영 시점과 현재의 가이드 라인이 다르므로 강의를 따라가도록 하겠다.
로그인도 가이드라인을 복붙해주고 필요한 부분만 남기고 나머지는 지웠다.
요청한 기능이 잘 실행되었는지 확인하기 위해 이번에도 토스트메시지를 성공, 실패 각각의 경우에 넣어주었다.
실행해보면
성공한 것을 알 수 있다.
다음에는 비밀번호칸에 입력한 문자를 별표(*)로 표시하는 법도 알아보자.
비밀번호 텍스트뷰에
android:inputType="TextPassword"속성을 추가해주면 된다.
실행해보면
다음과 같이 잘 뜨는 것을 확인할 수 있다.
이제 연습한 것을 토대로 실제 앱을 만들어보자.