Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

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

Firebase 인증을 사용하면 사용자가 이메일 주소 및 비밀번호 로그인, 제휴 ID 공급업체(예: Google 로그인, Facebook 로그인)를 통한 로그인 방법 중 한 개 이상을 사용하여 앱에 로그인할 수 있습니다. 이 가이드에서는 Firebase 인증을 시작할 수 있도록 앱에 이메일 주소와 비밀번호 로그인을 추가하는 방법을 보여줍니다.

Firebase에 앱 연결

Firebase SDK를 설치합니다. 설명된 것과 같이 웹페이지에 구성 코드를 붙여넣어야 합니다.

(선택사항) Firebase 로컬 에뮬레이터 도구 모음으로 프로토타입 제작 및 테스트

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

인증 에뮬레이터는 로컬 에뮬레이터 도구 모음에 포함되어 있으며 앱에서 에뮬레이션된 데이터베이스 콘텐츠 및 구성은 물론 필요할 경우 에뮬레이션된 프로젝트 리소스(함수, 다른 데이터베이스, 보안 규칙)와도 상호작용할 수 있게 해 줍니다. 로컬 에뮬레이터 도구 모음에서는 에뮬레이션된 Cloud Storage를 아직 지원하지 않습니다.

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

  1. 에뮬레이터에 연결하려면 앱의 테스트 구성에 코드 줄을 추가합니다.
  2. 로컬 프로젝트 디렉터리의 루트에서 firebase emulators:start를 실행합니다.
  3. 대화형 프로토타입 제작에는 로컬 에뮬레이터 도구 모음 UI를, 비대화형 테스트에는 인증 에뮬레이터 REST API를 사용합니다.

자세한 안내는 인증 에뮬레이터에 앱 연결을 참조하세요. 자세한 내용은 로컬 에뮬레이터 도구 모음 소개를 참조하세요.

이제 사용자 인증 방법을 계속 살펴보겠습니다.

신규 사용자 가입

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

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

기존 사용자 로그인

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

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

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

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

onAuthStateChanged 메서드를 사용해 관찰자를 연결합니다. 사용자가 로그인되면 관찰자에서 사용자에 대한 정보를 가져올 수 있습니다.

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 공급업체 및 익명 게스트 계정에 대한 지원을 추가하는 방법을 알아보세요.