폼 제출 버튼 비밀번호 적용하기 1가지 방법

폼 제출 버튼 비밀번호 적용하는 1가지 방법을 자바스크립트로 구현했습니다.

updated: 24시간 내 쿠키 적용해 비밀번호를 1번만 입력하면 됩니다.

필요한 경우

아래와 같이 입력 폼이 있을 때 관리자만 입력을 할 수 있게 하고 싶을 경우가 있습니다. 그럼 입력버튼, 제출/submit/Review 등 입력 값을 보내는 버튼을 클릭 시 비밀번호 값을 받아 일치하면 클릭이 이뤄지게 하면 될 것입니다. 그래서~ 챗GPT에게 물어봤습니다. 역시 똑똑한 것이 소스 코드를 알려줬습니다.

폼 제출 버튼 비밀번호 소스 코드

설명을 주석으로 넣어서 좀 보기가 그러네요. 그래서 여기 사이트 13번에서 다운 받을 수 있습니다.

<script>
// 다음과 같은 제출 버튼을 관리자 암호를 입력해야 클릭 될 수 있게 합니다. 쿠키 적용함
// <button class="btn btn-green" type="submit" id="submit">Submit</button>
function checkPassword() {
    // 로컬 스토리지에서 마지막으로 비밀번호를 입력한 시간을 가져옴
    var lastPasswordTime = localStorage.getItem("lastPasswordTime");
    var currentTime = new Date().getTime(); // 현재 시간을 milliseconds 단위로 가져옴

    // 만약 마지막 비밀번호 입력 시간이 없거나 24시간이 지났다면 비밀번호를 다시 입력받음
    if (!lastPasswordTime || (currentTime - parseInt(lastPasswordTime)) >= (24 * 60 * 60 * 1000)) {
        var password = prompt("비밀번호를 입력하세요:"); // 사용자로부터 비밀번호를 입력받음
        if (password === "1234") { // 입력된 비밀번호가 "1234"인지 확인
            localStorage.setItem("lastPasswordTime", currentTime); // 비밀번호 입력 시간을 로컬 스토리지에 저장
            return true; // 비밀번호가 일치하면 true 반환하여 폼 제출
        } else {
            alert("잘못된 비밀번호입니다."); // 비밀번호가 일치하지 않으면 알림 메시지 출력
            return false; // 폼 제출을 막기 위해 false 반환
        }
    } else {
        // 24시간이 지나지 않았으면 다시 비밀번호를 입력하지 않아도 됨
        return true; // 폼 제출을 허용하기 위해 true 반환
    }
}

// 폼 제출 버튼 클릭 이벤트 처리
// 페이지가 로드될 때 실행되며, 폼 제출 버튼(#submit)이 클릭되면 checkPassword() 함수를 호출하여 사용자로부터 비밀번호를 입력받습니다.
document.addEventListener("DOMContentLoaded", function() {
    var reviewBtn = document.getElementById("submit"); //button의 id 값 입력
    reviewBtn.addEventListener("click", function(event) {
        if (!checkPassword()) {
            event.preventDefault(); // 비밀번호가 일치하지 않으면 폼 제출을 막음
        }
    });
});
</script>

실제 적용한 사이트 예

위 코드는 제가 필요해서 만들 것이라 현재 운영하고 있는 SEO checklist 사이트에 적용해 두었습니다.