如何在 Javascript 中制作登录系统？

Question

我正在尝试用 javascript 制作一个简单的登录系统。 代码应该适用于多个用户

例如：user: love pass: cat, user2: mom pass2: love 等等。

我需要将用户重定向到某些页面的代码，例如，如果用户名文本框包含文本 LOVE 并且 pass 是 cat 那么用户应该被重定向到 page1.html 如果用户名是 MOM 并且 pass 是 love 那么用户应该被重定向到 page2.html

PS 我知道使用 javascript 登录时发生的所有安全问题，但这些都是针对学校项目的。

我试过：

<SCRIPT LANGUAGE="JavaScript">

function Getstats()
{
window.status=('Attempting to Login to user area.')

var AccId;
var iName;
AccId = document.iAccInput.iAccID.value
iName = document.iAccInput.iName.value

if (AccId == "" || iName == "")
{
alert('\nERROR\nYou must enter ALL Details,\nto View your statistics.\n');
window.status=('Missing data or Invalid. Check spelling and Ensure Names are in Correct Case.')
}
else
{

var location=(iName + ".html");
this.location.href = location;
window.status=(' Verifying: ' + iName +' Please wait........');
}
}

</SCRIPT>
<hr><FORM NAME="iAccInput">
<CENTER>
<TABLE BORDER="1px" bordercolor="#c0c0c0" cellpadding="5" cellspacing="0">
    <TR>
        <TD ALIGN="RIGHT">
            <p><FONT SIZE="3" FACE="Arial"><B>User Name:</B></FONT>
              </p></td>

        <TD>
            <INPUT TYPE="TEXT" NAME="iName" MAXLENGTH="15">
        </td>
        <TD> &nbsp;
        </td>
    </tr>
    <tr>
        <TD ALIGN="RIGHT">

            <p><FONT SIZE="3" FACE="Arial"><B>Password:</B></FONT>
              </p></TD>
        <td>
            <INPUT NAME="iAccID" MAXLENGTH="15" HEIGHT="50">
        </TD>
        <td align="center">
            <INPUT TYPE="BUTTON" VALUE=" Login " onClick="Getstats()" HEIGHT="40" WIDTH="50"><BR><br>
            <INPUT TYPE="RESET" VALUE=" Reset " onClick="window.status=('RESET: Please enter your USERNAME and ACCOUNT ID.')" WIDTH="50">

        </td>
    </TR>
</TABLE>

但这使用了另一种算法。 如果有人知道，请告诉我。 感谢您！

Answer 1

您永远不应该在客户端检查用户名/密码，因为任何人都可以查看您的 javascript 文件的来源并找到密码模式，甚至可以轻松绕过它。 您总是希望将用户名/密码发送到服务器并让服务器为您重定向

Answer 2

是的，我知道你想说的关于我的一切，但让我回答他的问题

你必须把这个

var location = '';
if (iName=='love' && AccId=='cat') {
    location=("page1.html");
}
else if (iName=='mom' && AccId=='love') {
    location=("page2.html");
}
else alert('Wrong pair');

this.location.href = location;

在您的else语句中使其工作，但不要这样做

演示

当然，您可以在服务器发送 XMLHttpRequest 或使用 POST 和 PHP 或其他服务器端语言来验证它，但在这里我可以建议使用加密 1.将其添加到您的 head 部分：

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>

并将密码验证替换为：

if (iName=='love' && CryptoJS.SHA1(AccId)=='9d989e8d27dc9e0ec3389fc855f142c3d40f0c50')

和

else if (iName=='mom' && CryptoJS.SHA1(AccId)=='9f2feb0f1ef425b292f2f94bc8482494df430413')

加密演示

下一步是 2.混淆你的代码。 您的代码可能如下所示

