firebase 사용자 생성 후 비밀번호 인증

Firebase Authentication은 사용자를 인증하고 관리하는 기능을 제공

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

 

1. Firebase 프로젝트 설정

• Firebase 콘솔에서 새 프로젝트를 만들고, 프로젝트 설정에서 웹 애플리케이션을 추가하여 Firebase SDK를 가져옴

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

2. 이메일 및 비밀번호를 사용한 사용자 생성

2-1 사용사 생성 함수

// 사용자 생성 함수
function signUpWithEmailPassword(email, password) {
  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
      // 사용자 생성 성공
      var user = userCredential.user;
      console.log('User created successfully:', user);
    })
    .catch((error) => {
      // 오류 처리
      var errorCode = error.code;
      var errorMessage = error.message;
      console.error('Error creating user:', errorCode, errorMessage);
    });
}

2-2 오류처리

오류처리는 catch 블록에서 이루어진다.

• auth/email-already-in-use : 이미 사용중인 이메일 주소입니다
• auth/invalid-email : 유효하지 않은 이메일 주소입니다
• auth/operation-not-allowed : 이메일 및 비밀번호 인증이 활성화되지 않았습니다
• auth/weak-password : 비밀번호가 너무 약합니다

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

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;
  });

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