Firebase - Authentication (사용자 가입/로그인)

Firebase 서비스들

 

위 서비스들 중 인증(auth) 서비스를 사용하면 사용자 가입 및 로그인 기능을 사용할 수 있다.

https://firebase.google.com/docs/web/setup?hl=ko&authuser=0&_gl=1*14z9cn1*_up*MQ..*_ga*NDg4Njg2My4xNzE2NzcyNjcw*_ga_CW55HF8NVT*MTcxNjc3MjY3MC4xLjEuMTcxNjc3NTIxMS4wLjAuMA

JavaScript 프로젝트에 Firebase 추가

 

Firebase 콘솔 내 앱 프로젝트에서 Auth 서비스 시작하기

 

 

기본 이메일 로그인 또는 SNS 로그인 등을 제공 해주고있다.

 

 

Firebase 서비스를 이용하려면 Firebase SDK를 추가해줘야한다.

Firebase 팀은 npm을 통한 설치 및 초기화를 추천해주고 있다.

https://firebase.google.com/docs/web/setup?authuser=0&hl=ko&_gl=1*15ddcti*_up*MQ..*_ga*Mjg0OTY0OTkwLjE3MTc0NzQ3NjY.*_ga_CW55HF8NVT*MTcxNzQ3NDc2Ni4xLjAuMTcxNzQ3NDc2Ni4wLjAuMA

JavaScript 프로젝트에 Firebase 추가

 

Firebase의 모든 서비스를 위해서라면 npm설치를 필요로하지만,

인증과 Cloud Firestore 서비스만을 이용하려면 CDN으로 적용해도 된다.

https://firebase.google.com/docs/web/alt-setup?authuser=0&hl=ko&_gl=1*g6s6ow*_up*MQ..*_ga*NzMyMTU4OTA2LjE3MTc0Njc3MDM.*_ga_CW55HF8NVT*MTcxNzQ2NzcwMy4xLjAuMTcxNzQ2NzcwMy4wLjAuMA

JavaScript 프로젝트에 Firebase를 추가하는 다른 방법

 

Auth 모듈과 웹용 인증코드도 내 프로젝트에 적용 해줘야한다.

인증코드(apiKey)가 적혀있는 위치는 프로젝트 설정 하단의 내 앱 표시 부분에 적혀있다.

 

 

 

 <script type="module">
  // auth, cloud firestore 만 사용한다면 firebase app을 cdn에서 추가 가능
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js'
  
  // auth 모듈 import
  import { getAuth } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js'
 
  // Firebase project configuration 
  const firebaseConfig = {
    apiKey: "apiKey",
    authDomain: "juein-test-82982.firebaseapp.com",
    projectId: "juein-test-82982",
    storageBucket: "juein-test-82982.appspot.com",
    messagingSenderId: "481321712488",
    appId: "appId",
    measurementId: "G-WLCG42X371"
  };
  
  // init firebase
  const app = initializeApp(firebaseConfig);
   
  </script>

 

 

Authentication 가이드 문서

https://firebase.google.com/docs/auth/web/start?authuser=0&hl=ko&_gl=1*m5u94u*_up*MQ..*_ga*NDg4Njg2My4xNzE2NzcyNjcw*_ga_CW55HF8NVT*MTcxNjc4NDc4Mi4zLjAuMTcxNjc4NDc4Mi4wLjAuMA

웹사이트에서 Firebase 인증 시작하기  |  Firebase Authentication

 

가이드 문서를 참고해보면 auth 서비스 사용법에 대해 상세하게 나와있다.

맨 위에 있는 신규 사용자 가입을 테스트 해보자.

 // auth 서비스 참조 추가
 const auth = getAuth();
 
 // auth 모듈에서 사용 할 createUserWithEmailAndPassword 도 가져오기
 import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js'

 

 

createUserWithEmailAndPassword 에 가입 정보 인자 넘겨주기

email명 넘겨지는 부분 확인

 

가입시 콘솔에 찍혀있던 값들이 auth.currentUser의 다양한 값들이였구나

 

콘솔창에서 가입 된 회원 확인 가능. 비밀번호는 관리자가 확인 불가능하며 재설정만 가능한 상태로 나온다.

 

중복된 이메일명으로 신규 가입 함수를 다시 호출하면 400에러가 나온다.

 

이 외 인증 서비스로 사용된 메서드들이 대부분 비동기로 동작하여

순차적으로 실행 시키려면 async/await로 제어해야한다거나,

비밀번호가 6자리 미만일 경우에도 400에러가 나온다는 글을 어디선가 본 것 같은데

공식 가이드 문서의 순서가 뒤죽박죽이라 알아보기 힘들다....