Google contacts API problems from JavaScript client with OAuth2 authentication

Question

Been wrestling with this for many hours now, the Docs seem to be terrible. Basically I'm trying to get read access to an OAuth2 authenticated users contacts, using either the Portable Contacts API or the full blown Contacts API. Google have recently started allowing OAuth2.

I can get access to a users contacts via the Contacts API by first getting the user to authenticate with the scope: "https://www.google.com/m8/feeds". Then I can retrieve their first 25 contacts using jQuery (code shown is CoffeeScript)

$.ajax
  url: "https://www.google.com/m8/feeds/contacts/default/full"
  dataType: 'jsonp'
  data: { access_token: token, alt: 'json-in-script' }
  success: (data, status) ->
    console.log "The returned data", data

That works, and I get JSON data. However, almost unbelievably, the only contacts order that Google provides (as far as I can tell) is 'lastmodified' (seriously wtf?). I need something more like 'top friends' or 'most popular'.

Which, happens to be something that the Google Portable Contacts API can do, (Yay!). Of course, I can't seem to get a successful request to work.

First, I get the user to authenticate with the portable contacts API by clicking this link (note the scope: "https://www-opensocial.googleusercontent.com/api/people")

<a href="https://accounts.google.com/o/oauth2/authclient_id=457681297736.apps.googleusercontent.com&response_type=token&redirect_uri=http://localhost:3000/team&scope=https://www-opensocial.googleusercontent.com/api/people">Import Google Contacts</a>

That works fine, and I get an access token passed back.

Next I try to send an ajax request to the portable contacts API

$.ajax
  url: "https://www-opensocial.googleusercontent.com/api/people/@me/@all"
  dataType: 'jsonp'
  data: { access_token: token, alt: 'json-in-script' }
  success: (data, status) ->
    console.log "The returned data", data

But that returns a 403 Error

403 (The currently logged in user and/or the gadget requesting data, does not have access to people data.

Any ideas what I'm doing wrong?

Appendix
I found this bug report in the Google OAuth2 forum which advised that we need to set an authorization header when working with the Portable Contacts API. So I tried that like this:

$.ajax
  url: "https://www-opensocial.googleusercontent.com/api/people/@me/@all"
  dataType: 'jsonp'
  data: { access_token: token, alt: 'json-in-script' }
  beforeSend: (xhr) ->
    xhr.setRequestHeader "Authorization", "OAuth #{token}"
  data: { access_token: token }
  success: (data, status) ->
    console.log "The returned data", data

But that gets me the same 403 error:

403 (The currently logged in user and/or the gadget requesting data, does not have access to people data

Answer 1

The problem is that you apparently can't set a request header on a JSONP request. See the answer on this question for more information.

The alternatives as far as I can see are:

1. Use the Google Contacts API JS library. That only uses AuthSub which google themselves suggest is bad. I would rather not do this. Every other service I interact with uses OAuth2.
2. Use the new Level 2 Ajax and XDomainRequest standards mentioned in the SO question I linked to. However they will come with their own problems. It sounds like a mess overall. It won't work in older browsers and I'll have to do a bunch of feature detection etc. I don't even know if the API will support these features.
3. Do it all on the server. This isn't exactly ideal either. Less then perfect user experience.

It shouldn't be this difficult Google.