Использование Gravatar в форме авторизации

Граватар —  глобально распознаваемый аватар. сервис, позволяющий интернет-пользователям хранить свой аватар на специальном сервере. Пользователь регистрируется на центральном сервере и сохраняет там свой аватар и адрес электронной почты. Когда он оставляет комментарий на сайте или блоге, поддерживающим Gravatar, и указывает свой адрес электронной почты, на стороне сайта вычисляется md5 хэш от почтового адреса и отправляется на сервер Gravatar, в ответ возвращается аватар пользователя. Таким образом система Gravatar позволяет использовать аватары без регистрации на сайте или блоге.

Я разработал простое и интересно окно авторизации с помощью граватара. Инджой!

JavaScript

$(this).val() - берем значение инпута. С помощью регулярных выражений проверяем имейл на валидность, если все ок - делаем запрос на  avatar.php.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,
success: function(html)
{
$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}
});
});
</script>

 

HTML Code

<div id='login_container'>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' /></div>
<form method='post' action='login.php'>
<input type='text' id='username' class='input user'/>
<input type='password' id='password' class='input passcode'/>
<input type='submit' value=' Login ' class='btn' />
</form>
</div>
</div>

avatar.php

Через пост запрос принимаем имейл и конвертируем его в мд5 md5();

<?php

if($_POST['email'])

{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>

CSS

#login_container
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}