파이어베이스 인증(2) 이메일 회원가입 완성하기

인증 화면을 만들기 위해서 index.html파일을 생성하고, firebase cdn을 삽입한다. 여기서 가장 위쪽에 위치해야 하는 cdn경로는 firebase-app.js다. 아래처럼 app -> auth -> firestore순서로 cdn을 배치하자. 가장 위쪽에 있는 cdn은 디자인 작업을 편하게 만들어주는 materialize프레임워크다. 

 

materialize 웹사이트는 아래 링크에서 확인할 수 있다.

https://materializecss.com/

1 api-key삽입하기

firebase에서 받은 api키를 아래처럼 삽입한다. api키는 파이어베이스 콘솔의 프로젝트 설정에서 확인할 수 있다.

2 firebase 모듈 사용설정

파이어베이스의 auth과 firestore을 사용하기 위해서는 firevase.auth()와 firebase.firestore()를 추가해야한다. auth, fs변수를 생성하고, 관련 firebase메서드를 연결한다.

3 이메일 인증form 작성하기

materilize 프레임워크에는 다음과 같은 여러가지 메서드를 제공한다. 부트스트랩과 유사하며, 좌측 메뉴를 통해 각종 사용법을 확인할 수 있다. 해당 폼에서는 sign 팝업창을 Modal기능을 사용해서 생성하였다.

auth와 관련된 메서드는 firebase의 auth관련 firebase문서에 자세한 사용방법까지 알려준다. https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#createuserwithemailandpassword

M.modal.getInstance(modal).close(); 부분은 회원가입을 제출하고 난 뒤에 팝업창을 닫는 코드에 해당하고, signUpForm.reset();은 말 그대로 창을 새롭게 로딩한다. 

node.js + express를 활용해서 로컬서버를 만든 뒤, index.html파일에서 이메일 회원가입을 작성해보자. 아래처럼 firebase의 인증창에 가입한 이메일이 저장된 것을 확인할 수 있다.