Firebase 인증이란 무엇인가요?

Firebase 인증은 웹사이트/앱에서 사용자를 등록, 로그인 및 관리할 수 있는 인증 API입니다.

앱에서 인증을 구현하는 것이 복잡해 보일 수 있지만 다음의 간단한 단계를 따르면 사용이 얼마나 간단하고 빠른지 보여드리겠습니다.

1단계 - Firebase 앱 초기화

Firebase.com으로 이동하여 콘솔로 이동합니다. 새 프로젝트를 만들고 프로젝트 이름을 입력한 후 다음 슬라이드에서 Google Analytics를 비활성화합니다.
프로젝트가 생성되면 리디렉션되는 현재 페이지의 "앱에 Firebase를 추가하여 시작하기"라는 제목 아래에서 iOS 및 Android 옆에 있는 "웹"이라는 코드 아이콘을 클릭합니다. 웹 프로젝트의 이름을 입력합니다. 일반적으로 이름은 "my-project-web"이어야 합니다. Firebase 호스팅이 필요하지 않으므로 계속을 누르세요. 다음 슬라이드에서 콘솔로 계속을 클릭합니다. 이제 첫 번째 Firebase 앱을 만들었습니다.

2단계 - 인증 설정

왼쪽 사이드바에서 인증을 클릭합니다. 머리글에서 시작하기를 클릭합니다. 지금은 간단한 이메일/비밀번호 인증부터 시작하겠습니다. 이메일/비밀번호라는 첫 번째 옵션 상자를 클릭한 다음 활성화를 클릭하고 저장을 누르십시오.
이것이 앱에서 인증을 설정하기 위해 수행해야 하는 모든 구성입니다.

3단계 - 앱에서 인증을 구현합니다.

가장 먼저 해야 할 일은 Firebase 구성 코드를 가져오는 것입니다. 이를 위해 Firebase 앱으로 이동할 수 있습니다. 프로젝트 개요 근처 상단의 사이드바에서 설정(톱니바퀴) 아이콘을 클릭하고 프로젝트 설정을 선택합니다. SDK 설정 및 구성이 표시될 때까지 아래로 스크롤합니다. 내부에 표시되는 코드를 복사합니다.

const firebaseConfig = {
  apiKey: '',
  etc...
}

프로젝트 폴더 내에 firebase.js라는 구성 파일을 만들고 이 코드를 복사하여 그에 따라 구성 값을 바꿉니다.

import firebase from "firebase"

const config = {
  apiKey: "fill in with your real values",
  authDomain: "fill in with your real values",
  projectId: "fill in with your real values",
  storageBucket: "fill in with your real values",
  messagingSenderId: "fill in with your real values",
  appId: "fill in with your real values"
}
const firebaseApp = firebase.initializeApp(config)

const db = firebaseApp.firestore()
const auth = firebaseApp.auth()
const storage = firebaseApp.storage()

export { db, auth, storage } 

참고: firebase에서 오류가 발생하는 경우 아마도 일부 문서 오류일 수 있습니다. 이를 해결하려면 이 버전의 firebase npm: "firebase": "^8.9.1",

로그인

이제 프로젝트에서 일반적으로 auth라는 폴더에 2개의 파일을 만들 수 있습니다. 하나는 사용자를 로그인하고 다른 하나는 계정을 만드는 파일입니다. 따라서 첫 번째 login.js와 두 번째 register.js의 이름을 지정할 수 있습니다. 로그인 파일에서 이 코드를 다음 위치에 복사할 수 있습니다.

import { auth } from 'your/firebase.js/path' 
const handleLogin = () => { 
    auth.signInWithEmailAndPassword(email, password)
    .then(() => {
      authListener()
    })
    .catch(err => {
      switch(err.code) {
        //visit firebase for full list of error codes to display to user when their auth is incorrect.
      }  
    }) 
  }

const authListener = () => {
    auth.onAuthStateChanged(user => {
      if(user) {
        setMyUser(user) //if using react
      }
      else {
        setMyUser(null) //if using react
      }
    })
  }

여기서 발생하는 일은 사용자가 handleLogin() 함수를 실행하는 로그인 버튼을 클릭할 때 Firebase 함수 auth.signInWithEmailAndPassword를 호출하여 사용자가 입력한 이메일과 비밀번호를 제공한 다음 onAuthStateChanged()를 호출하여 상태를 설정하는 것입니다. Firebase 사용자의 데이터를 수신하도록 정의할 수 있습니다. 그것은 로그인을 다룹니다! 사용자 등록에 대해 살펴보겠습니다.

등록하다

Register.js 파일 내에서 다음 코드를 복사해 보겠습니다.

const handleSignup = () => {
      auth.createUserWithEmailAndPassword(email, password
      .then(() => {
        auth.onAuthStateChanged(user => {
          if(user) {
            user.updateProfile({
              displayName: `${firstName} ${lastName}`,
              photoURL: 'user-uploaded-img'
            })
            .then(() => { 
              navigate('/')
            })
            .catch(err => {
              console.log(err)
            })
          }
        })
      })
      .catch(err => {
        switch(err.code) {
          //switch error codes 
        }
      })
  }

보시다시피 등록 파일은 로그인과 매우 유사하지만 유일한 차이점은 createUserWithEmailAndPassword()라는 firebase의 인증 API와 약간 다른 함수를 호출한다는 것입니다. 이 기능은 또한 이메일과 비밀번호를 매개변수로 사용하고 두 값이 모두 유효하면 사용자를 생성합니다. 그런 다음 사용자가 계정을 만들 때 사용자에게 선택적으로 요청할 수 있는 값으로 사용자의 displayName 및 photoURL을 업데이트합니다.

결론

그게 전부입니다. 이제 앱에 완전히 작동하는 인증 시스템이 있습니다. firebase auth가 제공하는 2가지 기능 signInWithEmailAndPassword() 및 createUserWithEmailAndPassword()를 사용하여 계정을 생성하거나 로그인하여 사용자를 인증할 수 있습니다.