firebase node.js 이메일 인증하는 방법

안녕하세요 엘빈입니다. 정말 firebase 인증 시스템은 간단하면서도 복잡합니다. 이메일 인증을 구현하기 위해 하루종일 고민하고 겨우 해결했습니다. firebase는 다 좋은데 한글 가이드 문서가 너무 부족합니다. 하다 못해 영어 문서도 자세히 알려주었으면 하는데 많지 않더라고요. 아마 출시된지 얼마 안된 클라우드 서비스라거 그런것 같습니다. 이번 포스팅에서는 node.js와 firebase를 이용하여 이메일 인증하는 방법을 요약해 보겠습니다.

 Email 인증 회원가입 시스템

이메일 인증 시스템에 대해 모든 소스 코드를 보여주는 것이 아닌 흐름이나 방향을 포스팅하려고 합니다. 개발 문서에 소스 코드들은 자세히 나와있으니 참고하시면서 개발해주시기 바랍니다!

먼저 저 같은 경우 로그인 구현을 크게 sns와 로컬 방식으로 구분하였습니다. sns는 말그대로 oauth2 모델, 즉 구글,네이버 등으로 로그인 및 회원가입을 하는 것이고 로컬 방식은 사이트에서 아이디 비밀번호를 설정하여 회원가입 하는 것입니다. 

보통 이메일 인증 방식은 무분별한 회원가입을 막기 위해 사용됩니다. 저같은 경우 로컬 방식 회원가입은 다음과 같은 구조로 개발하였습니다.

정말 복잡하죠? 그래도 firebase에서 제공하는 여러 라이브러리 때문에 간편한 편입니다. 원래 firebase는 웹개발 부분에서 백엔드 설명이 많이 부족합니다. 특히 제가 개발하고 있는 node.js는 더욱 그렇죠. 천천히 알아보면 이해가 되실거라 생각됩니다.

1. Form 제출

먼저 첫번째 form 제출입니다. 사용자가 웹 UI 문서에서 form submit 버튼을 제출하면 서버로 가는 것이죠. 이 부분의 소스코드는 생략하겠습니다.

2-3. DB 검사 / 계정생성

 await db.collection('users').where('email','==',email).get()

    .then(async (snapshot) => {

      if (snapshot.empty) {

        console.log('회원가입 진행중');

        await firebase.auth().createUserWithEmailAndPassword(email, req.body.password).catch(function(error) {

            // Handle Errors here.

            var errorCode = error.code;

            var errorMessage = error.message;

            // ...

          });

      }else{

        res.render('home',{user:null,notice:"<script>alert('경고문')</script>"});

      }

    })

    .catch(err => {

      console.log('Error getting documents', err);

    });

비동기적으로 실행하면 나중에 파이어베이스 로그인 후 currentUser을 받아올때 null값이 출력되더라고요. 그래서 이 부분을 동기적으로 실행했습니다. 사실 완벽하지 않은 코드들이고 급하게 완성시킨 부분이 있으니 그냥 참고용으로 봐주시면 좋겠습니다.

제 웹개발 프로젝트의 경우 sns 로그인으로 네이버와 구글을 택했는데 만약 네이버 로그인을 하고 같은 계정을 회원가입에 이용한다면 2개의 중복된 DB를 가질 수 있습니다. 따라서 Firestore에 존재하는 email이 있는지 검색을 해줍니다. 만약 있다면 홈화면으로 알림과 함께 이동합니다.

4-6. DB 생성 및 이메일 보내기 

letdata = {

            email : req.body.email,

            name : req.body.name,

            personKind : req.body.personKind,

        }

db.collection('users').doc(req.body.email).set(data);

그리고 form에서 입력받은 데이터를 DB에 넣어줍니다.

 var emailUser = firebase.auth().currentUser;

    console.log('emailUser의 값은 : ',emailUser);

    emailUser.sendEmailVerification().then(function(){

        console.log('이메일이 전송됨');

    }).catch('email not sent');

이 후 currentUser을 받아온 뒤 sendEmailVerification 메소드를 호출해줍니다. 저장된 유저의 email로 인증 메일을 보내줍니다.

 res.render('home',{user:null,

notice:"<script>

alert('이메일 발송 안내')

</script>"});

저같은 경우 ejs view engine을 사용하였기 때문에 소스코드 자체를 삽입하여 알림을 호출시켰습니다.

이렇게 이메일이 옵니다. 저같은 경우 엄청난 시행착오를 거쳤기 때문에 많은 것을 볼 수 있죠. 참고로 수신자는 firebase 고유 계정으로 오게 됩니다. 

메일 내용을 보면 링크 하나가 온 것을 알 수 있는데요. 이 링크를 클릭하면 firebase auth 모듈내의 계정 속성 중 하나인 "emailVertified"가 true로 변합니다. 이메일 인증이 완료되었다는 페이지가 호출한 채 말이죠.

이메일 발송 내용 및 기타 설정은 firebase 콘솔에서 바꿀 수 있습니다. 왠만하면 내용을 제외하고 안변경하시는 것이 좋습니다. 개인적으로 만든 url 경로로 이메일 인증 처리를 하려다 거의 3시간을 삽질하였습니다.

 Email 로그인 시스템

firebase 이메일 로그인 시스템은 간단합니다. 다음과 같이 플로우차트로 도식화시켰습니다.

그저 firebase auth 모듈을 호출하여 해당 계정의 emailVertified 속성을 확인하면 됩니다.

 let userId = req.body.id;

        let userPassword = req.body.password;

        await firebase.auth().signInWithEmailAndPassword(userId, userPassword)

        .then(function(firebaseUser) {

        })

        .catch(function(error) {

            console.log('error는 이겁니다 : ',error);

            res.redirect('/home');

        });  

        var user = firebase.auth().currentUser;

        console.log('user email 확인됬는지 안됬는지 : ',user.emailVerified)

        if(user.emailVerified ==true){

            req.session.user = userId;

            console.log('req.session.user은 이거 : ',req.session.user);

            res.render('home',{user:userId,notice:""});

        }else{

            res.render('home',{user:null,notice:"<script>alert('경고 알림')</script>"});

        }

다음과 같은 코드로 작성하시면 됩니다.

저도 해결한 코드들을 그대로 복사/붙여넣기 하였습니다. 좋은 방법이 있으시다면 댓글로 남겨주시면 감사하겠습니다.