회원가입과 로그인 처리
앞선 2개의 글에서, 파이어베이스로 웹서비스 시 사용자가 email 정보와 임의의 패스워드를 이용해 계정을 생성하는 방법으로 회원가입을 처리하는 방법( https://blog.naver.com/mythee1/223495997534)과
이렇게 가입한 사용자의 로그인 과정을 처리(https://blog.naver.com/mythee1/223496032686)하는 방법을 소개한 바 있었다.
비밀번호 변경 처리 실제 사례
그런데, 이렇게 가입을 한 이후, 가입자가 자신이 보유한 계정의 패스워드를 변경하고자 하려면 어떻게 처리해야 할까?
이 역시 파이어베이스에서는 간단한 방법으로 해결할 수 있도록 지원하고 있다. 바로 updatePassword 구문 하나로 간단히 처리할 수가 있다.
user.updatePassword(newPassword).then(function() {
물론 이 과정에서, 기존 패스워드가 일치하는지와, 새로 입력하는 패스워드 확인을 위해 2번 입력하게 하거나, 패스워드에 대문자 등을 사용하게 하는 등의 추가적인 처리로 생각보다 약간 길어질 수 있으나, 패스워드 변경 그 자체는 이 1개의 구문으로도 처리가 가능하다.
내가 만든 코드를 기준으로 설명하면
우선 다음과 같은 입력폼을 만들어주었는데,
이는 다음의 HTML로 구현하였다.
이렇게 입력받은 패스워드 정보는 다음 스크립트로 두 번 입력한 패스워드들이 일치하는지의 여부를 확인했고,
또한 새로 변경하려는 패스워드의 구성이 적절한지를 확인하는 단계를 거쳤다.
이렇게 새로 변경하기 위해 입력한 패스워드가 일치하고, 구성도 적절하다면, 다음과 같이 기존에 등록된 email과 패스워드와 맞는지 확인하는 과정을 거치고
이 조건이 충족되면 다음과 같이 패스워드 변경이 이루어지도록 했다.
그러고 나서 변경이 이후 적절한 페이지로 이동하는 등의 과정을 거치도록 구성했다.
필요한 사람들의 참고를 위해 HTML과 스크립트 전체는 다음과 같다.
<!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">
<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 src="/firebaseConfig.js"></script>
</head>
<body>
<!-- Navigation-->
<!-- 콘테이너 생성 -->
<div class="container mt-3">
<h4 style="margin-bottom: 40px;"> 비밀번호 변경 </h4>
<div class="mb-3">
<input type="password" class="form-control mt-3 mb-5" placeholder="기존 비밀번호" id="current-password">
<input type="password" class="form-control mt-3 mb-2" placeholder="새 비밀번호" id="new-password">
<input type="password" class="form-control mt-3 mb-2" placeholder="새 비밀번호 확인" id="confirm-password">
<h6 style="color: red;"> 8자 이상, 대문자, 숫자, 특수문자 포함해야 합니다.</h6>
</div>
<button type="submit" class="btn btn-primary mt-5" id="change-password">변경하기</button>
</div>
<script>
$('#change-password').click(function() {
var currentPassword = $('#current-password').val();
var newPassword = $('#new-password').val();
var confirmPassword = $('#confirm-password').val();
var user = firebase.auth().currentUser;
if (newPassword !== confirmPassword) {
alert("새 비밀번호가 일치하지 않습니다.");
return;
}
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/;
if (!passwordRegex.test(newPassword)) {
alert("새 비밀번호는 최소한 영문 대문자 1자 이상, 영문 소문자 1자 이상, 숫자 1자 이상, 특수문자 1자 이상 사용하고, 길이는 8자 이상이어야 합니다.");
return;
}
var credential = firebase.auth.EmailAuthProvider.credential(user.email, currentPassword);
user.reauthenticateWithCredential(credential).then(function() {
user.updatePassword(newPassword).then(function() {
alert("비밀번호가 성공적으로 변경되었습니다.");
window.location.href = "/index.html";
}).catch(function(error) {
console.log(error);
alert("비밀번호 변경 중 오류가 발생했습니다.");
});
}).catch(function(error) {
console.log(error);
alert("기존 비밀번호가 일치하지 않습니다.");
});
});
// Enter키를 눌렀을 때 변경 버튼이 클릭되도록 하는 코드
$('#confirm-password').keypress(function(e) {
if (e.which == 13) { // Enter키의 ASCII 코드는 13입니다.
$('#change-password').click();
}
});
</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>