Firebase 인증(Authentication) 기능 사용하기

오늘은 Firebase 의 인증(Authentication)을 사용하는 방법을 정리해 보겠습니다.

1. Email 인증 활성화 하기

먼저 왼쪽 메뉴에서 Authentication을 선택해 줍니다.

화면 한 가운데에서 Set up sign-in method버튼을 선택해 줍니다.

그럼 아래와 같은 화면을 만나게 되는데요.

이메일을 이용한 기본적인 회원가입과 로그인외에도,

(카카오톡의 카카오 계정을 이용하는 방법도 제공하였으면 좋았을 텐데 아쉽지만)

facebook이나 google 혹은 twitter계정을 이용한 인증 후 로그인 방법도 제공해 주고 있습니다.

이 중 이메일을 선택하도록 하겠습니다.

그리고 enable을 활성화 해 줍니다.

네, 이제 코드한줄 치지 않고 이메일/패스워드를 사용할 수 있는 준비가 되었습니다.

2. test유저 추가하기

2-1. UI에서 유저 추가하기

이제 위에서 한대로 활성화 시킨 이메일인증이 정상 동작하는지 확인해 보아야 할 텐데요.

test유저를 추가하는 방법은 아주 간단합니다.

아래와 같이, Users탭에서 Add User버튼을 추가해 주면 됩니다.

아래에 email과 password를 입력해주기만 하면 되는데요.

2-2. 코드로 유저 추가하기

이제 드디어 코딩을 해봐야 하는데요.

여기서는 NodeJS와 Express의 routing에 대해 알고있다고 가정하고 진행하겠습니다.

아래와 같이 firebase를 initialize해 줍니다.

위의 환경설정값은,

Firebase의 홈화면에서 Add app을 누르고 나서,

Select a platform에서 '</>'마크가 보이는 아이콘을 누르면 됩니다

id와 패스워드를 입력할 수 있는 화면을 만들고,

router에서 post메소드로 유저를 생성할 수 있습니다.

createUserWithEmailAndPassword라는 메소드를 이용해서 정말로 쉽게

유저를 생성할 수 있습니다.

코드로 유저를 추가한 경우 다음과 같은 에러가 나오기도 하는데요.

본인이 설정하지는 않았지만, Firebase의 인증기능 자체에서,

최소 6자의 문자가 되도록 설정되어 있습니다.

이에 따른 메시지를 유저가 알 수 있도록 후에 처리해 주어야 겠네요.

3. 추가한 유저 로그인 및 로그아웃 하기

그럼 이제 initialize된 firebase를 이용해서,

위에서 추가한 유저가 정상적으로 로그인 되는지 확인해 보겠습니다.

login페이지에 입력창과 폼을 만들구요.

login버튼을 클릭하면, post메소드를 이용해서 확인해 볼 수 있는데요.

아래와 같이 signInWithEmailAndPassword메소드에 아이디와 패스워드를 

받아서 넣어주면 됩니다.

아래와 같은 코드를 이용해서 logout도 쉽게 해 볼 수 있습니다.