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

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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

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

시작하기 전에

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

암호 기반 계정 만들기

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

  1. 새 사용자가 앱의 가입 양식을 사용하여 가입할 때 새 계정의 비밀번호가 올바르게 입력되었고 복잡성 요구 사항을 충족하는지 확인하는 것과 같이 앱에 필요한 모든 새 계정 유효성 검사 단계를 완료하세요.
  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;
        // ..
      });

    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;
        // ..
      });
    새 계정이 생성된 경우 사용자는 자동으로 로그인됩니다. 로그인한 사용자 세부 정보를 얻으려면 아래의 다음 단계 섹션을 살펴보세요.

    여기에서 오류를 포착하고 처리할 수도 있습니다. 오류 코드 목록은 Auth Reference Docs 를 참조하십시오.

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

암호로 사용자를 로그인하는 단계는 새 계정을 만드는 단계와 유사합니다. 앱의 로그인 페이지에서 다음을 수행합니다.

  1. 사용자가 앱에 로그인할 때 사용자의 이메일 주소와 비밀번호를 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;
      });

    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;
      });
    로그인한 사용자 세부 정보를 얻으려면 아래의 다음 단계 섹션을 살펴보세요.

    여기에서 오류를 포착하고 처리할 수도 있습니다. 오류 코드 목록은 Auth Reference Docs 를 참조하십시오.

다음 단계

사용자가 처음으로 로그인하면 새 사용자 계정이 생성되어 사용자가 로그인한 자격 증명(즉, 사용자 이름 및 암호, 전화 번호 또는 인증 공급자 정보)에 연결됩니다. 이 새 계정은 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.
});

Web version 8

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