Javascript를 사용하여 비밀번호 기반 계정을 사용하여 Firebase에 인증

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

시작하기 전에

자바스크립트 프로젝트에 Firebase를 추가합니다 .
앱을 Firebase 프로젝트에 아직 연결하지 않았다면 Firebase 콘솔 에서 연결하세요.
이메일/비밀번호 로그인 활성화:
1. Firebase 콘솔 에서 인증 섹션을 엽니다.
2. 로그인 방법 탭에서 이메일/비밀번호 로그인 방법을 활성화하고 저장 을 클릭합니다.

암호 기반 계정 만들기

비밀번호를 사용하여 새 사용자 계정을 만들려면 앱의 가입 페이지에서 다음 단계를 완료하세요.

새 사용자가 앱의 가입 양식을 사용하여 가입하면 새 계정의 암호가 올바르게 입력되었고 복잡성 요구 사항을 충족하는지 확인하는 등 앱에서 요구하는 새 계정 확인 단계를 완료하십시오.

새 사용자의 이메일 주소와 암호를 createUserWithEmailAndPassword 에 전달하여 새 계정을 만듭니다.

Web version 9

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

Web version 8

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 에 전달합니다.

Web version 9

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 version 8

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를 가져와 사용자가 액세스할 수 있는 데이터를 제어하는 데 사용할 수 있습니다.

인증 공급자 자격 증명을 기존 사용자 계정에 연결하여 사용자가 여러 인증 공급자를 사용하여 앱에 로그인하도록 허용할 수 있습니다.

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

Web version 9

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 version 8

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