240105

chillakilla·2024년 1월 7일

Firebase 를 이용한 로그인

FirebaseUI 를 통한 로그인의 이점

여러 제공업체
이메일/비밀번호, 이메일 링크, 휴대전화 인증, Google, Facebook, Twitter, Github 로그인에 사용되는 로그인 흐름을 제공.
계정 연결
여러 ID 공급업체에서 사용자 계정을 아넞ㄴ하게 연결하는 흐름을 제공.
맞춤설정
앱의 요구사항에 맞게 FirebaseUI의 CSS 스타일링을 재정의
원탭 가입 및 자동 로그인
빠르게 교차 기기 로그인을 할 수 있도록 원탭 가입과 자동 통합
현지화된 UI
40개 이상의 언어로 국제화될 수 있음.
익명 사용자 업그레이드
로그인/가입을 통해 익명 사용자를 업그레이드할 수 있습니다.

시작하기 전에...

웹 어플리케이션에 Firebase 인증을 추가하고, V9 compat 또는 이전 SDK를 사용 중인지 확인한다.
다음 방법 중 하나를 통해 FirebaseUI를 포함한다.
a. CDN
Firebase Console에서 페이지의 <head>태그의 초기화 스니펫 밑에 다음 스크립트와 CSS 파일을 포함한다.

<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

b. npm 모듈
다음 명령어를 사용하여 npm/yarn을 통해 FirebaseUI와 종속 항목을 설치한다.
$npm install firebaseui --save

소스 파일 내에서 다음 모듈을 require 처리 한다.
let firebase = require('firebase')
let firebase = require('firebaseui')

c. bower 구성요소
다음 명령어를 사용하여 Bower를 통해 FirebaseUI와 종속 항목을 설치합니다.
$bower install firebaseui --save
HTTP 서버가 bower_compenents/ 안의 파일을 제공하는 경우 필요한 파일을 HTML에 포함한다.

<script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

Authentication SDK 추가 및 초기화

Firebase JS SDK를 설치하고 Firebase를 초기화한다.
Firebase 인증 JS SDK 를 추가하고 Firebase 인증을 초기화 한다.

<script>
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
</script>

신규 사용자 가입

신규 사용자가 자신의 이메일 주소와 비밀번호를 사용해 앱에 사입할 수 있는 양식을 만듦.
사용자가 양식을 작성하면, 사용자가 입려한 이메일 주소와 비밀번호의 유효성을 검사한 후, createUserWithEmailAndPassword 메서드에 전달.

<script>
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
</script>

기존 사용자 로그인

기존 사용자가 자신의 이메일 주소와 비밀번호를 사용해 로그인할 수 있는 양식을 만듦.
사용자가 양식을 작성하면, signInWithEmailAndPassword 메서드를 호출.

<script>
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
</script>

인증 상태 관찰자 설정 및 사용자 데이터 가져오기

로그인한 사용자에 대한 정보가 필요한 앱 페이지마다 전역 인증 객체에 관찰자를 연결.
사용자의 로그인 상태가 변경될 때마다 이 관찰자가 호출됨.
onAuthStateChanged 메서드를 사용해 관찰자를 연결.
사용자가 로그인 되면 관찰자에서 사용자에 대한 정보를 가져올 수 있음.

<script>
import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
</script>