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!