密码保护页面

Password Protect Page

本文关键字：密码保护      更新时间：2023-09-26

我从另一个网页上获取了以下代码"http://www.javascriptkit.com/script/cut10.shtml"。

<SCRIPT>
function passWord() {
    var testV = 1;
    var pass1 = prompt('Please Enter Your Password',' ');
    while (testV < 3) {
        if (!pass1) history.go(-1);
        if (pass1.toLowerCase() == "letmein") {
            alert('You Got it Right!');
            window.open('protectpage.html');
            break;
        } 
        testV+=1;
        var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
    }
    if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1);
    return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>

它只在第二次输入密码的情况下有效，但在第一次输入密码时无效。当你输入密码时，它会显示错误的密码，提示你再次输入密码，然后它就会通过。我需要一个脚本来提示我正确的密码，以防我输入错误的密码。作为一个JavaScript初学者，有人能帮我写代码吗？

访问链接时，您的代码显示为工作。

我知道你在学习。不过，你不应该这样做身份验证，因为你并没有真正保护任何东西。任何人都可以在任何浏览器中使用"查看页面代码"选项读取源代码（通常右键单击页面）。这意味着任何人都可以轻松获得您的密码。

对于真正的身份验证，您应该使用服务器端语言（如PHP）或web服务器配置的HTTP摘要式身份验证。Digest有点过时，因为它使用MD5，但它比你正在做的要好一百万倍。

有关使用Apache web服务器设置HTTP摘要的更多信息，请参阅：

http://httpd.apache.org/docs/2.2/mod/mod_auth_digest.html

对于Nginx:做同样的事情

http://wiki.nginx.org/HttpAuthDigestModule

HTTP基本身份验证也起作用，但它以纯文本形式从用户浏览器传输密码。使用HTTP摘要对密码进行散列处理。

知道你正在学习JavaScript，最好的办法就是配置你正在使用的web服务器。由于大多数web托管服务都使用Apache，因此您很可能使用.htaccess文件。您可以在".htaccesshttp摘要"中搜索有关如何设置的教程。

一些web托管服务具有控制面板，这些控制面板具有使用摘要/基本身份验证来保护目录的功能。在很常见的cPanel中，它被称为"密码保护目录"。

如果你更高级，我建议你用PHP做，但这是一个相当复杂的主题。

//Add this to you script
function run(){
var password = prompt("Password Please");
//Change to your own Password
if(password != 'Sameer'){
document.body.innerHTML = '';
document.body.innerHTML = 'Password Failed! Reload to Renter Password';
}else{
alert('Success');
}
}
run();

试试这个。。只需在false case中添加拒绝访问提示。。。

  function passWord() 
    {
             var testV = 1;
             var pass1 = prompt('Please Enter Your Password',' ');
             while (testV < 3) 
             {
                    if (!pass1) 
                    {
                           history.go(-1);
                           var pass1 = prompt('Access Denied - Password Incorrect, Please Try     
                           Again.','Password');
                    }
                    else if (pass1.toLowerCase() == "letmein") 
                    {
                         alert('You Got it Right!');
                         window.open('protectpage.html');
                         break;
                    } 
                    testV+=1;
              }
              if (pass1.toLowerCase()!="password" & testV ==3) 
              history.go(-1);
              return " ";
    }

我使用了与您相同的代码，问题是第一次因为不知道是什么原因在输入前添加了一个空格。只要确保你没有这个，一切都会好起来的。

如果使用库来渲染UI，则可以使用以下函数：

export function setPasswordToEnter({
  password,
  localStorageKey,
  errorMessage,
}) {
  if (
    !password ||
    (localStorageKey && localStorage.getItem(localStorageKey) === password)
  ) {
    return;
  }
  const input = prompt('Enter the password to continue:');
  if (input !== password) {
    alert(errorMessage || 'Incorrect password');
    throw new Error(errorMessage || 'Incorrect password');
  }
  if (localStorageKey) {
    localStorage.setItem(localStorageKey, input);
  }
}

在渲染函数之前运行：

setPasswordToEnter({
  password: 'password',
  localStorageKey: '[myapp] password to enter'
});

React示例：https://stackblitz.com/edit/password-to-enter-react?file=src/index.js

附言：如果可能的话，你肯定应该从env变量中获取密码。

相关文章：