Como usar o Gravatar no seu app com AngularJS

Nesse artigo você vai aprender como integrar seu app com o Gravatar para exibir Avatar dos usuários.

Demo

 

O que é o Gravatar?

Um Avatar é uma imagem que te representa online. É uma foto que aparece próximo ao seu nome e ao você interagir com sites ou blogs.

O Gravatar é uma plataforma para criar avatar mundialmente conhecida (Globally Recognized Avatar). Nessa plataforma você faz o upload de uma foto e vincula ao seu e-mail e esta imagem é automaticamente exibida nos websites que fazem a integração que eu vou mostrar nesse tutorial.

O Gravatar é um serviço gratuito para proprietários de sites, desenvolvedores e usuário e é suportado pela Automattic.

 

Como implementar?

A API do Gravatar não precisa de autenticação e todos os requestes são feitos via GET.

As URLs do Gravatar são baseadas em um hash md5. Você precisa seguir esses passos para gerar a URL.

  • Remover os espaços em branco
  • Forçar todos os caracteres para minusculo (lower-case)
  • Gerar o hash md5

 

 

Como gerar o hash md5

Como nesse exemplo o app será web, eu vou utilizar a biblioteca JavaScript MD5 para gerar o hash.

Para usar basta fazer o download no site clicando aqui.

No Client-side importa o javascript:

No código do app, calcule o hash MD5 de uma string chamando o método md5 passando uma string por parâmetro:

Se você estiver utilizando outra linguagem de programação, você pode ver os exemplos diretamente no site do Gravatar clicando aqui.

 

A URL base para o request

A url basica para fazer o request no Gravatar é a abaixo:

Onde “HASH” é substituído pelo hash md5 criado a partir do e-mail do usuário.

Logo depois de montar a url basta incluir na atributo src da tag img do html:

 

Parâmetros adicionais

O Gravatar tem alguns parâmetros que podem ser passados na URL para definir tamanho, imagem padrão (para quando o usuário não tem um Gravatar) e classificação.

 

Tamanho

Tamanho padrão, caso não seja passado na URL, é de 80px. Para recuperar a imagem já no tamanho necessário para o seu app, basta passar o parâmetro s= ou size= na url.

 

Imagem padrão

A imagem padrão do Gravatar é a abaixo:

 

Porem você pode exibir uma dessas opções como imagem padrão: 404, mm, identicon, monsterid, wavatar, retro e blank.

O valor 404 não carrega nenhuma imagem e o servidor do Gravatar devolve o status 404 (Nenhuma página encontrada). Já os outros valores retornam as imagens abaixo, caso o hash passado não corresponda a nenhuma imagem.

 

O parâmetro utilizado para exibir as imagens acima é o d=.

 

Classificação

O Gravatar permite que os usuários classifiquem suas imagens em 4 tipos:

  • g: Adequado para exibição em todos os sites com qualquer tipo de público-alvo.
  • pg: Pode conter gestos rudes, indivíduos com rupas provocantes, com palavões ou violência moderada.
  • r: Pode conter coisas como profanidade áspera, violência intensa, nudez, ou uso de drogas.
  • x: Pode conter imagens sexuais ou violência extremamente perturbadora.

 

O parâmetro utilizado para exibir somente imagens com a classificação que você deseja é o r= ou rating=.

 

Combinação de parâmetros

O Gravatar permite que você combine todos os parâmetros acima e faça apenas um request. No exemplo abaixo todos os parâmetros estão sendo utilizados:

 

Criando o app de exemplo

 

index.html

 

app.js

 

style.css

 

gravatar.ctrl.js

 

Referências

 

Eu espero que esse tutorial tenha sido útil para você. Qualquer dúvida deixe seu comentário abaixo.