How to add a simple login to a web page

Do you need to hide or protect content on a web page. Here is a simple, but not 100% secure way to add a log on.

If the images are under copyright you might have a point in keeping the cards somewhat close. Here you can add a .gitignore file (you can choose to ignore a file or folder before you push). In that case you could share the code – but keep the images to yourself.

First hide everything: https://www.sitepoint.com/hide-elements-in-css/ 

Then add a log on to the web page. This can be done in JavaScript. Just add an input field, and select a codeword, say “cheesecake”. Now encrypt the word by an online service such as https://www.md5online.org/md5-encrypt.html 

Then you’ll get this string: 5ac5355b84894ede056ab81b324c4675

In the CSS add a style that will hide everything. You can do this by hiding the <body> element. You can do this via JavaScript also.

You can use prompt in order to get the password from the user. https://www.w3schools.com/jsref/met_win_prompt.asp

Now you can compare the input from the form with the string – and display what’s on the webpage, e.g. via a window.open() 

if (myCode == "5ac5355b84894ede056ab81b324c4675"){

      // here: display the page content

           body.style.display = "block"

} else {

          // error message

          document.write("No access")

}

Probably your user don’t want to log in every time. Here you can save a true for logged in in local storage / session storage.

Protecting a Web page in .htacces

Now the solution above is not 100% secure. A better way to protect your pages is by .htaccess. Here you can follow my tutorial on YouTube.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close