Firebase 배우기 41 - 가입자의 탈퇴 처리 구현 방법

파이어베이스 회원가입 및 로그인, 패스워드 변경

파이어베이스를 사용 시 이메일과 패스워드를 이용하여, 사용자의 회원가입과, 로그인, 패스워드 변경 등을 처리하는 과정을 다음 각각의 글로 자세히 소개한 바 있었다.

회원가입 : https://kongyine.com/223495997534

로그인 처리 : https://kongyine.com/223496032686

패스워드 변경 : https://kongyine.com/223552724165

se-l-image” id=”SE-55028553-782e-48ab-9142-3cb433387dbb”>

Firebase 배우기 40 – 가입자의 로그인 패스워드 변경 처리하기

회원가입과 로그인 처리 앞선 2개의 글에서, 파이어베이스로 웹서비스 시 사용자가 email 정보와 임의의 패…

kongyine.com

55028553-782e-48ab-9142-3cb433387dbb”, “data” : {“link” : “https://kongyine.com/223552724165”, : “false”, “thumbnail” : “https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fblogthumb.pstatic.net%2FMjAyNDA4MTlfMTY5%2FMDAxNzI0MDI4NzA2Mjk5.1GZxzEKUSehzRJNb0ESYqpiyTz0iHdxmQjF6o3Lo8BQg.O1xFjm4dD8gtBK5SpCn2AQraxKe7MumOHl8ZrMd18o8g.PNG%2Fimage.png%3Ftype%3Dw2%22&type=ff120

파이어베이스 회원 탈퇴 처리 방법

그런데, 이렇게 회원가입에 관한 공부를 하다 보면, 자연스레 회원 탈퇴는 어떻게 구현해야 할까? 하는 의문이 생겨난다. 그런데 걱정하지 않아도 된다. 파이어베이스에서는 user.delete 구문을 이용하여 쉽게 사용자를 웹서비스에서 탈퇴하는 처리를 구현할 수 있다.

실제로는 이미 가입한 사용자이어야 탈퇴 처리가 가능하므로, 입력받은 사용자 이메일과 패스워드로 기존 사용자가 맞는지를 한번 확인한 후에, 실제로 가입자 정보를 삭제하는 형식으로 구현하게 된다.

회원 탈퇴 구현 예제

실제로 내가 구현한 사례를 소개하면, 먼저 탈퇴하려는 사용자의 이메일과 패스워드를 입력받았다.

이 부분은 다음의 HTML로 처리했다.

그리고, 위에 소개한 user.delete 문을 이용해 삭제하되, 실수를 방지하기 위해 prompt로 삭제 의사를 재확인하는 과정을 거치도록 했다.

전체 코드는 다음과 같다.

  <!-- 콘테이너 생성 -->
  <div class="container mt-5">
    <h4  style="margin-bottom: 40px;"> 가입자 탈퇴 </h4>
    <div class="mb-3">
      <input type="email" class="form-control mt-3 mb-3" placeholder="이메일" id="email">
      <input type="password" class="form-control mt-3 mb-3" placeholder="비밀번호" id="password">
    </div>
    <button type="submit" class="btn btn-danger mt-5" id="delete-account">탈퇴하기</button>
</div>

<script>
  $('#delete-account').click(function() {
    var email = $('#email').val();
    var password = $('#password').val();
    var user = firebase.auth().currentUser;

    if (confirm("정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.")) {
      var credential = firebase.auth.EmailAuthProvider.credential(email, password);
      user.reauthenticateWithCredential(credential).then(function() {
        user.delete().then(function() {
          alert("계정이 성공적으로 삭제되었습니다.");
          window.location.href = "/index.html";
        }).catch(function(error) {
          console.log(error);
          alert("계정 삭제 중 오류가 발생했습니다.");
        });
      }).catch(function(error) {
        console.log(error);
        alert("이메일 또는 비밀번호가 일치하지 않습니다.");
      });
    }
  });

</script>

Firebase 배우기 41 – 가입자의 탈퇴 처리 구현 방법