Google Authentication API

Info

We need to change users on the go and so we will require access to different users' calendars. For different users, our web app will need to authenticate itself.

Authenticating to google

Command line:

http post "https://accounts.google.com/o/oauth2/device/code?
client_id=my_client_id&
scope=https://www.googleapis.com/auth/calendar.readonly"

From within our app (jQuery):

$.ajax({
  url: "https://accounts.google.com/o/oauth2/device/code"
  data: {
    client_id: "my_client_id",
    scope: ["https://www.googleapis.com/auth/calendar.readonly"]
  },
  type: "POST"
  dataType: "json"
})

The returned object will be of the form:

{
    "device_code": "blah/foobar",
    "expires_in": 1800,
    "interval": 5,
    "user_code": "bla",
    "verification_url": "https://www.google.com/device"
}

Now, the user needs to go to the url and enter the user_code to authenticate the app.

Getting access and refresh tokens

Once the user has done that, we can fetch the access and refresh tokens using:

$.ajax({
  url: https://www.googleapis.com/oauth2/v4/token,
  data: {
    client_id: "foo",
    client_secret: "bar",
    code="device code from previous response",
    grant_type: "http://oauth.net/grant_type/device/1.0"
  },
  type: "POST",
  dataType: "json"
}).done(function(json) {
  if (json.access_token) {
    gapi.auth.setToken(json);
  }
});

If user has not accepted it yet:

{
  "error" : "authorization_pending"
}

else

{
 "access_token": "yay",
 "token_type": "Bearer",
 "expires_in": 3600,
 "refresh_token": "blah"
}

Using the above in calendar script

The fetched token can directly be linked with the gapi script by using:

gapi.auth.setToken(token);

After that, the calendar api should be loaded.

Handling expiring tokens

Once the authorized tokens expire, the APIs will start returning a status 401. Then we will need to reauthorize using the refresh token.

$.ajax({
  url: "https://www.googleapis.com/oauth2/v4/token",
  data: {
    client_id: "foo",
    client_secret: "bar",
    refresh_token: "some",
    grant_type: "refresh_token"
  },
  type: "POST",
  dataType: "json"
});

The Big Picture

Considering that there needs to be something of a registration step for the complete application, we can have a registration page where a user needs to provide his name, microsoft api client id, 3 pictures where he is facing the camera. Also there would be a link to the pushbullet page where one can find his/her api key and the user will need to paste it back here. Also, a link and user_code will be generated for the above authentication purposes and we will store the refresh key for indefinite usage. All this data could be stored on a file structured like this:

[
  ...,
  {
    name: "Yash Srivastav",
    userId: "yash",
    push_key: "foo",
    refresh_key: "bar"
  },
  ...
]