OAuth Call - Ajax Patterns

OAuth Call

From Ajax Patterns

http://blog.oauth.net/2008/06/04/oauth-meet-gadgets-gadgets-meet-oauth/ Gadgets and OAuth

http://groups.google.com/group/oauth/browse_thread/thread/5dea93b44dbbb628 Howto install Contact gadget

http://dirk.balfanz.googlepages.com/contacts.xml (backup: http://tinypaste.com/9187b) OAuth gadget - accesses Contact API

Contents

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

Code Example

The gadget begins by declaring OAuth as a feature, with parameters declaring the Google Contact service endpoints.

  <Optional feature="oauth">
    <Param name="service_name">
      google
    </Param>
    <Param name="access_url">
      https://www.google.com/accounts/OAuthGetAccessToken
    </Param>
    <Param name="access_method">
      GET
    </Param>

    <Param name="request_url">
      https://www.google.com/accounts/OAuthGetRequestToken?scope=http://www.google.com/m8/feeds/
    </Param>
    <Param name="request_method">
      GET
    </Param>

    <Param name="authorize_url">
      https://www.google.com/accounts/OAuthAuthorizeToken
    </Param>
  </Optional>

In the script, fetchData() performs the OAuth call. gadget.io.makeRequest is a standard OpenSocial function used to make all sorts of calls for remote content; in this instance, it's used to make an OAuth call. It will be making use of (a) the OAuth parameters declared earlier; (b) the params hash which is configured just prior to the call, as shown below.

      function fetchData() {
        var params = {};
        url = "http://www.google.com/m8/feeds/contacts/default/base?alt=json";
        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
        params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.AUTHENTICATED;
        params[gadgets.io.RequestParameters.OAUTH_SERVICE] = "google";
        params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;

        gadgets.io.makeRequest(url, function (response) {
          ...
        }

makeRequest is optimistic, in the sense that we can always issue the call, regardless of authorisation status. If the gadget turns out to be unauthorised, the response will include enough information to let the user remedy that. To appreciate this, let's look at how it's used here.

A callback function is passed into makeRequest, to be executed on its return from Google. If the gadget isn't authorised to make calls yet, Google will return an approval URL. This is a Google web page where the user can go and authorise the request. makeRequest ensures that if such a URL is present, it is stored in the response value. Thus, the callback function below has a condition based on whether an approval URL is present: If it's present, a popup link is shown so the user can go and approve the gadget. If it's not present, and the response instead yielded data, then the gadget was already approved and the data can be shown.

makeRequest ensures that

        gadgets.io.makeRequest(url, function (response) {
          if (response.approvalUrl) {
            var personalize = document.getElementById('personalize');
            personalize.href = response.approvalUrl;
            showOneSection('approval');
          } else if (response.data) {
            showOneSection('main');
            showResults(response.data);
          } else {
            var main = document.getElementById('main');
            var wtf = document.createTextNode('Something went wrong');
            main.appendChild(wtf);
            showOneSection('main');
          }
        }, params);
      }
</Module>