콘솔로 이동

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

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

Firebase에 앱 연결

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

신규 사용자 가입

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

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

기존 사용자 로그인

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

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

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

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

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

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

다음 단계

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