Firebase『Auth 로그인, 비밀번호 찾기』

회원가입과 이메일 인증을 진행했던 Firebase 정리 3편에 이어 4편에서는 로그인 기능과 비밀번호 찾기(재설정) 기능에 대해서 알아보자.

 

 

 

---

1 사용자 프로필 가져오기 | currentUser

currentUser는 현재 로그인 상태의 '사용자프로필'이 담겨있는 변수다.  

 

let user = firebase.auth().currentUser;
let name, email, photoUrl, uid, emailVerified;

if (user != null) { 

  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  emailVerified = user.emailVerified;
  uid = user.uid;    
  // The user's ID, unique to the Firebase project. Do NOT use
// this value to authenticate with your backend server, if
// you have one. Use User.getToken() instead. 
}

 

 

회원제로 운영되는 사이트라면, 로그인 상태에 따라서 초기 화면이 달라져야한다. 로그인 상태에 따라서 다른 데이터를 전송하기 위해서는 아래와 같은 조건문이 필요하다.

 

 

let user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

 

 

 

 

 

 

---

2  로그인 | signInWithEmailAndPassword

페이스북, 인스타그램, 유투브같은 회원제 사이트를 생각해보자. 초기 접속에서 currentUser가 없다면 로그인 버튼이 사용자에게 공개된다. 반면 user값이 존재한다면 인증을 받은 유저(emailVerified: true)인 경우만 접속이 가능하다. 

 

 

 

 

사이트의 초기 접속에서는 currentUser값의 유무에 따라 통과 유무가 이뤄지고, 로그인 이벤트가 발생한 이후부터는 user.emailVerified:boolean(true | false)값에 따라 '메인 화면' or '이메일 인증화면'으로 넘어간다.

 

회원가입 인증메일을 확인하지 않은 유저의 정보는 auth의 DB값에 저장되지만 정작 로그인을 할 수는 없다. 이를 위해 유저가 정보를 삭제(인증을 안함)할 수 있는 경로가 필요하고, 또 비밀번호를 찾는 경로 역시 로그인 기능에서 중요하다.

 

 

 

 

 

 

---

3  비밀번호 재설정 | sendPasswordResetEmail

비밀번호를 재설정하기 위해 먼저 아래와 같은 폼을 만든다. 국내의 웹사이트들은 폰번호나 이메일을 통해 아이디를 검색할 수 있는 기능을 제공하는데 반해, 이메일을 아이디로 사용하는 해외의 사이트들은 아이디를 따로 검색할 수 있는 기능을 제공하지 않는다. 만일 서버에 없는 이메일이 입력되면 auth에서 에러 메시지가 전송되는 식이다.  

 

 

 

위의 '찾기'기능을 실행하면 auth.sendPasswordResetEmail()메서드가 실행된다. 그리고 sendPasswordResetEmail()의 파라미터 값에는 사용자가 입력한 email이 들어간다. 

 

 

 

 

또, 메일함에 있는 비밀번호 재설정 url을 클릭하면, 아래와 같이 비밀번호를 즉시 변경할 수 있다.

 

 

기타 로그인 관련 속성과 명령어는 아래의 파이어베이스 메인 페이지에서 볼 수 있다. (Link : https://firebase.google.com/docs/auth/web/manage-users?hl=ko)