콩이네

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

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

회원가입과 로그인 처리

앞선 2개의 글에서, 파이어베이스로 웹서비스 시 사용자가 email 정보와 임의의 패스워드를 이용해 계정을 생성하는 방법으로 회원가입을 처리하는 방법( https://kongyine.com/223495997534)과

se-l-large_image” id=”SE-8cc37c01-a723-4c0f-814d-58913d8e2182″>

Firebase 배우기 7 – 웹서비스 사용자 가입 처리

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

kongyine.com

8cc37c01-a723-4c0f-814d-58913d8e2182″, “data” : {“link” : “https://kongyine.com/223495997534”, : “false”, “thumbnail” : “https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fblogthumb.pstatic.net%2FMjAyNDA2MzBfMjA3%2FMDAxNzE5NzEwMzc1MTg2.vqSkoPFq9FSBTL03ocG0WCXcSiHYjstdRbXgsTDCKocg.6TYLLYgCJ1QF5z5g0rlxell0COa9n7QJh12N3fdWfGMg.JPEG%2F2024-06-29_21_53_48.jpg%3Ftype%3Dw2%22&type=ff500_300

이렇게 가입한 사용자의 로그인 과정을 처리(https://kongyine.com/223496032686)하는 방법을 소개한 바 있었다.

se-l-large_image” id=”SE-658f89e6-d686-4185-8e88-1c7ecf88e2ff”>

Firebase 배우기 8 – 웹서비스 로그인 처리

다음과 같은 이전 글에서 Firebase를 이용한 서비스에서, 사용자 등록을 간단히 몇 줄로 처리하는 방법을 …

kongyine.com

658f89e6-d686-4185-8e88-1c7ecf88e2ff”, “data” : {“link” : “https://kongyine.com/223496032686”, : “false”, “thumbnail” : “https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fblogthumb.pstatic.net%2FMjAyNDA2MzBfMjI4%2FMDAxNzE5NzEzNTIyNDY5.aclJc7rpTtRXfNM5Oo-WOYWulVk6WJNELCnx8C1EQTcg.wMPMfhrvKGsP-VPhQ2MX_IavjYtADSuU9FOJgt4qPG8g.PNG%2Fimage.png%3Ftype%3Dw2%22&type=ff500_300

​

비밀번호 변경 처리 실제 사례

그런데, 이렇게 가입을 한 이후, 가입자가 자신이 보유한 계정의 패스워드를 변경하고자 하려면 어떻게 처리해야 할까?

​

이 역시 파이어베이스에서는 간단한 방법으로 해결할 수 있도록 지원하고 있다. 바로 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>

​