Fábrica de Código

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

 

var email = 'Contato@fabricadecodigo.com'
email = email.trim(); // removendo espaços em branco
email = email.toLowerCase(); // forçando tudo para minusculo
var hash = md5(email);

 

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:

<script src="js/md5.min.js"></script>

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

var hash = md5("value"); // "2063c1608d6e0baf80249c42e2be5804"

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:

https://www.gravatar.com/avatar/HASH

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

https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50

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

<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />

 

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.

https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200

 

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=.

https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm

 

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=.

https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=g

 

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:

https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200&r=g&d=mm

 

Criando o app de exemplo

 

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Gravatar</title>

  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <link href="style.css" rel="stylesheet" />
</head>

<body ng-app="app">
  <div class="container" ng-controller="GravatarController as vm">
    <div class="row">
      <div class="center-block profile">
        <p class="text-center">
          <img src="{{ vm.imgUrl }}" class="img-rounded" />
        </p>

        <hr>

        <form novalidate>
          <div class="form-group">
            <label>E-mail</label>
            <input type="email" class="form-control" ng-model="vm.model.email" />
          </div>
          <div class="form-group">
            <label>Classificacao</label>
            <select class="form-control" ng-model="vm.model.rating">
              <option value="g">G</option>
              <option value="pg">PG</option>
              <option value="r">R</option>
              <option value="x">X</option>
            </select>            
          </div>
          <div class="form-group">
              <label>Tamanho</label>
              <input type="number" class="form-control" ng-model="vm.model.size" min="0" max="2048" step="1" />
            </div>
          <button type="submit" class="btn btn-primary" ng-click="vm.loadImg();">Carregar imagem</button>
          <button type="submit" class="btn btn-primary" ng-click="vm.reset();">Reset</button>
        </form>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <!--Javascript MD5-->
  <script src="md5.min.js"></script>

  <!--AngularJS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>

  <!--App-->
  <script src="app.js"></script>
  <script src="gravatar.ctrl.js"></script>

</body>

</html>

 

app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('app', [
  'ngRoute'
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $routeProvider.otherwise({redirectTo: '/'});
}]);

 

style.css

body {
    background: #f5f5f5;
}

.profile {
    width: 400px;
    padding: 10px 20px 10px 20px;
    margin-top: 20px;
    background: #fff;
    box-shadow: 0 1px 6px 1px rgba(0,0,0,0.2);
}

.widget_mailchimpsf_widget {
    padding: 10px;
    background: #EEE;
    color: #000;
    border: 3px dashed #6B6B6B;
}

 

gravatar.ctrl.js

angular.module('app').controller('GravatarController', GravatarController);

function GravatarController() {

    var vm = this;
    vm.model = {
        email: '',
        rating: 'g',
        size: 80,
        default: 'd'
    };

    vm.imgUrl = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=200';
    vm.loadImg = loadImg;
    vm.reset = reset;

    function loadImg() {
        if (vm.model.email) {
            // Criando o hash
            var hash = md5(vm.model.email.trim().toLowerCase());

            // Montando a url
            var url = 'https://www.gravatar.com/avatar/';
            url += hash;
            url += '?';
            url += 'r=' + vm.model.rating;

            if (vm.model.size > 0) {
                url += '&s=' + vm.model.size;
            }

            url += '&d=mm';

            vm.imgUrl = url;
        }
    }

    function reset() {
        // exibindo a imagem padrão
        vm.imgUrl = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=200';
    }
}

 

Referências

 

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