파이어베이스 인증(3) 로그인 & 아웃 설정하기

이메일 회원가입 작업(파이어베이스 인증(2))까지 진행한 상태에서 남은 작업은 로그인&아웃과 구글, 페이스북과 같은 우회 로그인 부분이다. 파이어베이스에서는 로그인 & 아웃과 관련된 기능을 모두 제공하고 있다. email인증 메일을 받아서 인증하는 방식과 잃어버린 아이디를 찾고 비밀번호를 재설정하는 부분까지 아래처럼 상세하게 설명하고 있다.

위의 기능을 모두 사용해보지 않았지만 sendSignInLinkToEmail()기능이 아마도 이메일 인증설정이 아닐까한다. reset과 관련된 부분은 비밀번호 재설정일 듯하다. 시간이 되면 해당 부분도 테스트 해봐야겠다.

1 로그아웃 기능

id가 logout인 폼을 클릭했을 때, auth.signOut()메서드가 실행된다. auth.signOut()메서드가 실행되면, 로그인 한 id는 인증에서 해제된다.(로그아웃) 여기서 .then()프로미스를 활용해서 signed out메시지를 동시에 출력한다. 만일 .then().catch()구문을 붙이면 예외규정, 에러를 설정할 수 있다.

2 로그인 기능

로그인 폼의 로그인 아이디(login-form) 'submit버튼'을 클릭하면 auth.signInWithEmailAndPassword()메서드가 실행된다. 프로미스에 있는 userCredentaial값은 콜벡함수로 user의 정보가 담겨있다. 유저의 정보를 화면에 표시할 때 해당 데이터(객체)의 값을 forEach구문으로 사용가능하다.

로그인에서 이메일을 입력한 뒤, submit 버튼을 클릭하면 아래처럼 콘솔 로그값이 나오게 된다. 

3 로그인 분기

회원가입 기능이 있는 웹사이트를 생각해보자. 로그인, 로그아웃에 따라서 아이디와 비밀번호를 넣는 항목이 바뀐다. 회원가입 사이트는 사용자 로그인, 아웃에 따라 일종의 분기가 발생하며, 로그인이 되면 회원 정보를 표시해줘야 한다. 

파이어베이스에서는 .onAuthStateChanged(user)메서드를 제공한다. 해당 메서드를 사용하면, 사용자 DB정보를 가져올 수 있다. 

사이트의 첫 시작 화면은 유저 데이터 정보가 없기 때문에 회원에게 보여지는 정보들이 공개되어서는 안 된다. 이를 위해 index.html파일의 포스트 정보를 삭제한다.(현재는 임시파일로 하드코딩)

임시로 포스팅한 부분을 모두 삭제하고, posts 클래스명을 부여한 ul태그를 만든다.  

데이터베이스에 저장된 자료를 불러오기 위해서 cgSources라는 컬렉션을 추가하고 문서를 2개 추가한다. 문서(doc)의 값은 아무렇게나 일단 설정한다.

4 firestore DB 불러오기

index.js파일을 열고, setupPosts함수를 생성한다. setupPosts함수는 data 객체를 받아서 객체 내부의 키와 값을 전달하는 역할을 담당한다. 그리고 setupPosts함수의 인자값 'user'정보는 auth.js에서 분기를 담당하는 onAuthStateChange()가 전달한다.(login상태일 때)  

유저가 사이트에 접속했을 때, data값이 없다면 빈 화면이 나와야 하고(로그인 요구), data값이 존재한다면 로그인 상태이므로 user데이터 값을 화면에 전달해야 한다. 이를 위해 if else구문을 넣고, data.length(데이터값 존재)가 참이라면 파이어스토어의 데이터 값을 받아서 list를 생성한다. 데이터 값이 없다면(else), 로그인을 요청하는 문구를 화면에 표시한다. `<h4 class = "center-align">~~~</h4> `

파이어스토어 DB와 auth.onAuthStateChange() 살펴보면,auth에서 cgSources콜렉션의 데이터를 받아서 setupPosts(snapshot.docs)함수로 전달하는 과정을 확인할 수 있다. snapshot과 관련된 부분은 파이어스토어 기본 문법 Doc에서 확인가능하다.

5 로그인 상태창 UI설정

이제 남은 작업은 로그인 상태창 설정이다. 기본적으로 로그인을 했을 때 볼 수 있는 항목은 'Account', 'Logout', 'Create Post' 3가지다. 반대로 로그아웃 상태일 때 볼 수 있는 항목은 'Login', 'Sign up'이 되어야 한다. 총 5가지 항목이 상단 내비게이션 항목에 있는데 css설정은 모두 "display:none"상태로 설정한다. 데이터값에 따라서 자바스크립트로 display값을 조절하기 때문이다.  

display상태를 모두 none으로 설정해 둔 상태로 index.js파일을 열어보자.

index.js파일에 loginCheck함수를 생성한다. loginCheck함수는 유저데이터 유무에 따라서 상단 내비게이션 뷰를 설정한다. 물론 loginCheck함수의 인자값은 auth.js에서 결정(전달)한다.

auth.js에서 user값이 있을 경우 loginCheck함수의 인자로 아래처럼 user값을 전달한다. 반면, 로그아웃 상태일 때는 빈 인자값을 전달한다.

위의 과정을 거치면, 이메일로 회원가입을 진행하고 로그인 로그아웃에 따라서 UI가 변하는 회원가입 작업을 firebase Auth + fireStore로 처리할 수 있다.