When building an application that has users authenticate, you often want to augment that user data with some kind of profile. Perhaps a nickname or real name, or a location. We collect this in the doto sample, and we also use the technique I’m going to post about here today.
Above you can see the registration screen in doto, but this is how it appears when you open the app, because we prefill the data based on your Microsoft Account profile when you login. This is a nice gesture for the user, as most will accept the defaults but for those that want to represent themselves differently in your app – they can customize the name.
Today, I want to share some server code that can help you do the same based on your public Twitter and Facebook profiles if your user logs in via Twitter or Facebook. The idea behind the simple function fetchBasicProfile below, is that you can simply pass in the user object in your Mobile Service server script, and it will invoke your callback with a simple profile object that has common properties for both Facebook and Twitter (which has wildly different basic profile structures available). Here’s the code:
And that includes a test you can run using Mocha JS (see day 7 for more on this).
The properties returned in the basic profile are:
- name – the full name of the user, e.g. Josh Twist
- firstName – the first name, e.g. Josh (not available on Twitter)
- lastName – the surname or family name, e.g. Twist (not available on Twitter)
- userName – a username specific to the source, e.g. @joshtwist or joshtwist
- smallImageUrl – a url to a small (~50x50) profile image
- largeImageUrl – a bigger image (~200x200)
- source – the source of the information, e.g. Facebook or Twitter
- id – the id of the user in the source system, usually a large number
It’s super easy to use and you can just paste this function into any of your scripts that want to do this.
This was day 9 of the twelve days of ZUMO. Join us tomorrow for day 10.