JavaScript를 사용하여 비밀번호 기반 계정으로 Firebase에 인증

Firebase Authentication을 사용하면 사용자가 자신의 이메일 주소와 비밀번호를 통해 Firebase에 인증하고 앱에서 사용하는 비밀번호 기반 계정을 관리하게 할 수 있습니다.

시작하기 전에

  1. JavaScript 프로젝트에 Firebase를 추가합니다.
  2. 아직 Firebase 프로젝트에 앱을 연결하지 않았다면 Firebase Console에서 연결합니다.
  3. 다음과 같이 이메일 및 비밀번호 로그인을 사용 설정합니다.
    1. Firebase Console에서 인증 섹션을 엽니다.
    2. 로그인 방법 탭에서 이메일/비밀번호 로그인 방법을 사용 설정하고 저장을 클릭합니다.

비밀번호 기반 계정 만들기

비밀번호가 있는 신규 사용자 계정을 만들려면 앱의 로그인 페이지에서 다음 절차를 완료합니다.

  1. 신규 사용자가 앱의 가입 양식을 사용하여 가입하면 앱에서 요구하는 새 계정 유효성 검사 단계를 완료합니다. 검사 항목에는 신규 계정의 비밀번호를 정확하게 입력했는지, 비밀번호가 복잡성 조건을 충족하는지 등이 있습니다.
  2. 다음과 같이 신규 사용자의 이메일 주소와 비밀번호를 createUserWithEmailAndPassword에 전달하여 신규 계정을 생성합니다.

    Web

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

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

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    email.js
    신규 계정 생성에 성공하면 사용자가 자동으로 로그인됩니다. 로그인한 사용자의 세부정보를 가져오는 방법은 아래의 '다음 단계' 섹션에서 확인하세요.

    이 단계에서 오류를 파악해서 처리할 수도 있습니다. 오류 코드 목록은 인증 참고 문서에서 확인할 수 있습니다.

이메일 주소와 비밀번호로 사용자 로그인

비밀번호로 사용자 로그인을 처리하는 절차는 신규 계정을 생성하는 절차와 비슷합니다. 앱의 로그인 페이지에서 다음 절차를 따르세요.

  1. 사용자가 앱에 로그인하면 다음과 같이 사용자의 이메일 주소와 비밀번호를 signInWithEmailAndPassword에 전달합니다.

    Web

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

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    email.js
    로그인한 사용자의 세부정보를 가져오는 방법은 아래의 '다음 단계' 섹션에서 확인하세요.

    이 단계에서 오류를 파악해서 처리할 수도 있습니다. 오류 코드 목록은 인증 참고 문서에서 확인할 수 있습니다.

권장: 비밀번호 정책 설정

비밀번호 복잡성 요구사항을 적용하여 계정 보안을 강화할 수 있습니다.

프로젝트의 비밀번호 정책을 구성하려면 Firebase Console의 인증 설정 페이지에서 비밀번호 정책 탭을 엽니다.

인증 설정

Firebase Authentication 비밀번호 정책은 다음과 같은 비밀번호 요구사항을 지원합니다.

  • 소문자 필요

  • 대문자 필요

  • 숫자 필요

  • 영숫자가 아닌 문자 필요

    다음 문자는 영숫자가 아닌 문자 요구사항을 충족합니다. ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • 비밀번호 최소 길이(6~30자, 기본값은 6)

  • 비밀번호 최대 길이(최대 4,096자)

다음 두 가지 모드로 비밀번호 정책 적용을 사용 설정할 수 있습니다.

  • 필수: 사용자가 정책을 준수하는 비밀번호로 업데이트할 때까지 가입 시도가 실패합니다.

  • 알림: 사용자가 정책을 준수하지 않는 비밀번호를 사용하여 가입할 수 있습니다. 이 모드를 사용할 때는 클라이언트 측에서 사용자의 비밀번호가 정책을 준수하는지 확인하고 정책을 준수하지 않는 경우 사용자에게 비밀번호를 업데이트하라는 메시지를 어떤 방식으로든 표시해야 합니다.

신규 사용자는 항상 해당 정책에 따라 비밀번호를 선택해야 합니다.

활성 사용자가 있는 경우 비밀번호가 정책을 준수하지 않는 사용자의 액세스를 차단하려는 경우가 아니면 로그인 강제 업그레이드를 사용 설정하지 않는 것이 좋습니다. 대신 사용자가 현재 비밀번호로 로그인할 수 있게 해주고 비밀번호에 부족한 요구사항을 알리는 알림 모드를 사용하세요.

클라이언트에서 비밀번호 유효성 검사

import { getAuth, validatePassword } from "firebase/auth";

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

권장: 이메일 열거 보호 사용 설정

이메일 주소가 등록되어 있어야 하는데(예: 이메일 주소와 비밀번호로 로그인할 때) 등록되지 않은 경우 또는 이메일 주소를 사용해서는 안 되는데(예: 사용자의 이메일 주소를 변경할 때) 등록된 경우, 이메일 주소를 파라미터로 사용하는 일부 Firebase Authentication 메서드에서 특정 오류가 발생합니다. 이는 사용자에게 특정 조치를 제안하는 데 유용할 수 있지만 사용자가 등록한 이메일 주소를 악의적인 행위자가 발견하는 데 악용될 수도 있습니다.

이러한 위험을 완화하려면 Google Cloud gcloud 도구를 사용하여 프로젝트에 이메일 열거 보호 기능을 사용 설정하는 것이 좋습니다. 이 기능을 사용 설정하면 Firebase Authentication의 오류 보고 동작이 변경됩니다. 앱이 더 구체적인 오류에 의존하지 않는지 확인하세요.

다음 단계

사용자가 처음으로 로그인하면 신규 사용자 계정이 생성되고 사용자가 로그인할 때 사용한 사용자 인증 정보(사용자 이름과 비밀번호, 전화번호 또는 인증 제공업체 정보)에 연결됩니다. 이 신규 계정은 Firebase 프로젝트에 저장되며 사용자의 로그인 방법과 무관하게 프로젝트 내의 모든 앱에서 사용자 본인 확인에 사용할 수 있습니다.

  • 앱에서 사용자의 인증 상태를 파악할 때 권장하는 방법은 Auth 객체에 관찰자를 설정하는 것입니다. 그러면 User 객체로부터 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리를 참조하세요.

  • Firebase Realtime Database와 Cloud Storage 보안 규칙의 auth 변수에서 로그인한 사용자의 고유 사용자 ID를 가져온 후 이 ID를 통해 사용자가 액세스할 수 있는 데이터를 관리할 수 있습니다.

인증 제공업체의 사용자 인증 정보를 기존 사용자 계정에 연결하면 사용자가 여러 인증 제공업체를 통해 앱에 로그인할 수 있습니다.

사용자를 로그아웃시키려면 signOut을 호출합니다.

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js