firebase Auth

1. firebase Auth 란?

firebase Authentication 쉽게 사용자 인증을 구현할 수 있도록 돕는 firebase 서비스

• 이메일 및 비밀번호 인증
  • 이메일 주소와 비밀번호를 사용하여 가입하고 로그인 가능
• 소셜 로그인
  • 구글, 페이스북, 트위터, 깃허브 등고 ㅏ같은 소셜 미디어 계정 사용하여 로그인 가능
• 전화번호 인증
  • 전화번호를 통해 인증 코드를 받고 입력하여 로그인 가능
• 인증 정보 안전하게 저장
• 인증 정보 변경시 실시간으로 앱에 업데이트

2. 장점

• 편의성
  • firebase SDK를 사용하면 다양한 인증 방법을 간단하게 애플리케이션에 통합
  • 클라이언트 사이드 개발에만 집중 
• 소셜 미디어 계정 인증
  • OAuth 2.0과 OpenID Connect 지원
  • 각종 소셜 미디어 계정 이용한 인증 쉽게 구현 
• 보안
  • 사용자의 비밀번호 안전하게 암호화 
  • HTTPS 이용해 데이터 전송 보안

3. 세팅 방법 

• firebase 프로젝트 생성 & firebase SDK 앱 추가

npm install firebase

• firebase 초기화

import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

• authentication 서비스 불러오기

createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    const user = userCredential.user;
    console.log("User registered:", user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error("Error registering user:", errorCode, errorMessage);
  });

signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    const user = userCredential.user;
    console.log("User logged in:", user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error("Error logging in user:", errorCode, errorMessage);
  });

 

Firebase에서 사용자 관리하기

 

코드

try {
    app = getApp('app');
} catch (e) {
    app = initializeApp(firebaseConfig, 'app');
}

• firebase 애플리케이션을 가져오거나, 만약 아직 초기화가 되지 않았다면 초기화 함. 
• try{} catch(e){} 
  • try 블록 안에 있는 코드를 실행해보고, 오류가 발생하면 catch 블록 코드 실행
• app = getApp('app')
  • app이라는 이름으로 firebase 애플리케이션을 가져오는 함수
  • 만약 app이라는 이름의 애플리케이션이 이미 초기화되어 있다면, 이를 'app' 변수에 할당
  • 이미 firebase 초기화가 되어 있는 경우 여기서 초기화된 애플리케이션을 가져올 수 있다. 
• catch(e)
  • getApp('app') 에서 오류가 발생하면 이 부분이 실행
  • 오류가 발행사는 이유로 app이라는 이름의 애플리케이션이 아직 초기화되지 않았기 때문일수도 있다
• app = initializeApp(firebaseConfig, 'app') 
  • initializeApp은 새로운 파이어베이스 애플리케이션을 초기화하는 함수 
  • firebaseConfig는 firebase 프로젝트 설정 정보로 이 정보는 firebase 프로젝트를 웹 애플리케이션에 연결하는 데 필요
  • app이라는 이름으로 새로운 firebase 애플리케이션을 초기화하고 이를 app 변수에 할당