Gravatar profile service

[quietmint]

Can we include a factory/service that provides a function to returns a user's Gravatar profile? This is available from Gravatar as JSON, and you already include the md5 library necessary to generate such a request URL.

Example profile: https://en.gravatar.com/205e460b479e2e5b48aec07710c08d50.json

{
    "entry": [{
        "id": "1428",
        "hash": "22bd03ace6f176bfe0c593650bcf45d8",
        "requestHash": "205e460b479e2e5b48aec07710c08d50",
        "profileUrl": "http:\/\/gravatar.com\/beau",
        "preferredUsername": "beau",
        "thumbnailUrl": "https:\/\/secure.gravatar.com\/avatar\/22bd03ace6f176bfe0c593650bcf45d8",
        "photos": [{
            "value": "https:\/\/secure.gravatar.com\/avatar\/22bd03ace6f176bfe0c593650bcf45d8",
            "type": "thumbnail"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/9388ce40336c711920e3493cbd9bff59"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/9564d785bb3d64c03d26b2de426c4312"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/a5d0e4d405a047e5b567e488dbc1eb21"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/fb8f961213a600c323bce0ad3c461a80"
        }, {
            "value": "https:\/\/secure.gravatar.com\/userimage\/1428\/feb73c66a51313817aad85ebaba82ba3"
        }],
        "profileBackground": {
            "color": "#9c9c9c",
            "url": "https:\/\/secure.gravatar.com\/bg\/1428\/e9db3f026b7ce7748e58169cecb4980f"
        },
        "name": {
            "givenName": "Beau",
            "familyName": "Lebens",
            "formatted": "Beau Lebens"
        },
        "displayName": "Beau Lebens",
        "aboutMe": "Team Lead\/Code Wrangler at Automattic, working on WordPress.com and more. I make the web, and have done for over 15 years.",
        "phoneNumbers": [{
            "type": "mobile",
            "value": "+1-415-279-0783"
        }],
        "emails": [{
            "primary": "true",
            "value": "beau@dentedreality.com.au"
        }],
        "ims": [{
            "type": "aim",
            "value": "beaulebens"
        }, {
            "type": "yahoo",
            "value": "beaulebens"
        }, {
            "type": "icq",
            "value": "798818"
        }, {
            "type": "gtalk",
            "value": "beau.lebens@gmail.com"
        }, {
            "type": "skype",
            "value": "borkazoid"
        }],
        "accounts": [{
            "domain": "facebook.com",
            "display": "beaulebens",
            "url": "https:\/\/www.facebook.com\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "facebook"
        }, {
            "domain": "flickr.com",
            "display": "borkazoid",
            "url": "http:\/\/www.flickr.com\/people\/borkazoid\/",
            "username": "borkazoid",
            "verified": "true",
            "shortname": "flickr"
        }, {
            "domain": "foursquare.com",
            "display": "foursquare.com",
            "url": "http:\/\/foursquare.com\/user\/3277",
            "userid": "3277",
            "verified": "true",
            "shortname": "foursquare"
        }, {
            "domain": "profiles.google.com",
            "display": "profiles.google.com",
            "url": "http:\/\/profiles.google.com\/100468367545654198427",
            "userid": "100468367545654198427",
            "verified": "true",
            "shortname": "google"
        }, {
            "domain": "linkedin.com",
            "display": "beaulebens",
            "url": "http:\/\/www.linkedin.com\/in\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "linkedin"
        }, {
            "domain": "tripit.com",
            "display": "beaulebens",
            "url": "http:\/\/tripit.com\/people\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "tripit"
        }, {
            "domain": "twitter.com",
            "display": "@beaulebens",
            "url": "http:\/\/twitter.com\/beaulebens",
            "username": "beaulebens",
            "verified": "true",
            "shortname": "twitter"
        }],
        "urls": [{
            "value": "http:\/\/wordpress.com",
            "title": "WordPress.com"
        }, {
            "value": "http:\/\/sidewalkscribbl.es",
            "title": "SidewalkScribbl.es"
        }, {
            "value": "http:\/\/gravatar.com",
            "title": "Gravatar"
        }, {
            "value": "http:\/\/intensedebate.com\/",
            "title": "Intense Debate"
        }, {
            "value": "http:\/\/dentedreality.com.au",
            "title": "Dented Reality"
        }, {
            "value": "http:\/\/automattic.com",
            "title": "Automattic"
        }]
    }]
}

[wallin]

Hey @quietmint. That's a great idea. I'll try to sketch out a solution asap. Could you perhaps provide some input on how you'd like to use such a service, like from a controller or/and a directive? Example code would much appreciated.

Thanks!

[quietmint]

For some reason, Gravatar JSON profiles are not CORS-enabled, so it's necessary to use JSONP. Something like this (as a factory) appears to work:

function gravatarProfile($http, md5) {
  return function(email) {
    var profileUrl = 'https://www.gravatar.com/' + md5(email) + '.json?callback=JSON_CALLBACK';
    return $http.jsonp(profileUrl).then(function(success) {
      if (Array.isArray(success.data.entry) && success.data.entry.length > 0) {
        return success.data.entry[0];
      }
    });
  }
}

(example code only... it would make sense to perform some basic validation on email before firing the JSONP request)

My page has an input field for the user to type their e-mail address. My plan is to inject gravatarProfile into my controller and fetch the user's profile so I can get a username associated with their profile.

function updateName() {
  $scope.me.displayName = null;
  gravatarProfile($scope.me.email).then(function(profile) {
    $scope.me.displayName = profile.displayName;
  });
}

[wallin]

Hi, I started to work on a first version of this feature. Please have a look and tell me what you think
https://github.com/wallin/angular-gravatar/tree/profile-data

checkout the example folder