Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Веб-разработка? Это просто! Используем сервис Gravatar


Используем сервис Gravatar

Название Gravatar переводится как "глобально распознаваемые аватары", и предназначен для хранения и глобального доступа к аватаркам пользователя и его персональным данным.

Все URL-ы в системе gravatar имеют одну общую ключевую деталь - хеш адрсеса электропочты пользователя. Именно этот хеш уникально идентифицирует пользователя в рамках сервиса gravatar. Хеш формируется очень просто. Для этого нужно взять e-mail, убедиться, что в нем отсутствуют начальные и конечные пробелы, привести его в нижний регистр, и взять MD5-хеш полученной строки.

На языке PHP этот код будет выглядеть так:

$email = "vgrinin@gmail.com";
echo md5(strtolower(trim($email)));

А на C# - вот так:

string email = "vgrinin@gmail.com";
byte[] hash = MD5.Create().ComputeHash(Encoding.Default.GetBytes(
email.Trim().ToLower()));
StringBuilder hashString = new StringBuilder();
for (int i = 0; i < hash.Length; i++)
{
hashString.Append(hash[i].ToString("X2"));
}
Console.WriteLine(hashString.ToString().ToLower());

Colored with dumpz.org

Гм... получилось несколько длиннее, чем на PHP.

Протестируйте работу алгоритма, введите свой e-mail в поле ввода ниже и нажмите кнопку "Преобразовать" здесь.

Ну что же, теперь все готово, чтобы, используя полученный хеш, запросить с сервера gravatar изображение аватарки или профиль пользователя. Начнем с аватарки.

В самом простейшем случае запросить аватарку можно при помощи URL-а: http://www.gravatar.com/avatar/HASH. Здесь HASH - это MD5-хеш, полученный из e-mail на предыдущем шаге. Ответом на этот запрос явится изображение, которое можно отобразить на странице при помощи тега IMG, таким образом: <img src="http://www.gravatar.com/avatar/HASH" />

Например, для меня (vgrinin@mail.ru) это будет выглядеть так:
<img src="http://www.gravatar.com/avatar/b902d209d0efede9d9113a03c4ccb756" />

По умолчанию, изображение идет в PNG-формате, но если вы хотите получить его например в JPG, то нет ничего проще - добавьте расширение в конце URL, вот так:
<img src="http://www.gravatar.com/avatar/b902d209d0efede9d9113a03c4ccb756.jpg" />

При помощи параметра s мы можем указать размер изображения в пикселях, от 1 до 512, вот так:
<img src="http://www.gravatar.com/avatar/b902d209d0efede9d9113a03c4ccb756.jpg?s=200" />

