Tips and TricksWidgets

Password protected pages without MobileMe

One of the ‘perks’ of having a mobileMe account apart from being able to put comments on your iWeb blog is the ability to password protect some or all of your iWeb pages. Okay so the password protection isn’t ‘super secure’ but if you want that you will have to get yourself a HTTPS site.

If you want a basic password security on your iWeb site, perhaps to protect some family photos you don’t want the whole world to see then this is still achievable, with the help of a little javascript.

This iWeb tutorial does involve a little bit of editing of the code of your iWeb site, but not very much. In fact all you have to do is paste in some code and that is it.

One further restriction is the password. You can only have one, which is set by you. Once again we are not talking the type of security you would expect from your on-line bank account, just something that would deter the casual visitor to your site.

In order to get this whole process working you will need an iWeb site with at least 2 pages. The first should have a link to the second page (this can be using the default nav-bar or a normal text link). What we will then do is add a bit of code the second page which says (in a nutshell) that page 2 is protected and a user must enter a password first before they can view it. If the password is correct then the visitor will be taken to page 2, if not then they will be left on page 1 (or any page that you nominate).

Sounds like the sort of thing that you need? Well let’s crack on. You will need your site either published to a folder or on a MobileMe server.

In Finder navigate (either on your hard-drive or iDisk) to the page you want to protect and open it in your favorite HTML editor (TextWrangler, BBEdit, Dashcode etc….)

You will now need to scroll down to the bottom of the ‘Head’ section of the page indicated by the </head> bit of code.

Now all you have to do is paste in the code that you will find below above the end of the ‘Head’ section and, if you so wish, edit it to fit in with your iWeb site.

There are various parts of the code that you can edit; the password of course, as well as the message that appears when a user tries to access the page, the message that appears when the password is successful and also the location of a ‘fail page’ which can either be the same page they started on or as I mentioned earlier a completely different page altogether.

And here is the code, I’ve highlighted the changeable bits in red.

<SCRIPT language="JavaScript">
<!--hide
var password;
var pass1="iloveiweb";
password=prompt('This page is protected. Please enter the password to view this page!',' ');
if (password==pass1)
alert('The Password is correct! Please click OK to enter the gallery!');
else
{
window.location="http://www.yourfailpage.html";
}
//-->
</SCRIPT>

And this is what it will look like when someone visits your site and clicks on the link to the protected page:

and when they enter the correct password they will then get this message:

That’s all there is to it. If you have published to a folder just upload your site via FTP and if you have edited your site on your iDisk then just save the changes and you’re done.

And there we have it. Password protected web-sites without MobileMe. Enjoy.

You may also like

