What if you want to login to a website by filling Username/Email and Password automatically?
Well, there is a simple solution to that. This solution works for large number of web sites which have a login and password field contained within a form.
Here is a simple Login page (Crunchify-LoginPage.html) in which I have to provide Email and Password. Link.
In order for you to fill above fields automatically just create one sample file Crunchify.html file on your Desktop or convenient location and put below content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <title>Crunchify Login Page</title> <script> function loginForm() { document.myform.submit(); document.myform.action = "https://cdn.crunchify.com/wp-content/uploads/code/Crunchify-LoginPage.html"; } </script> <style type="text/css"> body { background-image: url('https://crunchify.com/bg.png'); } </style> </head> <body onload="loginForm()"> <form action="https://cdn.crunchify.com/wp-content/uploads/code/success.html" name="myform" method="post"> <input type="text" name="email" value="myemail@crunchify.com"> <input type="password" name="password" value="mypassw@rd"> <input type="submit" value="Login"> </form> </body> </html> |
And that’s it. Just double click on above file and you are all set.
Here is what will happen internally:
- When you open
Crunchify.htmlfile it will internally open your dedicated pageCrunchify-LoginPage.html - Internally it will pass your email and password provided in Crunchify.html file
- Once submitted you will be proceeded to
success.htmlpage
This is very basic HTML tip but sometime it saves big time for repeated login activity.
FYI: Here is a Crunchify-LoginPage.html page source code, which is my frequently used login page for this example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Crunchify - Login Form Example</title> <style type="text/css"> body { background-image: url('https://crunchify.com/bg.png'); } </style> </head> <body> <div align="center"> <section class="container"> <div class="login"> <h1>Crunchify Web App - Automatic HTML Login Demo Page</h1> <form name="myform" action="https://cdn.crunchify.com/wp-content/uploads/code/success.html"> <p> <input type="text" name="email" value="" placeholder="Email"> </p> <p> <input type="password" name="password" value="" placeholder="Password"> </p> <p class="submit"> <input type="submit" name="submit" value="Login"> </p> </form> </div> </section> <section class="about"> <p class="about-author"> © 2012–2016 <a href="https://crunchify.com" target="_blank">Crunchify.com</a> </section> </div> </body> </html> |
Hello
Great article. Many thanks.
Seemed to have got it working but I want to display the landing page on the external website in an iframe? Can this be done? Basically I don’t want a user to sign in twice so from their site I want to automatically log them in perhaps also pass in some form of an authentication token to make it extra secure and then once successfully logged in, display the contents of the external site in the iframe, Is this possible?
Thanks!
The code above works perfectly!
But I still face a problem, the site on which i was trying this popped a message saying username and password correct … redirecting to dashboard…..
What should i do next???
Hi there – didn’t get your question clearly. Could you please explain in details? May be with screenshot?
Hi
what if I want to click a button after login. is that possible.
thanks
Hi Mohamed – Is there any reason you would like to have manual action after filling username and password automatically?
// Try the script below…adjusted from the original…this was successful for me
Crunchify Login
function loginForm() {
document.myform.action = “https://crunchify.com/wp-content/uploads/code/success.html”;
document.myform.submit();
}
Hi MJ – thanks for suggestion. Above wont work as you have success.html in form action 🙂
Between – I’ve just updated above code and now it’s working. Could you please help verify at your end?
I’m using this in our intranet, then this script is loaded to automatic log in the user in another intranet site. Then on the same page there is an iframe which shows the important site of the page.
The problem is after the script submits the form it directs me to the page on which the form is submitted. Is it possible to stay on the original site and ‘submit the form in background’ ?
I hope you understand what I mean 😀
Hi Pascal. I need to take a look if it’s possible using simple HTML. You could obviously use AJAX to achieve same functionality.