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 = '[email protected]' 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
- Gravatar – https://www.gravatar.com/
- Javascript MD5 – https://blueimp.github.io/JavaScript-MD5/
Eu espero que esse tutorial tenha sido útil para você. Qualquer dúvida deixe seu comentário abaixo.