Incorporating Gravatar into the Signin (or Registration) Process

26th February 2014 | Tags:

I signed up for an online ser­vice the other day (Com​mando​.io), and they had a really nice lit­tle inter­ac­tion dur­ing the signup and signin processes. As soon as you enter your email address, it auto­mat­i­cally dis­plays your Gra­vatar. Nice lit­tle touch.

So, I thought I’d write a quick tuto­r­ial on how to repli­cate the effect.

There is a demo here.

Get­ting Started

For sim­plic­ity, I based the form on one of the exam­ple tem­plates for the Boot­strap frame­work.

It’s pretty straight­for­ward to down­load the Boot­strap frame­work using Bower:

bower install bootstrap

Because Bootstrap’s JS — not that it’s used for this tuto­r­ial — has JQuery has a depen­dency, Bower will down­load it auto­mat­i­cally — so no need to down­load it separately.

Next up, a lit­tle addi­tional markup for the form:

<html>
<form id="login" class="form-signin" role="form">
    <h2 class="form-signin-heading">Please sign in</h2>
    <div class="avatar-holder">
      <img src="./img/avatar.png" width="64" height="64" id="avatar" />
    </div>
    <!-- ...rest of the form goes here... -->
</html>

A few CSS styles — I’ve just put them in the HEAD for simplicity:

.avatar-holder {
 text-align: center;
 padding: 1em 0;
}
#avatar {
 width: 64px;
 height: 64px;
 border-radius: 32px;
 border: solid 2px #ddd;
}
.note {
 margin-top: 2em;
 text-align: center;        
}
.note p {
 font-size: 0.8em;
 color: #666;
}

That’s the basic struc­ture ready to go.

How to Use Gravatar

Gen­er­at­ing a Gra­vatar is really easy. You sim­ply cre­ate an image tag and point it to a spe­cific URL, which you con­struct as follows:

http://www.gravatar.com/avatar/HASH?s=64

HASH is an MD5 hash of the user’s email address, which should first be con­verted to low­er­case. There are a few addi­tional para­me­ters you can use, which are detailed in the doc­u­men­ta­tion, but I’m just set­ting the size here — indi­cated by the attribute s. In this case, I want the Gra­vatar to be 64px x 64px, to match the image.

Imple­men­ta­tion

The first thing to note is that Javascript doesn’t sup­port MD5 hash­ing out-​the-​box. For­tu­nately there are libraries for that, such as this one.

Again, this can be installed using Bower:

bower install blueimp-md5

Now the JQuery:

$(document).ready(function(){

    // React to the email field (on the login form) having been filled out
    $('form#login input[name="email"]').blur(function(){
        var email = $(this).val();

        // Assuming an email has been provided...
        if (email !== '') {     

            // Construct the Gravatar URL
            var gravatar_url = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=64';

            // Set the source of the avatar image.
            $('img#avatar').attr('src', gravatar_url);
        }

    });

});

Most of this should be rel­a­tively straight­for­ward. Because we want to grab the avatar after the user has entered their email address, it’s set to fire on the blur event on the email input. After a quick check to ensure a value has been entered (we might also want to val­i­date it here), we build the URL to the Gra­vatar. First we take the email address — the value of the input — trim any erro­neous white­space, con­vert it to low­er­case, then obtain its MD5 hash. This is then used to gen­er­ate the URL, which is set as the src attribute of the avatar image. Pretty sim­ple effect, but it adds a lit­tle some­thing to your forms.

Demo /​source code

Comments

No comments yet.

Links and images are allowed, but please note that rel="nofollow" will be automactically appended to any links.