netvibes - (re)mix the web

So far, this series of articles have focused on getting and displaying public data, like Twitter public timeline in the previous part of this series of tutorials.

Public data is what most of the current web services will let you play with, but the more interesting services are those that let you manipulate your private data. This requires authentication, that is establishing a privileged connection with it. As the Netvibes proxy will not allow the passing of identities and states through classic authentication tools like cookies or sessions, we devised our own UWA authentication methods.

These methods require two new preference fields, and the use of a new authentication setting in your Ajax request. Read up the whole documentation to get a better idea of how it works. We will follow it along and expand from it in this fourth part of our series.

As usual, you can follow along by using the previous version of the widget.

Putting the login form in place

This is trivial: just add the necessary preferences to the widget code. Here’s our new preferences block:

<widget:preferences>
  <preference name="username" type="text" label="Username" />
  <preference name="pass" type="password" label="Password" />
  <preference name="limit" type="range"
    label="Number of items to display" defaultValue="10"
    step="1" min="1" max="20" onchange="reParse" />
  <preference name="offset" type="hidden" defaultValue="0" />
</widget:preferences>

We advise you to place it at the top of the preferences, but you can place them as you see fit.

Building the foundation

Now that we are getting exclusively private content, we cannot expect the widget to work without the user being logged-in. Since he is by default, we can’t directly fetch the data feed and display it, we have to first tell the user that he needs to enter his username and password before he can see anything.

That simply requires to change the Twitter.onLoad method, and build a if..else block in it: this checks whether the user is logged-in or not, and depending on the result, we ask him to log-in or launch the authentication/display code.

if ( widget.getValue('username') )  {
  widget.body.setHTML(
    '<div class="loading">Fetching messages from Twitter<br />
     (be patient, Twitter can be slow !)</div>');
  widget.callback('onUpdateBody');
  Twitter.loadTimeline();
} else {
  widget.body.setHTML('Please authenticate.');
  widget.callback("onEdit");
}

Since we never know how long the request can take (some servers can be quite slow), we first print a “please be patient” kind of message before launching the request, with the Twitter.loadTimeline method (presented in the next section). We trigger the onUpdateBody callback method in order for the widget to resize according to the content we just added to the body.
If the user is not logged-in, we ask him to, and open the preference form by triggering the onEdit callback method.

Making the Ajax request

We are going to switch data source. We’re not interested in the public timeline anymore, now we only want to get the statuses from our friends. Luckily Twitter provides a source just for that: friends_timeline, which “Returns the 20 most recent statuses posted in the last 24 hours from the authenticating user and that user’s friends”. The new feed to use is therefore this one:

http://twitter.com/statuses/friends_timeline.json

We integrate it into the Ajax request, which will now use UWA.Data.request() instead of UWA.getJson(). Here the code for our new Twitter.loadTimeline() method, for now:

Twitter.loadTimeline = function() {
  UWA.Data.request(
    'http://twitter.com/statuses/friends_timeline.json',
    { method: 'get', type: 'json', cache: 600,
    onComplete: Twitter.display,
    authentication: Twitter.getAuthentication() }
  );
}

Why are we using UWA.Data.request() instead of the simpler UWA.getJson() ? Because the later cannot deal with authentication, which requires an new setting: authentication.
The authentication object requested by the authentication setting is built by the new getAuthentication method, as given in the documentation. Note that unlike the onComplete setting, which has to reference a method and therefore not use the final (), authentication has to be set to an object, created by that getAuthentication method, and so has to feature the final ().

Twitter.getAuthentication = function() {
  var authentication = { moduleId: widget.id,
    username: widget.getValue('username'), type: 'http_basic' }
  // enable authentication outside of Netvibes
  if (widget.data.pass)
    authentication.password = widget.data.pass;
  return authentication;
  }

widget.data.pass references the content of the pass preference. If you change the name of the preference, remember to also do it in the getAuthentication method.

This being done, the other methods, like Twitter.display shouldn’t need a change in order to parse and display all your friends’ (and your own) statuses…

Testing the authentication

Authentication doesn’t work too well in standalone mode, and it works in Netvibes only if the widget is set inline. To test authentication, you have to first put the UWA Test Widget in your Netvibes page, then edit its preferences, where you will put the URL of your own widget, and tick the Inline checkbox. If you don’t tick that box, the widget’s authentication won’t work. Once you validate that, the UWA Test Widget is effectively replaced by your widget, and you can start fiddling with its own preferences.

Here is the code for this new version. The next part will show you how to send message to filter through authentication.

Tags: ajax, authentication, http post, javascript, preference, request, twitter, uwa

This entry was posted on Thursday, June 7th, 2007 at 5:39 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.