Firebase 배우기 7 - 이메일과 패스워드를 이용한 회원 가입 처리

Firebase에서는 서비스 가입자에 대한 가입자 등록과 관련된 기능을 쉽게 구현할 수 있도록 firebase-auth 기능을 제공한다.

이를 이용하면 쉽게 신규 가입자 등록을 처리할 수 있는데, 가장 대표적인 Email과 Password를 이용하는 경우, 다음과 같이 firebase.auth().createUserWithEmailAndPassword(이메일, 패스워드).then() 함수를 이용하여 가입자를 처리할 수 있으며, 다음과 같이 신규 가입에 대한 처리를 간단히 구성할 수 있다.

브라우저에서 실행하면, 다음과 같은 화면으로 가입을 진행하면

참고: 위의 이메일 주소는 가상의 주소임

Firebase 콘솔의 Authentication 화면에서도, 가입이 문제없이 처리되고 해당 사용자가 등록된 것을 확인할 수가 있다.

계속해서 새로운 가입자를 등록하면 다음과 같이 하나씩 추가된다.

이 코드를 구성하면서 한 가지 잘 동작하지 않았던 경우가 있었는데, 원인은 다음 화면의 2번째로 표시된 jQuery CDN 문장의 위치가 중요했다. 일반적으로 jQuery 문장은 로딩 속도 등의 이유로 페이지의 뒤 부분에 놓는 경우가 많은 것으로 알려져 있으나, 실제로는 앞부분에서 선언되지 않아 후속 코드의 동작에 문제가 있는 경우가 있었으며, 앞쪽에 선언돼야 정상 동작했다.

전체 코드는 다음과 같이 완성했다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>가입하기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
const firebaseConfig = {Firebase가입자 정보
        };
      firebase.initializeApp(firebaseConfig);
</script>
<body>
<!-- 콘테이너 생성 -->
<div class="container mt-3">
<div class="mb-3">
<input type="email" class="form-control" placeholder="email" id="email-new">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="pw" id="pw-new">
</div>
<button type="submit" class="btn btn-primary" id="register">가입하기</button>
</div>
<script>
const db = firebase.firestore( );
const storage = firebase.storage( );
$('#register').click(function( ){
var 이메일 = $('#email-new').val();
var 패스워드 = $('#pw-new').val();
        firebase.auth().createUserWithEmailAndPassword(이메일, 패스워드).then((result)=>{
            console.log(result)
            console.log(result.user)
setTimeout(()=>window.location.href = "/index.html",1500)
}).catch((error)=>{
            console.log(error)
})
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Firebase 배우기 7 – 이메일과 패스워드를 이용한 회원 가입 처리