Password Protect a Page

Posted by RobElliott on 20 Dec 2010 20:21, last edited by leiger on 31 May 2011 15:19

Tags:

rating: +7+x

What we are trying to achieve

We often get asked whether it is possible to password protect a page or a category. Using Wikidot syntax this is not currently possible. You can of course create private categories and we also have the SUO snippet. But there might be times when you want some visitors only to view a page or you want to hide a page from a casual visitor and private categories or the SUO are not possible. In this case it is possible to a achieve a very basic password system using an html codeblock and javascript.

Warning!

warning.png

If a user knows the pagename you are trying to protect then he or she will be able to navigate directly to it from their browser address bar. So you might want to consider setting the permissions in Site Manager for your system category so that only admins can view pages in the category. This will prevent someone going to the protected page from system:list-all-pages or system:recent-changes. It is also possible to get to the password via the browser's View Source option.

Test It

For this test the username is guest. The password is inverness. If the login is correct you will be taken to the protected page. There is a link on that page to return to this page.

How to do this

On a public page (not the page you are protecting) add an html codeblock and the code shown below.

You should change the
if (username=="guest" && password=="inverness") {
to whatever username and password you wish to use on your site.

You should also change the button text from "Click to login to Protected Page" to whatever text is appropriate for you.

You can limit the access to just specific members of your site by adding extra usernames, and also different passwords for each user if necessary.

[[html]]
<head>
<script language="javascript">

function LogIn(){
loggedin=false;
username="";
password="";
username=prompt("Username:","");
username=username.toLowerCase();
password=prompt("Password:","");
password=password.toLowerCase();

// Add usernames and password(s)-->
if (username=="guest" && password=="inverness") {
loggedin=true;
window.open('/protected:page');
}

// if you want to name specific users add the following code for each one, for example-->
if (username=="robelliott" && password=="inverness") {
loggedin=true;
window.open('/protected:page');
}

// If login incorrect -->
if (loggedin==false) {
alert("Sorry, invalid login");
}
}

</script>

</head>

<body>
<form><input type=button value="Click to login to Protected Page" onClick="LogIn()"></form>
</body>
[[/html]]

Comment

Do please note that this provides only very basic protection but might be useful when you can't use private categories and want to stop casual visitors (and site members if necessary) from viewing a page.

Author

RobElliottRobElliott. Please visit his/her userPage.

Rate this solution

If you think this solution is useful, please increase the rating.

rating: +7+x

Another way: Password Verification Server

James Kanjo has build a "Password Verification Server" Site (Application), which does the same , but in a more "secure" way:

What is the first name of user "Gabrys" ( in lower leters)?
(if you know it - key it in and after the success mesage you will be transferred to the protected:page)

Add a New Comment

Other(!) HowTos posted by RobElliott

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.