Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

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

Firebase 인증을 사용하면 사용자가 이메일 주소 및 비밀번호 로그인을 비롯한 하나 이상의 로그인 방법과 Google 로그인 및 Facebook 로그인과 같은 연합 ID 공급업체를 사용하여 앱에 로그인할 수 있습니다. 이 가이드에서는 앱에 이메일 주소 및 비밀번호 로그인을 추가하는 방법을 보여줌으로써 Firebase 인증을 시작할 수 있습니다.

인증 SDK 추가 및 초기화

  1. 아직 설치하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화 합니다.

  2. Firebase 인증 JS SDK를 추가하고 Firebase 인증을 초기화합니다.

Web version 9

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);

Web version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(선택사항) Firebase 로컬 에뮬레이터 제품군으로 프로토타입 및 테스트

앱이 사용자를 인증하는 방법에 대해 이야기하기 전에 인증 기능을 프로토타이핑하고 테스트하는 데 사용할 수 있는 도구 모음인 Firebase 로컬 에뮬레이터 제품군을 소개하겠습니다. 인증 기술과 제공자 중에서 결정하고 있거나 인증 및 Firebase 보안 규칙을 사용하여 공개 및 비공개 데이터로 다양한 데이터 모델을 시도하거나 로그인 UI 디자인의 프로토타입을 제작하는 경우 라이브 서비스를 배포하지 않고 로컬에서 작업할 수 있는 것이 좋은 아이디어가 될 수 있습니다. .

인증 에뮬레이터는 로컬 에뮬레이터 제품군의 일부로 앱이 에뮬레이트된 데이터베이스 콘텐츠 및 구성은 물론 선택적으로 에뮬레이트된 프로젝트 리소스(함수, 기타 데이터베이스 및 보안 규칙)와 상호 작용할 수 있도록 합니다.

인증 에뮬레이터를 사용하려면 다음 몇 단계만 수행하면 됩니다.

  1. 에뮬레이터에 연결하기 위해 앱의 테스트 구성에 코드 줄을 추가합니다.
  2. 로컬 프로젝트 디렉토리의 루트에서 firebase emulators:start 를 실행합니다.
  3. 대화형 프로토타이핑을 위해 로컬 에뮬레이터 제품군 UI를 사용하거나 비대화형 테스트를 위해 인증 에뮬레이터 REST API를 사용합니다.

자세한 가이드는 앱을 인증 에뮬레이터에 연결 에서 확인할 수 있습니다. 자세한 내용은 로컬 에뮬레이터 제품군 소개 를 참조하십시오.

이제 사용자를 인증하는 방법을 계속해 보겠습니다.

신규 사용자 가입

새 사용자가 이메일 주소와 비밀번호를 사용하여 앱에 등록할 수 있는 양식을 만드십시오. 사용자가 양식을 완료하면 사용자가 제공한 이메일 주소와 비밀번호를 확인한 다음 createUserWithEmailAndPassword 메소드에 전달합니다.

Web version 9

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;
    // ..
  });

Web version 8

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

기존 사용자 로그인

기존 사용자가 이메일 주소와 비밀번호를 사용하여 로그인할 수 있는 양식을 만듭니다. 사용자가 양식을 완료하면 signInWithEmailAndPassword 메서드를 호출합니다.

Web version 9

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;
  });

Web version 8

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

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

로그인한 사용자에 대한 정보가 필요한 각 앱 페이지에 대해 전역 인증 개체에 관찰자를 연결합니다. 이 관찰자는 사용자의 로그인 상태가 변경될 때마다 호출됩니다.

onAuthStateChanged 메서드를 사용하여 관찰자를 연결합니다. 사용자가 성공적으로 로그인하면 관찰자에서 사용자에 대한 정보를 얻을 수 있습니다.

Web version 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web version 8

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

다음 단계

다른 ID 공급자 및 익명 게스트 계정에 대한 지원을 추가하는 방법을 알아보세요.