28 Dec 2009

Password protected pages without MobileMe

29 Comments Tips and Tricks, Widgets

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.

Tags: , , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

29 Responses to “Password protected pages without MobileMe”

  1. Reply Password protect iWeb pages without MobileMe | All About iWeb Mobile CHN says:

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

  2. Reply Mikkel says:

    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. Reply All About iWeb says:

    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

    • Reply Linda says:

      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. Reply Mikkel says:

    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. Reply Kerry says:

    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.

    • Reply kien says:

      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

    • Reply kien says:

      HI Kerry,

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

  6. Reply Hexen says:

    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.

    • Reply All About iWeb says:

      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. Reply Hexen says:

    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. Reply Password protect iWeb pages without MobileMe | All About iWeb | Mac Affinity says:

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

  9. Reply Stephen Jones says:

    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

    • Reply All About iWeb says:

      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. Reply hey says:

    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. Reply Pedro says:

    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. Reply Franklin D says:

    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. Reply Perfect says:

    Perfect for the job at hand, many many thanks.

  14. Reply Ianwilson says:

    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. Reply Tim Bowden says:

    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. Reply Ianwilson says:

    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. Reply Thomas says:

    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. Reply Chrisian says:

    Really good tutorial
    Thank you very much!

  19. Reply ersan says:

    how do you get to the code?

  20. Reply ersan says:

    hello, i cant find where it says

  21. Reply ersan says:

    head

  22. Reply Matt says:

    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?

  23. Reply j Guard says:

    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

  24. Reply Rachelle says:

    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!

Leave a Reply