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

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

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

시작하기 전에

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

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

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

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

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

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

권장: 이메일 열거 보호 활성화

이메일 주소를 매개변수로 사용하는 일부 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.
});

Web version 8

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