HomeFeaturedHow ToHow to encrypt password on client side using JavaScript.

How to encrypt password on client side using JavaScript.

This post is going to teach and guide you on how to encrypt password on client side using JavaScript and note that password encryption is very important and necessary because the translation of login data into a hidden code is known as password encryption  and reading an encrypted password necessitates decryption, industry-standard encryption is the most reliable way to achieve data protection.

We hope that this post will help you to gain some knowledge on how to encrypt password on client side using JavaScript and don’t forget to check on our previous posts How to activate file_get_contents in php.ini and we think that it will be useful to you too.

The term cryptography comes from the Greek language. The words “Kryptos” and “Graphein” mean “encrypted” and “word,” respectively.

Guide on How to encrypt password on client side using JavaScript.

In Password Encryption, two JavaScript’s are required for client-side encryption and this JavaScript’s are the below JavaScript Codes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>

After calling on the above JavaScript codes, then you can now go ahead and create a form for your password.

<form class="form-signin" method="post" name="signin" id="signin">
<input type="password"  name="password" id="password" placeholder="Password" id="password" value=""  />
<input type="hidden" name="hide" id="hide" />
<div style="color:red" id="err"></div>
<input type="submit" name="login"  type="submit" onclick="return encrypt()" value="Submit"  >
</form>

I developed one password field and one hidden field in the form code above. The value of the real password is stored in a hidden field.

We will now to ahead and create a JavaScript code for password encryption.

<script>
function encrypt()
{
var pass=document.getElementById('password').value;
var hide=document.getElementById('hide').value;
if(pass=="")
{
document.getElementById('err').innerHTML='Error:Password is missing';
return false;
}
else
{
document.getElementById("hide").value = document.getElementById("password").value;
var hash = CryptoJS.MD5(pass);
document.getElementById('password').value=hash;
return true;
}
}
</script>

In the JavaScript above, I developed a function called encrypt (). This feature is called when the submit button is clicked.

This is the complete code we wrote during this tutorial on how to encrypt password on client side using JavaScript.

<html>
<head>
<title>Encrypt Password on client Side</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script>
     function encrypt()
	 {
        var pass=document.getElementById('password').value;
		var hide=document.getElementById('hide').value;
		if(pass=="")
		{
		   document.getElementById('err').innerHTML='Error:Password is missing';
		   return false;
		}
		else
		{
		   document.getElementById("hide").value = document.getElementById("password").value;
		   var hash = CryptoJS.MD5(pass);
		   document.getElementById('password').value=hash;
		  return true;
		}
	}
</script>
</head>
<body>
<form class="form-signin" method="post" name="signin" id="signin">
<input type="password"  name="password" id="password" placeholder="Password" id="password" value=""  />
<input type="hidden" name="hide" id="hide" />
<div style="color:red" id="err"></div>
<input type="submit" name="login"  type="submit" onclick="return encrypt()" value="LOGIN"  >
 </form>
</body>
</html>

Thanks for your time.

Please share, follow and like us:
error0
fb-share-icon20
Tweet 20
fb-share-icon20
Valentine Kaluhttps://veecyber.com
Football Lover, Manchester United Fan, Web developer, Blogger, Digital Marketer, and a professional PHP, JavaScripts, HTML & CSS Coder. With WordPress Development/Designing Experience. Acting at the sweet spot between aesthetics and intellectual purity to express ideas through design & development. Concept is the foundation of everything else.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments

Please share, follow and like us:
error0
fb-share-icon20
Tweet 20
fb-share-icon20
Translate »
0
    0
    Your Cart
    Your cart is emptyReturn to Shop