파이어베이스로 간단한 어플을 제작할 때, 가장 만족할 만한 부분은 auth(인증)이었다. Auth를 사용하면 "회원가입, 로그인, 이메일 인증, 비밀번호 찾기 등" 모두 50줄 정도로 처리할 수 있다. 하지만 CSS작성과 Auth API를 찾는 일에 투입된 시간이 너무 많았다. 개인적으로도 이번 포스팅을 통해 파이어베이스(Web) Auth에 대한 정리가 절실하다.
auth와 관련된 자세한 내용은 파이어베이스 웹사이트를 통해 좀더 자세하게 알 수 있다. (https://firebase.google.com/docs/auth/web/manage-users?hl=ko)
1 Firebase Auth CDN
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
auth를 위한 firebase CDN은 위의 3가지가 필요하다. <body>하단에 CDN을 붙여넣은 뒤, 자주 사용하는auth,fs 변수를 만든다.
이제 기능과 관련된 적절한 auth의 메서드를 호출하는 일만 남았다.
2 User추가 | createUserWithEmailAndPassword()
유저를 추가할 때는 firebase.auth().createUserWithEmailAndPassword()뒤에 then()프로미스 구문과 .catch()에러문을 사용한다. 파라미터값은 email, password가 사용된다.
|| createUserWithEmailAndPassword( email , password ).then().catch()
ceateUserWithEmailAndPassword()의 프로미스 구문에는 유저의 정보를 콜벡함수로 넘겨받을 수 있다. 만일 회원가입 양식에 입력된 사용자의 추가정보를 저장하려면 콜벡으로 넘어온 데이터를 firestore()쿼리문으로 전달한다.
createUserWithEmailAndPassword()에서 넘어온 콜벡함수의 return값에는 현재 접속한 유저의 데이터가 있다. 위의 코드에서는 "userCredential.user.uid"와 "userCredential.user.emailVerified"값이 auth의 기본객체에 해당하고, email, userName, nickName값은 사용자가 form에 입력한 값이다.
최근에는 회원가입 양식에 이메일과 비밀번호만 있는 경우가 많지만 이름과 폰번호 등을 기입해야하는 경우에는 fs.collection('컬렉션')쿼리문을 이용해서 firestore() DB에 저장할 수 있다. (위의 노란 박스부분)
3 이메일 인증 | sendEmailVerification()
파이어베이스 웹버전 auth에서는 콜벡함수를 사용함으로써 "이메일 인증"을 편리하게 진행할 수 있다. createUserWithEmailAndPassword()을 실행하게 되면, 회원가입을 진행하고 있는 유저의 정보가 쿠키값으로 저장된다.(이메일 정보가 있음) 그리고 이 값은 "firebase.auth().currentUser"를 이용해서 변수에 저장할 수 있다. 아래 코드를 보자.
user변수에는 회원가입을 진행하고 있는 유저의 정보(auth.currentUser)가 담겨있고, sendEmailVerification()메서드를 붙여주는 것만으로 위에서 입력했던createUserWithEmailAndPassword(email,password)의 'email'로 인증메일이 전송된다.
그리고 전송되는 인증메일의 내용은 firebase 콘솔의 'Authentication -> 템플릿 -> 이메일 주소인증 탭'에서 제작할 수 있다.
또, 메일인증을 사용하기 위해서는 아래와 같이 '로그인 방법설정'에서 이메일/비밀번호 인증을 체크해야 한다.
인증메일과 관련된 에러처리는 catch문을 이용한다. error.code는 파이어베이스의 에러와 관련된 정보를 알려주고, error.message를 입력하면 관련 메시지를 알 수 있다. 만일 에러코드를 한글로 변환하고 싶다면 switch문을 이용한 함수를 만들어준다.
아래 코드에는 없지만 errExTxt(errorCode)함수를 활용한다면, 에러코드에 따라 한글로 해석된 switch문의 반환값을 사용자에게 전달할 수 있다. 참고적으로 catch()구문에는 if-else를 사용할 수 없기 때문에 따로 함수를 만들어서 에러코드를 전달하는 방식을 사용하는 편이 좋다.
**참고사항: 파이어베이스 API관련 오류코드는 아래 사이트에서 확인가능하다.
https://firebase.google.com/docs/auth/admin/errors?hl=ko
'웹개발 자료실 > Firebase 개발 Code' 카테고리의 다른 글
| 블로그 회원가입 제작(feat. firebase) [1편. 파이어베이스 설정 & 로그인폼 제작] (0) | 2022.01.06 |
|---|---|
| Firebase『Auth 로그인, 비밀번호 찾기』 (1) | 2019.12.28 |
| Firebase『Firestore 쿼리문』 (0) | 2019.12.12 |
| Firebase『Firebase CDN 및 setup』 (0) | 2019.12.07 |
| 파이어베이스 인증(4) 구글 인증하기 & DB보안설정 (0) | 2019.09.24 |
댓글