자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기

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

시작하기 전에

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

비밀번호 기반 계정 만들기

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

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

트리 쉐이킹 작업이 가능한 모듈식 웹 API에 대해 자세히 알아보고 네임스페이스화된 API에서 업그레이드하세요.
```
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;
    // ..
  });auth_signup_password.js
```
웹 네임스페이스화된 API
```
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
```
신규 계정 생성에 성공하면 사용자가 자동으로 로그인됩니다. 로그인한 사용자의 세부정보를 가져오는 방법은 아래의 '다음 단계' 섹션에서 확인하세요.
이 단계에서 오류를 파악해서 처리할 수도 있습니다. 오류 코드 목록은 인증 참고 문서에서 확인할 수 있습니다.

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

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

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

웹 모듈식 API

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

웹 네임스페이스화된 API

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 인증 메서드에서 특정 오류가 발생합니다. 이는 사용자에게 특정 조치를 제안하는 데 유용할 수 있지만 사용자가 등록한 이메일 주소를 악의적인 행위자가 발견하는 데 악용될 수도 있습니다.

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

다음 단계

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

앱에서 사용자의 인증 상태를 파악할 때 권장하는 방법은 Auth 객체에 관찰자를 설정하는 것입니다. 그러면 User 객체로부터 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리를 참조하세요.
Firebase 실시간 데이터베이스와 Cloud Storage 보안 규칙의 auth 변수에서 로그인한 사용자의 고유 사용자 ID를 가져온 후 이 ID를 통해 사용자가 액세스할 수 있는 데이터를 관리할 수 있습니다.

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

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

웹 모듈식 API

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

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

웹 네임스페이스화된 API

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