31 Comments

  1. […] original here:  Password protect iWeb pages without MobileMe | All About iWeb By admin | category: mobile me | tags: bowden, password-protect, tutorial-explaining | […]

  2. This is a very weak way to protect your pages, just by taking a look at your site with firebug, your able to see the pass right out of the html file. I can recommend using bravenet, a very secure service and easy to use as well. All you need is to ad a code snippet to your site.

    Kind Regards

  3. Mikkel,

    It is indeed a basic way of password protection, I did try to stress this in the post. It’s not something you would use to hide your bank details but it adequate enough to put off a casual site visitor.

    Tim

    1. Tim,

      I wanted to password protect a site that was private and very temporary. I thought it would be just as good to put a weakly protected very hidden site up for a couple days as to go through a great deal of trouble to make it stronger against a fairly week threat. It worked great! Thanks so much.

      Linda

  4. Sorry about that Tim, I must have missed that line. This is indeed handy to the normal user. Not to advertise to much, the good thing about bravenet, is that it gives you the opportunity to design and style your login page as wanted. Which can be really handy in projects where you want a personal feel and dont even have to publish to a folder.

    Kind regards
    Mikkel

  5. You can also use your hosting service to password a page from your site. I set a directory to password protect with a login name and password. If someone tries to access the page from anywhere, the page directory pops up the login window.

    1. Hi Kien,

      how do you set a password in a hosting directory folder and is it for the entire site or page only?

      Thanks, Kien

    2. HI Kerry,

      sorry for the mistake typing below as the email and question is directed to you.

  6. Hello,

    I have found very useful ideas from this website- thanks!

    My question is: How you can see results in your iweb after you have edited already published webpages by using the HTML editor ?

    Firs I made my webpage by using iweb. Then I added the password Javascript to my published (in folder) webpage. I used the ThexWrangler HTML editor. I saved the changes. Now when I try to look results in iweb there is no any sing of password thing. Does the iweb code the iweb pages every time to HTML when you save it and published it to folder?

    Does this make any sense to you?

    Thanks.

    1. Hexen,

      Once you have made the changes in your HTML editor you simply need to save the work you have done and then view the same page in your browser. If you double click on it, it should open in Safari (or whatever you have set as a default browser) then you can test out your code. Don’t open it back up in iWeb as you wont see the changes you made.

      Tim

  7. Wow that (reply) was fast.

    I did what you said and it worked- great. Ok now I know better how things work.
    Firs I make webpage using iweb. When you published the pages, the iweb will code the webpages to HTML. Then you can fix or add more features the pages by using some HTML editor. You can add for example password protected page like you have sown here. Then you save it. After saving it you can look the changes by using the safari browser. iweb does not “read” the fixed HTML so that why you cant see it.

    Thanks again and I will keep my eye on your pages;)

  8. […] Follow this link: Password protect iWeb pages without MobileMe | All About iWeb […]

  9. Hi Tim:

    Your password protection process is perfect for what I want – a private photo area for family in a public site. I’ve followed all your steps but am stumbling at the last point…where you say “That’s all there is to it. If you have published to a folder just upload your site via FTP and if you have edited your site on your iDisk then just save the changes and you’re done.”

    I’ve published my site to a folder, used textwrangler to edit in the changes and then saved them, then I publish the site from iWeb using the “Publish Site Changes” function and set to FTP, but nothing happens. I suspect I’m supposed to publish the saved site using FTP somehow differently but am stuck. Any ideas?

    If you are looking at my site, it is the “Whanau” page that I am trying to protect. Whanau is Maori for family.

    Thanks heaps for all you help and great work with this site – I love it.

    Stephen

    1. Stephen,

      Once you have made the changes to your site using TextWrangler don’t open it again in iWeb. This will overwrite any changes you have made. Instead download an FTP application (such as the free CyberDuck) and publish your site that way.

      Incidentally CyberDuck allows selective publishing to your server so even though you may make changes to your site in the future you only have to publish to a folder then upload the changed/new pages rather than the whole site.

      I hope that helps,

      Tim

  10. This worked for me quite nicely for the main page of my blog. No need to enter it into a second/third/… page of the site.

    I just saved the code snippet as a separate file and will update the *.html code of the main site every time there is a new entry (might not even be necessary if I publish site changes only, which should only include the New Entries)

    Thanks for the code 🙂

  11. Nice work.
    How can I add a second password?
    Then people could type one of the two passwords to enter?

    I’ve been changing the code but It’s not working.

    Regards

  12. Hey Hey…
    Wanted to say thanks for the code…it was very helpful.
    I am having a problem with getting the password to work on a PC. Specifically explorer.
    The users just get sent back to the main page without ever getting an option to put in a password…
    what should I do?
    Thanks
    Frank

  13. Perfect for the job at hand, many many thanks.

  14. If I make changes daily and publish them then upload. I have to keep putting the password code in again??? any way of doing it without having to textwrangle the code daily. Cheers Ian

  15. Ian, I think the best way is to use the iWeb SEO Tool because you can save all the code you add to a page so that the next time you want to add it all it takes is a few clicks.

  16. Thanks Tim..It worked well for me in Firefox and Safari. But my client has IE and it doesn’t work???Do I have to tell her to change all her settings as I don’t think their IT department would approve???? Awesome site by the way, thanks

  17. Hi there – great site, found it googling “password for iweb”

    I´ve tried this and it works perfect with safari – but it doesn´t work with IE.

    Any suggestions ??

  18. Really good tutorial
    Thank you very much!

  19. how do you get to the code?

  20. hello, i cant find where it says

  21. This works perfectly in Safari or Chrome, but does not work in IE, in IE, it goes directly to my wrong password page and never asks for a password. How do I fix that?

  22. this is great – easy to install and work with but ooops – I have more than two pages and they system wants me to re-enter the password every time I link back to the main or (second) page – what do I do now?

    thanks for any suggestions

  23. I followed your instructions and it worked great when I pull up my website on my Imac. When I pull it up on an Iphone or iPad, the “documents” page that I password protected can’t be accessed. Can you help with this? Thanks!

  24. […] Password protect iWeb pages without … – Now all you have to do is paste in the code that you will find below above the end … web-sites without MobileMe … MobileMe | All About iWeb … […]

  25. […] Password protected pages without … – By Tim Bowden – All About iWeb – An easy to follow iWeb tutorial explaining how to password protect your iWeb site without paying for MobileMe. […]

Leave a Reply to Ianwilson Cancel reply

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