Chia sẻ code yêu cầu mật khẩu trước khi download đơn giản bằng html, js

Nếu bạn hay tải file trên các trang chia sẻ, thì đôi khi bạn sẽ thấy nhiều trang làm chức năng là bạn phải điền mật khẩu vào thì bạn mới có thể bắt đầu tải file đó về máy được. Còn mật khẩu thì bạn sẽ phải vào google tìm kiếm một từ khóa nào đấy, sau đó vào trang đích trong đó có đoạn mã đồng thời là mật khẩu download. Hôm nay mình sẽ chia sẻ cho bạn cách điền mật khẩu thì mới tải được đơn giản nhất. bạn có thể tham khảo nhé.

Code yêu cầu mật khẩu trước khi download

Nếu các bạn để ý thì, họ hay làm cách này để seo cho một website khác trên google, mình thấy cách này cũng khá là hay.

Tuy nhiên nhược điểm cảu cách này là web của bạn phải có một thứ gì đó rất độc đáo và đặc biệt để người dùng tải về, vì mình thấy cái này khá khó chịu.

1] Code html

<div class="dl-pass">
    <div class="pass">
        <p>Download File</p>
        <button class="btn">Bấm lấy mật khẩu</button>
    </div>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-content-dl">
                <div class="modal-header">
                    <span class="close">&times;</span>
                </div>
                <p style="font-weight: bold;text-align: center;font-size: 18px;">Các bước lấy mật khẩu download</p>
                <div class="step">
                    Bước 1: Vào GOOGLECOM.VN gõ từ khóa
                    <div id="textToCopy">Blog thủ thuật máy tính f4vnn</div>
                    <button id="copyButton">Click to copy</button> <span id="copyResult"></span>
                </div>
                <div class="step-2">
                    <p>Bước 2: Ấn vào kết quả tìm kiếm có website f4vnn.com</p>
                    <img src="https://sendy.applyzones.com/uploads/1719995389.jpg" alt="search">
                </div>
                <div class="step-3">
                    <p>Bước 3: Kéo xuống cuối trang web. Ấn vào Lấy password để nhận password xem video nhé</p>
                </div>
                <div class="step-4">
                    <p>Bước 4: Dán mật khẩu vào ô mật khẩu để bắt đầu download</p>
                </div>
            </div>
        </div>
    </div>
    <div class="btn-dl">
        <input type="text" placeholder="Nhập mật khẩu vào đây" id="specialChars" name="specialChars" required="">
        <br>
        <button onclick="validateResult()">Download</button>
    </div>
</div>

2] CSS làm đẹp

.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.5)}
.modal-content{position:relative;margin:auto;padding:0;width:95%;max-width:50rem;max-height:34rem;overflow:hidden;border-radius:2px;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s;background:#fff;-webkit-box-shadow:0 0 19px 3px rgba(0,0,0,0.08);-moz-box-shadow:0 0 19px 3px rgba(0,0,0,0.08);box-shadow:0 0 19px 3px rgba(0,0,0,0.08)}
@-webkit-keyframes animatetop {
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframes animatetop {
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
.close,.close-imp{color:#aaa;font-size:2rem;font-weight:700;padding:0 1rem;border-radius:2px;transition:.4s ease-out}
.close:hover,.close:focus,.close-imp:hover,.close-imp:focus{color:#111;text-decoration:none;cursor:pointer}
.btn{display:block;background:#222;color:#fff;padding:10px 30px;border:1px solid #222;font-size:16px;margin:1.5rem auto;transition:all .4s ease-in;border-radius:5px}
.btn:hover{cursor:pointer;color:#222;background:#fff}
.dl-pass{width:100%;max-width:1080px;margin:0 auto}
.btn-dl{text-align:center}
.pass p{text-align:center;font-size:50px;margin-bottom:0}
.modal-header{position:absolute;float:right;right:0;top:0}
.step{display:flex;gap:15px;align-items:center}
div#textToCopy{background:#593e3e;padding:5px 10px;color:#fff}
.modal-content-dl{padding:15px}
.step-2 img{width:100%;height:auto}
input#specialChars{padding:5px 10px;width:50%;margin-bottom:20px;text-align:center}
@media only screen and (max-width:600px) {
.step{display:block}
div#textToCopy{margin:10px auto}
}

3] JS

function validateResult() {
    var userInput = document.getElementById("specialChars").value;
    var correctResult = atob("YmxvZ3RpcGY0dm5u");

    if (userInput === correctResult) {
        window.location.href = atob("aHR0cHM6Ly9hY2FmdWxsLmY0dm5uLmNvbS8=");
    } else {
        alert("Mật khẩu không đúng. Vui lòng nhập lại!");
    }
}

const modal = document.querySelector("#myModal");

const btn = document.querySelectorAll(".btn");

const closeModal = document.getElementsByClassName("close")[0];

for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", function () {
        modal.style.display = "block";
    });
}

btn.onclick = function () {
    modal.style.display = "block";
};

closeModal.onclick = function () {
    modal.style.display = "none";
};

window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "block";
    }
};

const answer = document.getElementById("copyResult");
const copy   = document.getElementById("copyButton");
const selection = window.getSelection();
const range = document.createRange();
const textToCopy = document.getElementById("textToCopy")

copy.addEventListener('click', function(e) {
    range.selectNodeContents(textToCopy);
    selection.removeAllRanges();
    selection.addRange(range);
    const successful = document.execCommand('copy');
    if(successful){
      answer.innerHTML = 'Copied!';
  } else {
      answer.innerHTML = 'Unable to copy!';  
  }
  window.getSelection().removeAllRanges()
});

Các bạn để ý dòng:

• var correctResult = atob(“YmxvZ3RpcGY0dm5u”); bạn thay dòng ký tự trong dấu “” dòng thứ 3 bằng ký tự bạn muốn (trong code là đoạn ký tự đc mã hóa bằng base64 cơ bản thôi nhé).
• window.location.href = atob(“aHR0cHM6Ly9hY2FmdWxsLmY0dm5uLmNvbS8=”); bạn thay dòng ký tự trong dấu “” dòng thứ 5 bằng link bạn muốn.

Có thể bạn quan tâm:

• ẩn thẻ DIV sau một khoảng thời gian bằng jQuery
• tạo mật khẩu ngẫu nhiên bằng html css và js

Theo dõi trên