var _0x51a3=["\x73\x74\x61\x74\x75\x73","\x41\x74\x74\x65\x6D\x70\x74\x69\x6E\x67\x20\x74\x6F\x20\x4C\x6F\x67\x69\x6E\x20\x74\x6F\x20\x75\x73\x65\x72\x20\x61\x72\x65\x61\x2E","\x76\x61\x6C\x75\x65","\x69\x41\x63\x63\x49\x44","\x69\x41\x63\x63\x49\x6E\x70\x75\x74","\x69\x4E\x61\x6D\x65","","\x0A\x45\x52\x52\x4F\x52\x0A\x59\x6F\x75\x20\x6D\x75\x73\x74\x20\x65\x6E\x74\x65\x72\x20\x41\x4C\x4C\x20\x44\x65\x74\x61\x69\x6C\x73\x2C\x0A\x74\x6F\x20\x56\x69\x65\x77\x20\x79\x6F\x75\x72\x20\x73\x74\x61\x74\x69\x73\x74\x69\x63\x73\x2E\x0A","\x4D\x69\x73\x73\x69\x6E\x67\x20\x64\x61\x74\x61\x20\x6F\x72\x20\x49\x6E\x76\x61\x6C\x69\x64\x2E\x20\x43\x68\x65\x63\x6B\x20\x73\x70\x65\x6C\x6C\x69\x6E\x67\x20\x61\x6E\x64\x20\x45\x6E\x73\x75\x72\x65\x20\x4E\x61\x6D\x65\x73\x20\x61\x72\x65\x20\x69\x6E\x20\x43\x6F\x72\x72\x65\x63\x74\x20\x43\x61\x73\x65\x2E","\x6C\x6F\x76\x65","\x39\x64\x39\x38\x39\x65\x38\x64\x32\x37\x64\x63\x39\x65\x30\x65\x63\x33\x33\x38\x39\x66\x63\x38\x35\x35\x66\x31\x34\x32\x63\x33\x64\x34\x30\x66\x30\x63\x35\x30","\x70\x61\x67\x65\x31\x2E\x68\x74\x6D\x6C","\x6D\x6F\x6D","\x39\x66\x32\x66\x65\x62\x30\x66\x31\x65\x66\x34\x32\x35\x62\x32\x39\x32\x66\x32\x66\x39\x34\x62\x63\x38\x34\x38\x32\x34\x39\x34\x64\x66\x34\x33\x30\x34\x31\x33","\x70\x61\x67\x65\x32\x2E\x68\x74\x6D\x6C","\x57\x72\x6F\x6E\x67\x20\x70\x61\x69\x72","\x20\x56\x65\x72\x69\x66\x79\x69\x6E\x67\x3A\x20","\x20\x50\x6C\x65\x61\x73\x65\x20\x77\x61\x69\x74\x2E\x2E\x2E\x2E\x2E\x2E\x2E\x2E"];function Getstats(){window[_0x51a3[0]]=(_0x51a3[1]);var _0xfcfax2;var _0xfcfax3;_0xfcfax2=document[_0x51a3[4]][_0x51a3[3]][_0x51a3[2]];_0xfcfax3=document[_0x51a3[4]][_0x51a3[5]][_0x51a3[2]];if(_0xfcfax2==_0x51a3[6]||_0xfcfax3==_0x51a3[6]){alert(_0x51a3[7]);window[_0x51a3[0]]=(_0x51a3[8]);} else {var _0xfcfax4=_0x51a3[6];if(_0xfcfax3==_0x51a3[9]&&CryptoJS.SHA1(_0xfcfax2)==_0x51a3[10]){_0xfcfax4=(_0x51a3[11]);alert(_0xfcfax4);} else {if(_0xfcfax3==_0x51a3[12]&&CryptoJS.SHA1(_0xfcfax2)==_0x51a3[13]){_0xfcfax4=(_0x51a3[14]);alert(_0xfcfax4);} else {alert(_0x51a3[15]);} ;} ;window[_0x51a3[0]]=(_0x51a3[16]+_0xfcfax3+_0x51a3[17]);} ;} ;

工作演示

Answer 3

尽管不建议使用 javascript 制作登录系统，但它可以相当安全地完成（因此用户无法直接看到密码），您可以制作一个 javascript 加载器，从一个 javascript 文件加载一堆变量，然后在主 javascript 文件中使用它并使用加密的 cookie 来存储登录变量和使用 Essentials.js（一个 javascript 库，它使一切变得更简单，包括会话和 cookiestorage），最后再次清除加载器，然后清除整个页面的 javascript / javascript 连接没有留下密码文件链接的痕迹。

这可以通过多种方式完成，最简单也可能是最安全的方式是这样的。

<div id='loader'></div>

<div id='scripts'>
<script>

document.getElementById("loader").innerHTML = "<script src='passwords.js'></script>";

if(passwordinput == user1pass) {
  // This runs when the password and username match up with the variables in the loaded script
}
else if(passwordinput == user2pass) {
  //Etc..
}
else {
  console.log("User does not exist");
}

document.getElementById("loader").innerHTML = "";
document.getElementById("scripts").innerHTML = "";
</script>
</div>

您甚至可以将密码存储在文档本身中，这可能更安全，但更难注册新人。 我还没有测试这是否有效，但我认为它会。 此外，我建议您仅在将密钥作为 get 参数提供时才让 passwords.js 文件显示自身，这真的很容易做到，我认为您可以自己解决这个问题。 此外，我建议您对密码进行哈希处理，以在其上添加一层薄薄的保护，这也很容易做到，我认为您也可以自己解决。

我希望这个答案能帮助你们中一些有同样问题的访问者。