How to make a login system in Javascript?

Question

I am trying to make a simple login system in javascript. The code should be for multiple users

e.g: user: love pass: cat, user2: mom pass2: love etc.

I need the code to redirect users to certain pages e.g. if username textbox has the text LOVE and pass is cat then user should be redirected to page1.html if username is MOM and pass is love then user should be redirected to page2.html

P.S. I know all security issues that occur when using javascript login but those are for a school project.

I tried:

<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>

But this use another kind of algorithm. If anyone know, please let me know. thanks you!

Answer 1

You should NEVER, EVER do the username/password check in the client side, since anyone could just view the source of your javascript file and find the password pattern or even just bypass it easily. you will ALWAYS want to send the username/password to the server and have the server redirect it for you

Answer 2

yes, I know everything you want to say about me, but let me answer his question

you have to put this

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;

inside your else statement to make it work, BUT DON'T DO LIKE THAT

DEMO

of course, you can verify it on server sending XMLHttpRequest or using POST and PHP or other server-side languge, but here I can suggest to use encryption 1.add this to your head section:

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

and replace password verifing with:

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

and

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

DEMO WITH ENCRYPTION

next step is 2. to obfuscate your code. Your code could look like this

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]);} ;} ;

WORKING DEMO