Размер задается только один, так как аватарки у gravatar`а - квадратные. Если сервис не находит картинки, то он отображает изображение по умолчанию. Если мы хотим задать какое-то конкретное изображение по умолчанию, то укажем его в параметре d, вот так:
<img src="http://www.gravatar.com/avatar/b902d209d0efede9d9113a03c4ccb756.jpg?s=200&d=http%3A%2F%2Fmyserver.ru%2Fimages%2Fdefault.jpg" />

Как видим, здесь просто задается полный URL до изображения, причем URL-encoded. Существует также ряд предопределенных значений параметра d, при этом изображение по умолчанию будет взято(сгенерировано) из одного из стандартных рядов изображений по умолчанию:

  1. mm: человек-загадка, стандартное изображение человеческого силуэта (не изменяемое в зависимости от хеша)
  2. identicon: абстрактная геометрическая фигура, сгенерированная в зависимости от хеша
  3. monsterid: "уродцы", созданные из хеша, с разными лицами, цветов и т.д.
  4. wavatar: лица-иконки, созданные из хеша, с разной формой, ыветом и т.д.
  5. retro: 8-битные упрощенные лица-иконки

Попробуйте введите в поле формы здесь любую строку и посмотрите, какие варианты изображений по умолчанию создаст для вас сервис gravatar. А если ввести зарегистрированный в gravatar e-mail, то все 5 изображений будут одинаковыми и представлять собой не случайное изображение по умолчанию, а ваш собственный аватар.

Разберемся с еще одним URL-аргументом - r. Параметр r позволяет задать рейтинг отображаемого изображения. Что это значит? При регистрации в gravatar, пользователь может загрузить не одно, а несколько разных изображений. Каждое из них имеет свой, определяемый самим пользователем рейтинг:

  • Граватары с ретингом G пригодны для показа на сайтах с любой аудиторией.
  • Граватары с рейтингом PG могут содержать неприличные жесты, провокационно одетых людей, грубые выражения или умеренную жестокость.
  • Граватары с рейтингом R могут быть оскорбительными, содержать сцены жестокости, обнаженные тела или связанные с наркотиками.
  • Граватары с рейтингом X могут содержать откровенные сексуальные изображения или сцены экстремальной жестокости.

Честно сказать, я слегка недопонял этот параметр. Когда я в своем профиле на gravatar добавил еще несколько изображений с рейтингом PG, R и X, то получил в результате ситуацию, что на сайте отображается либо самый жестокий аватар, либо отображается картинка по умолчанию для сайтов с рейтингом жестокости пониже. То есть я ожидал, что в зависимости от параметра r, переданного в url я увижу на сайте соответствующее рейтингу изображение, но увидел лишь картинку по умолчанию, что мне кажется странным. Становится совершенно непонятным, зачем мне дана возможность загрузить несколько изображений, если в реальности работает только изображение с самым жестким рейтингом?

Если ваш сайт использует протокол HTTPS>, то вы можете использовать URL https://secure.gravatar.com/ для загрузки аватарок через SSL. Все остальные параметры остаются прежними.

Gravatar, помимо аватарок, может отдавать еще и информацию о профиле пользователя. В нее входят почтовые адреса, телефоны, номера ICQ, skype, адреса персональных сайтов, и адреса профилей в ряде социальных сетей, twitter-е и т.д. Конечно, если пользователь заполнил эту информацию на сайте gravatar.com.

Получить доступ к этой информации очень просто - достаточно обратиться к URL вида: http://www.gravatar.com/HASH, где HASH - все тот же самый md5-хеш адреса электропочты пользователя. Например, вот ссылка на мой профиль: http://www.gravatar.com/b902d209d0efede9d9113a03c4ccb756.

Попробуйте зайти по предложенному адресу и обратите внимание, что при обращении по этому адресу, ваш браузер получит редирект на url страницы профиля, например для моего профиля редирект будет вот на эту страницу http://ru.gravatar.com/vgrinin. Как видим, здесь просто добавился локализованный поддомен, и md5-хеш заменился на мой логин.

Обычно, сгенерированная страница профиля не годится для того, чтобы вставить информацию с нее в ваш сайт. Для этих целей создатели gravatar постарались и дали нам возможность получать информацию о профиле в нескольких удобных форматах: JSON, XML, PHP, VCF, QRCode.

JSON удобно использовать, если вы собираетесь вставлять информацию в страницу посредством JavaScript, хотя тут же возникнет вопрос о кросдоменном способе загрузки этой информации, ведь уровень безопасности браузера не позволит вам загрузить и выполнить скрипт с другого домена.

А поэтому следует обратиться в сторону остальных форматов загрузки и, соответственно, серверной обработке данных. Если вы программируете на PHP то удобнее всего будет воспользоваться PHP-форматом данных, который представляет собой строку объекта, сериализованного методом serialize(), так что обратное преобразование в объект мы можем провести методом unserialize().

Чтобы не быть голословным, приведу пример PHP-кода, выводящего на экран ФИО пользователя и его аватарку.

$str = file_get_contents('http://www.gravatar.com/b902d209d0efede9d9113a03c4ccb756.php');
$profile = unserialize($str);
if (is_array($profile) && isset($profile['entry']))
{
echo $profile['entry'][0]['name']['formatted'];
echo '&lt;br/&gt;&lt;img src="'.$profile['entry'][0]['thumbnailUrl'].'"/&gt;';
}

Colored with dumpz.org

Вот здесь вы можете протестировать этот скрипт. Обратите внимание, что желаемый формат информации профиля задается в виде "расширения" файла, запрашиваемого у сервиса. В нашем случае формат ".php".

Остальные форматы запрашиваем при помощи расширений: ".json", ".xml", ".vcf", ".qr". Саму структуру пакета данных удобнее всего просматривать в XML-формате, открыв в вашем браузере страницу http://www.gravatar.com/HASH.xml.

И еще хочу рассмотреть интересный формат - QRCode. Этот формат представляет собой 2D-штрих-код, в котором зашифрован URL вашего профиля. Расшифровать его можно, например, на этом сайте. Если ввести в поле ввода строку http://ru.gravatar.com/b902d209d0efede9d9113a03c4ccb756.qr (это мой QR-код), то получим вот такой результат:

Raw text http://gravatar.com/vgrinin
Raw bytes 41 b6 87 47 47 03 a2 f2 f6 77 26 17 66 17 46 17 22 e6 36 f6 d2 f7 66 77 26 96 e6 96 e0 ec 11 ec 11 ec 11 ec
Barcode format QR_CODE
Parsed Result Type URI
Parsed Result http://gravatar.com/vgrinin

Как видно, в Parsed Result здесь содержится только мой URL, а я надеялся увидеть там несколько более подробную информацию.

Вот мы и рассмотрели все тонкости работы с сервисом gravatar. Спасибо его создателям, ведь сервис получился действительно нужным и популярным. Следует добавить, что все популярные CMS в том или ином виде содержат API для работы с этим сервисом, так что зачастую не надо утруждать себя нахождение MD5-хешей и прочими трудностями.

Надеюсь, статья была интересной и полезной.


В избранное