[firebase] Authentication 회원가입, 로그인, 로그아웃

firebase 인증 서비스를 이용해 회원가입, 로그인, 로그아웃을 진행 해 보자.

 

정말 간단하게 몇 줄 안되는 코드로 진행이 가능하다.

 

firebase 시작하기 부터 진행하고 있는 분들이라면 처음에 Authentication 설정을 이메일/비밀번호로 설정 되어 있을 것이다.

 

그럼 이제 그 설정을 그대로 진행해보도록 하자.

 

 

입력된 값들을 넣어 주면 되는데 실제 회원가입에서 필요한 코드는 

firebase.auth().createUserWithEmailAndPassword(email, password).then(result => {

});

위와 같이 매우 간단하다.

회원 가입이 완료 되면 위 코드 안에서 동작을 수행하면 되는데 여기서 보면 우리가 입력한 이름이 저장되는 곳이 없다.

 

이름을 저장하기 위해서는 아래와 같이 작성해 주면 된다.

 

firebase.auth().createUserWithEmailAndPassword(email, password).then(result => {
        result.user.updateProfile({
          displayName : name
        });
      }).catch(err => {
        console.error(err);
      })

 

넘겨 받은 result를 이용해 updateProfile을 오브젝트 형식으로 해주면 된다.

 

그럼 회원가입이 성공됐다면 아래와 같이 이름을 업데이트 할 것이다.

 

 

그러고 firebase console 을 확인해 보면 우리가 입력한 회원 정보가 잘 들어가 있는걸 확인 할 수 있다.

 

저걸 응용해 회원가입이 완료가 되면 DB에 사용자 정보를 넣어 보도록 응용해 볼 수도 있다.

 

회원가입이 끝났으니 이제 로그인을 진행해 보자.

 

 

로그인 역시 엄청 간단하게 아래 3줄로 끝이 났다.

입력받은 아이디와 비밀번호를 넘겨 주면 firebase가 알아서 체크해서 로그인을 시켜 준다.

정말 간단하게 사용 할 수 있다.

 

로그인 역시 완료가 되면 사용자의 정보를 기억하고 있다던가 하는 동작을 응용해서 사용해 보면 좋을 것 같다.

아 참고로 로그인이 되면 사용자 정보를 firebase가 갖고 있는데 페이지마다 firebase에서 갖고 오는건 상당히 비효율적이다. 왜냐면 firebase가 생각보다 그렇게 빠르지 않기 때문에 다른 공간에 저장해 놨다가 가져 오는 걸 추천한다.

예를 들면 localStorage 같은 곳에 넣어 둔다면 딜레이없이 빠르게 가져 올 수 있다.

 

이제 로그아웃을 해볼건데 로그아웃은 코드 한줄이면 끝이다.

 

 

사용자 token을 firebase가 알아서 관리해 주니 우리는 딱히 하는거 없이 간단하게 로그인, 로그아웃을 구현 할 수 있다.

 

firebase 인증서비스에는 이메일 말고도 여러가지를 지원해 주니 문서를 읽고 상황에 맞는 인증서비스를 이용해 보면 좋을 듯 하다.

 

이걸로 회원가입, 로그인, 로그아웃이 끝이 났다.