Firebase Auth

오늘의 포스팅은 Firebase Authentication에 대한 것입니다.

제가 진행했던 프로젝트들에서 개인정보 관련 기능을 구현할 때 사용했던 API입니다. 사용법이 꽤 간편해서 애용해왔던 API입니다.

---

Google의 포괄적인 앱 개발 플랫폼으로 개발의 다양한 측면을 간소화하여 시간과 노력을 절약할 수 있도록 도와줍니다. 
실시간 데이터베이스, 인증, 스토리지, 호스팅 및 기타 기능을 제공하여 모두 단일 플랫폼에서 관리할 수 있습니다.

 

Firebase Auth(파이어베이스 인증)

앱에서 사용자 인증 시 피룡한 백엔드 서비스와 사용하기 쉬운 SDK, 기성 UI 라이브러리를 제공합니다. 비밀번호, 전화번호, 인기 제휴 ID공급업체(Google, Facebook, Twitter 등)를 통해 인증이 지원됩니다.

IOS, Android, 웹, Unity, Flutter 플랫폼에서 사용할 수 있습니다.

 

 

식별자 : 사용자의 이메일 정보

제공업체 : 사용자 정보 생성 방법

생성한 날짜 : 사용자 정보 생성 날짜

로그인 한 날짜 : 사용자 정보로 로그인 한 날짜

사용자 UID : 사용자 고유 식별 번호

비밀번호(숨겨져 있음) : 사용자의 비밀번호 -> 플랫폼 관리창에서 비밀번호를 변경할 수 있습니다.

 

---

Firebase Authentication 사용 방법

환경 : Visual Studio Code, React, JavaScript

1. Firebase플랫폼에서 프로젝트를 만든 후 개발 플랫폼에 맞는 앱을 추가해 줍니다.(밑의 코드는 Android플랫폼 기준입니다)

2. src / firebase-config.js 파일을 만들어 프로젝트 정보를 입력해줍니다.

 

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

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

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

export { auth, createUserWithEmailAndPassword, signInWithEmailAndPassword };

firebaseConfig에 프로젝트 정보를 입력합니다.

createUserWithEmailAndPassword : 회원가입을 위한 기능
signWithEmailAndPassword : 로그인을 위한 기능

 

프로젝트 정보를 가져오는 방법

 

3. 회웝가입 기능 코드

import { auth, createUserWithEmailAndPassword } from "../firebase-config";

const register = async () => {
    try {
      setErrorMsg(" ");
      const user = await createUserWithEmailAndPassword(
        auth,
        registerEmail,
        registerpassword
      );
      alert("Complete!!");
      navigate("/");
    } catch (err) {
      switch (err.code) {
        case "auth/weak-password":
          alert("비밀번호는 6자리 이상이어야 합니다");
          break;
        case "auth/invalid-email":
          alert("잘못된 이메일 주소입니다");
          break;
        case "auth/email-already-in-use":
          alert("이미 가입되어 있는 계정입니다");
          break;
      }
    }
 };

회원가입시 Firebase Authentication측에서 "auth/weak-password" 와 같은 오류 코드를 날려줍니다.

 

4. 로그인 코드

  import { auth, signInWithEmailAndPassword } from "firebase/auth";
  
  const login = async () => {
    try {
      const user = await signInWithEmailAndPassword(
        auth,
        loginEmail,
        loginpassword
      );
      console.log(user);
      setUser(user.user);
      navigate("/SignageList");
    } catch (error) {
      alert("check id or password");
    }
  };

 

 

---

Firebase Auth의 장점

1. config파일 코드와 함수를 사용하는 코드만 작성하면 되기에 코드가 간결해진다.

2. 플랫폼에서 개인정보 관리가 가능하기에 유지보수가 간단해진다.

3. OAuth 2.0 및 OpenID Connect등의 산업 표준을 사용하므로 백엔드와의 통합이 간단하다.

4. 구글, Apple, Facebook, Twitter, Gihub계정으로 로그인할 수 있는 수단을 제공하기에 범용성이 넓다.

 

하지만 단점도 존재합니다

1. 플랫폼에 대한 의존성

Firebase Auth에서 API를 가져와서 사용하기 때문에 플랫폼의 오류로 인한 이슈 발생시 대처가 어렵습니다. 플랫폼을 사용하는 측에서 이슈에 대해 아무것도 할 수 없거나 해결 시간이 길어질 수 있습니다. 이 때문에 플랫폼에 절대적으로 의존하지 않아야 합니다.

 

2. 비용 문제

일일 활성 사용자가 3000명 까지는 무료 요금제가 적용되지만 3000명을 넘어가면 비용이 부과되기 시작합니다. 서비스 규모에 따라 플랫폼을 사용하는 것 보다 자체적으로 기능을 개발하는 측면이 비용 측면에서 효율적일 수 있습니다.

 

출처

https://firebase.google.com/docs/auth?hl=ko&_gl=1*ay7t98*_up*MQ..*_ga*MTg0MDQ2NTQ2MS4xNzEyNDk2MzY5*_ga_CW55HF8NVT*MTcxMjQ5NjM2OC4xLjAuMTcxMjQ5NjM2OC4wLjAuMA..

https://firebase.google.com/docs/auth?hl=ko#identity-platform-limits