How to Perform Age Verification with jQuery and Cookies (mmm, cookies)

Brian Nelson — Fri, 03 Sep 2010 18:20:50 +0000

End of the line, kiddies.

If you’re a freelance developer, chances are good that you’ll encounter a situation where you’ll have to make some content “off limits” to the kids. In most cases, such as with alcohol-related material, this is required by law. So, how do you do it? Well, if you’re using jQuery, the answer is “easily.”

The first thing that may jump to your mind is that Javascript is not fail-safe. This is true; all a user needs to do is disable Javascript in his or her browser, and any sort of Javascript-based security measure is rendered useless. Luckily, legal requirements for online age verification recognize this and acknowledge that it is entirely (at least for now) dependent on the honor of the user. However, if your particular situation requires a verification system that is a bit more robust, consider using sessions which are supported in both ASP and PHP.

In this example, I will illustrate a scenario where the user is prompted with the question “Are you at least 18 years of age?” Of course, this tutorial can be extended to prompt the user for specific birth dates. For this tutorial, you will need:

jQuery: http://docs.jquery.com/Downloading_jQuery
jQuery Cookies: http://plugins.jquery.com/project/Cookie

I’m going to let you download those as I go grab a coffee. Are we ready? OK, let’s roll.

Before anything else, we’ll need to create two pages: one will be the “verification” page while the other will represent every page that has an age restriction in place. In both pages we’ll need to include a relative link to the two jQuery files that will be handling the cookies. Look at the snippet below and copy/paste it within the region of each page.

[code lang=”xml”]

[/code]

As with most jQuery solutions, you’ll need to add a

[/code]

Let’s start off with the “content” pages that are presumably age restricted. The script is actually quite simple. If a cookie is set that indicates the viewer is of legal age, nothing happens. Otherwise, the viewer is redirected to a “verification” page, and the intended page is stored as a URL variable. Nothing too complicated there.

[code lang=”javascript”]

if ($.cookie(‘is_legal’) == "yes") {
//legal!
} else {
document.location = "http://www.domain.com/[pathtofile]/verify.php?redirect=http://";
}

[/code]

Let’s move on to the “verification” page. In this example, the user will be presented a “yes/no” question about their age. If they are of appropriate age, they click “yes” and are redirected to the page they intended to view. If they click “no”, they are redirected to a Google Images search for “puppies.” Isn’t that cute?

The trick here is that the “verification” page will need to be able to tell which page the user is intending to view. In some cases, the user may be clicking a link to a blog post, and then the age verification screen rudely interrupts his or her experience. When users verify their age, they want to be redirected back to the page they wanted to see, not just the homepage! So how do we accomplish this?

[code lang=”php”]

$(‘#accept-btn’).click(function(){
$.cookie(‘is_legal’, ‘yes’, { expires: 1, path: ‘/’, domain: ‘domain.com’ });

document.location = "http://www.domain.com";

document.location = "";

});

[/code]

We’ve set an ID to the “yes” button, which evokes some processing logic when it is clicked. Immediately a cookie is set named “is_legal” and the value “yes” is assigned to it. The other parameters dictate that the cookie will expire in 1 day, will be stored locally in the root of the cookie folder on the user’s machine, and is valid for the entire domain. For a more thorough explanation of jQuery Cookie’s parameters, check out the documentation.

You may be thinking “Hey, what’s the deal with the PHP stuff?” Well, PHP is very good at extracting URL variables, which we set on the “content” page. If you don’t have access to PHP on your server, you can do the same thing with Javascript, it’s just a little more involved (see a snippet). Our script determines if a redirect location was set and sends the user to the appropriate page.

That’s it—follow these steps and you’ll be keeping kids out of your age-restricted pages in no time. Well, that probably isn’t true, but you WILL be abiding by the law as a website administrator. For a look at this script in action, it is the current implementation at edwinton.com.

Happy programming!

The post How to Perform Age Verification with jQuery and Cookies (mmm, cookies) first appeared on Techerator.

Fix: Firefox Won’t Save Cookies or Auto-Logins

Evan Wondrasek — Tue, 02 Jun 2009 18:04:43 +0000

Update 06-16-09: Mozilla has announced in Firefox 3.0.11 that “Several issues were reported with the internal database, SQLite, which have now been fixed by upgrading to a newer version.” So if this guide works for you, be sure to upgrade to the newest version of Firefox.

It can strike when you least expect it – Firefox amnesia. The symptom: Firefox no longer keeps you automatically logged in to sites where you have selected the “remember me” option. I recently had this problem, and although Firefox would maintain my logins during my current session, they would immediately be forgotten when I closed the browser. Typically, this problem is related to browser cookies, which are small data files stored on your computer by websites to help identify you and store information.

Before you start, it is important that you verify that Firefox’s forgetfulness is not caused by a simpler problem. First, you should clear your current cookies, which can be done by going to Tools –> Clear Private Data and checking the Cookies box. While you’re in there, you could clear your browser’s cache and authenticated sessions as well (just in to be safe).

Next, you should temporarily disable any add-ons you are currently using to ensure they are not causing conflicts with your browser’s operation. You can systematically disable them one at a time via Tools –> Add-ons, or you can disable them all at once by running Firefox in Safe Mode and choosing to disable all add-ons.

To disable all add-ons at once, go to Start –> Mozilla Firefox –> Mozilla Firefox (Safe Mode) and check the “Disable all add-ons” box. You could also check the “Reset all user preferences to Firefox defaults” to make sure it isn’t a problem with your browser settings, but be warned: this will remove any custom settings you have made (such as your browser’s start page).

If the methods above did not resolve Firefox’s forgetfulness, then the source of this problem is likely caused by a file called cookies.sqlite becoming corrupt. This file manages Firefox’s cookies, and if it becomes corrupt it can stop Firefox from storing cookies altogether.

To fix the problem, completely exit Firefox and head to your Firefox Profile folder. In Windows XP/Vista, this folder can be accessed by going to your Start Menu and clicking Run. Copy and paste the following: %APPDATA%/Mozilla/Firefox/Profiles into the dialog box and press enter, and open your unique profile folder which will appear like jibberish (mine being 1nbhqks4.default)

In this folder, locate the file named cookies.sqlite. Copy this file to a safe location as a backup (or you can rename the file to something like cookies.BAK) and then delete the original. When you reopen Firefox, it will create a new cookies.sqlite file and it should now store cookies properly.

Note: If you are still having problems after following this guide, check your virus scanner to make sure it is not modifying or quarantining your cookie files.

The post Fix: Firefox Won’t Save Cookies or Auto-Logins first appeared on Techerator.

cookies | Techerator

How to Perform Age Verification with jQuery and Cookies (mmm, cookies)

Fix: Firefox Won’t Save Cookies or Auto-Logins