How to make HTML or JAVASCRIPT login authentication page

Question

I am from electronics, so I do not have good knowledge in the development of web pages. I am doing an ethernet project and for this I need to make a web page, but before this web page I also need to make a login authentication web page. I somehow managed to do this using HTML JAVASCRIPT, but the problem is that everyone can see the user's password while viewing the source of the page.

I have a complicated authentication procedure. I have basic knowledge of HTML and JAVASCRIPT, but they are ready to learn. All I can find on Google are login templates, but I don’t even know how to use them.

Can someone give me an example or point me to some good links.

Answer 1

HTML and Javascript are interpreted on the client side. For login purposes, this is server-side code that is usually used to verify credentials — simply because the fact that you already know about — with a simple client-side implementation, you can see the credentials in the server-side source code the side is also easier to work, as soon as you understand it, it is more flexible for further development, it is safer and really used everywhere for this task.

It is a good idea to use PHP, ASP, Ruby (or any other server language ) for this. If you do not want this, you need to make it so that the user can read the credentials from the source code.

For this, you can use various methods, such as cryptography or obfuscation . Cryptography is highly recommended for obfuscation, as this proves the added security of your application. Obfuscation basically means that you change the source code in such a way that it is difficult to read - you add functions that encode strings, so that your “password” cannot be seen at a glance. However, obfuscation can always be bypassed, and usually pretty easy with good debugging tools.

So let go of cryptography. Here you are looking for one-way hash functions . You have a choice - MD5, SHA1, SHA256, ... each provides a different level of security. The implementation of SHA256 in Javascript is an example that you can use. There are many other libraries and examples for this, so just use Google and find the one you like.

Now what to do about it? Say you have a sha256 () function that takes a string and returns a hash as a string. For each user and your password, you set the SHA256 hash of the string "user + password".

Say you want your username to be “Pedro” and the password for this account is “MyPassword”.

You set the hash "PedroMyPassword" - for example, with online hashing . You can see that its SHA256 hash

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21 

This hash is what you injected into your Javascript code.

When the user enters his username and password, you call the sha256 function on "username + password" and you compare it with a predefined hash.

Please note that you need to choose a really strong password, otherwise some attacks (like a dictionary attack) will be easy to use to break the hash.

The problem is that you did not indicate what you want to do next. For example, you can redirect authenticated users to the next page, but here you have the same problem again - if you redirect in Javascript to "secondpage.html" in your code, someone can simply skip authentication and go to this second page.

What you can do in this case is that you name the second page as

 40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html 

i.e. your user's hash + skip line. In this option, you do not put the hash in the code at all. The web server will simply return a 404 error for all users who are not authenticated. For example, if someone tries to use “Pedro” with “123456” as a password, SHA256 will

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517

and if you redirect them to

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html

it will not exist because your second page file is called

 40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html 

You will need to create these two pages for each user / pass combination. Then you could put a simple redirect code on the real second page.

But make sure you use the HTTPS protocol, otherwise the pages will go through an unencrypted wire ...

All this will work, but nonetheless, I highly recommend that you consider the server path.

Answer 2

In my previous answer, I used client-side technologies, so the username and password were not secure and hidden if we check the source of the page.

Now we will use server technology, for this you need a web server package such as WAMP, XAMPP, etc.

Download and install one of these packages (if you have one of these two, then good and good)

I am using XAMPP, so I will explain using XAMPP.

If you have successfully downloaded XAMPP, then locate the htdocs folder in the XAMPP folder. Mine is "C: \ xampp \ htdocs"

copy the code below and create a new php file and save this file as login.php in the htdocs directory.

Here is the PHP code.

 <?php $usr="root"; $pwd="root"; if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password']) && !empty($_POST['password']) ){ $username=$_POST['username']; $password=$_POST['password']; if(($username==$usr) && ($password==$pwd) ){ echo '<br>login successfull'; }else{ echo '<br>login unsuccessfull'; } }else{ echo "<br>Connot be left empty!"; } ?> 

OK!! Now create a simple HTML page containing the login form and save it as login.html

Here is the HTML code

 <html> <head> <title>Login</title> </head> <body> <form action="login.php" method="POST" align="center"> <br> Username:<input type="text" name="username"><br><br><br> Password :<input type="text" name="password"><br><br> <input type="Submit" value="Submit"> </form> </body> </html> 

Now, select your browser-> Enter http: //localhost/login.html and run Insert the username and password as root .

I assume that you have basic php knowledge, if they do not go through it, it is very simple, and also read HTTP requests

• Get
• Post

Answer 3

 <html> <head> <title>Login paget</title> </head> <script type="text/javascript"> function display(form){ if (form.username.value=="root") { if (form.password.value=="root") { location="page2.html" } else { alert("Invalid Password") } } else { alert("Invalid Username") } } </script> <body > <form > <input type="text" name="username" /><br><br> <input type="password" name="password"/><br><br> <input type="button" value="Login" onClick="display(this.form)"/> </form> </body> </html> 

Hi, I created a login page for you using html and Javascript. Username and password root . You see, if you enter the correct username and password, then the page goes to page2.html and this will show you

This page was not found.

ERR_FILE_NOT_FOUND

so you need to replace page2.html with the next name of the next page.

Answer 4

You really don't have a reliable authentication system using only JavaScript and HTML.

I would suggest Basic HTTP authentication on your server, since it is much more secure (not perfect by any means, but at least uses the standard server-side access control method).

If you need to implement something in JavaScript, you can only make a password scheme based on the name of the hidden directory. Something like the following (note that this has not been verified, so some settings will be required):

(The code is borrowed and adapted from this question )

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function() { var url = "some_url"; $.ajax(url, { if (statusCode == 200) { document.location.href = url; } else { alert('Incorrect password') } } }); }); </script> <input type="password" /><a href="javascript:void(0)">Login</a> 

The code must be completed so that the function is called when the button is pressed. Therefore, if the password is foo, you set up a directory on your site called foo , and if JavaScript jQuery detects that the password you entered matches the name of the directory (for example, /foo/ ), then the user is redirected there. Therefore, you must create /foo/index.html to make sure that the user is logged into the session.

Please note that this is the safest thing that you can only use with JavaScript and HTML, and it suffers from the following vulnerabilities.

• This requires the URL to be kept secret, although this may be skipped by the abstract title, browser history, and server / proxy logs.
• As soon as the user is logged in, they are always logged in (they could add bookmarks to the pages)
• There is no easy way to reset a password.
• There is only one password.
• Anyone who has access to view files on the server can view the directory structure and find out the password.
• URL may be skipped by analytics.
• It is assumed that the directory browsing on your server is disabled (or there is a default page in the parent directory of the private page).

In any case, always secure your server with TLS / SSL. My recommendation is to properly create a user authentication system using the OWASP tip. The above only shows what is achievable in basic HTML (not so much). However, this is better than looking at the password in client files.

Answer 5

just try this code -

 function validate(){ var username = document.getElementById("username").value; var password = document.getElementById("password").value; if ( username == "username1" && password == "password1"){ alert ("Login successfully"); } else{ alert("Invalid username or password"); } return false; } 

 <html> <head> <title>Javascript Login Form Validation</title> <!-- Include JS File Here --> <script src="js/login.js"></script> </head> <body> <div class="container"> <form id="form_id" method="post" name="myform"> <label>User Name :</label> <input type="text" name="username" id="username"/> <label>Password :</label> <input type="password" name="password" id="password"/> <input type="button" value="Login" id="submit" onclick="validate()"/> </form> </div> </body> </html>