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

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:

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 <head> region of each page.

[code lang=”xml”]

<script type="text/javascript" src="[pathtofiles]/jquery.js"></script>
<script type="text/javascript" src="[pathtofiles]/jquery.cookie.js"></script>

[/code]

As with most jQuery solutions, you’ll need to add a <script> tag to your <head> region which will be used as a programming space.

[code lang=”php”]

<script type="text/javascript">
$(document).ready(function(){

//code goes here!

});
</script>

[/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://<?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>";
}

[/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’ });

<?php if ( !isset($_REQUEST[‘redirect’]) || $_REQUEST[‘redirect’] == "" ) { ?>
document.location = "http://www.domain.com";

<?php }else{ ?>
document.location = "<?php echo $_REQUEST[‘redirect’]; ?>";
<?php } ?>
});

[/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!


Posted

in

,

by

Comments

12 responses to “How to Perform Age Verification with jQuery and Cookies (mmm, cookies)”

  1. Christopher Finke Avatar

    Really, most age verification pages should read “Are you of legal drinking/smoking/etc. age (or willing to lie about your age in order to access this site)?”

  2. Jonathan Paul Avatar

    “When users verify their age, they want to be redirected back to the page they wanted to see, not just the homepage!”

    I wish all web developers were as considerate as you.

    jon

  3. Jacob Avatar
    Jacob

    First thank you for the script the example website you gave is a bad idea because its WordPress based so when a beginner html user like me trys to use their source code as an example its a bad idea. I hope you can actually post some html page example of the code implemented. thank you

    1. Brian Nelson Avatar
      Brian Nelson

      Hi Jacob,
      In practice, implementing this method of age verification is no different in a WordPress theme compared to any other html/php file. Still, I think it’s fair to request a package for easy access. I’ll assemble example files in a zip and update this article with them included in the next few days.

      1. Patrick Avatar
        Patrick

        I’d be also very much interested in that! I search for a method to have age verification on particular WordPress posts.

  4. Jimb Bb Avatar
    Jimb Bb

    Hi, thanks this is exactly what I’ve been looking for but for some reason the files don’t overlay the page. Did you ever have time to compile the files for a .zip? I tried to look at your verify.php file but it looks like you renamed it index.php so I can’t view it. Thanks.

  5. Sarah Carey Conley Avatar

    For some reason I’m having a problem getting this to work with Firefox – it just loops. Any ideas why that might be?

  6. Justsohappens Avatar
    Justsohappens

    I’m a total noob here, so I’m sure I’m missing something.  I’ve been scouring the web for a solution like this but I can’t seem to get yours to work.  Other people seem to be fine, so I can only assume it’s something I’m doing incorrectly.  Do I need to have an external php file to redirect back to the age verification page?  Also, how do I store the variable as Yes on the verification page?  Do I need a form or something?  Alternatively, if there’s a better tutorial out there for a beginner, could someone please point me to it?  Many thanks.

  7. Fred Avatar
    Fred

    Am I correct in assuming that search engine bots will ignore the Javascript? I want to be sure they can get in to the site and index everything.

  8. David R. Hoot Avatar

    I can’ get it to work.  And your example is nothing like the directions you give so why bother posting it.  Very disappointing.

  9. GADS Avatar
    GADS

    Great article, but you have a problem in the blog text right after “As with most jQuery solutions, you’ll need to add a”. I had view the page source in order to read the text that followed. It looks like forgot to escape the tags you wanted to show and they got interpreted (at least in Safari & Firefox)

  10. pyrosoftware Avatar
    pyrosoftware

    Hi.
    The JQuery cokkies link does not work, anyone know where I can get this from ?

Leave a Reply

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