Javascript: how to access *specific user* data with Google API from web app?

Question

I have a 'philosophical' doubt about Google API access from the browser (in my case it's Google Calendar API, but that does not matter).

I am writing a nice (angular.js) web app for a small hotel; it sports a reservation form.
I would like to link the reservation form to the hotel's Google Calendar account, to be able to show already reserved days as unavailable, and where to write eventual bookings.

My doubt is this: the access to Google API from the browser requires oAuth2. Fine. But I don't want the web app user to give me access to his own account, but I want to be able to access the hotel account, whose clientId I know...

I'm sure I'm very confused, please give me some advise... :-(

Answer 1

I have an app which uses a similar scenario but using Google Analytics, so what I have done is set up a Google service account and then downloaded and used the php auth library to set up an endpoint which handles the auth and gives me the data I request from the app.

The relevant code is something like this:

google-data.php

<?php

    require_once '/path-to/google/src/Google/autoload.php';

    $veiwId   = $_GET['viewid']; // Sent from the app
    $client_email = 'YOUR_SERVICE_ACCOUNT_EMAIL_HERE'; //looks something like - someproject@api-project-69734519371.iam.gserviceaccount.com
    $private_key  = file_get_contents('/path-to/APIProject-c5bfsdf45d54d.p12'); // downloaded from Google dev console
    // Define the service you want to use (Calendar, Analytics, etc.)
    $scopes       = array(Google_Service_Analytics::ANALYTICS_READONLY);
    $credentials  = new Google_Auth_AssertionCredentials(
        $client_email,
        $scopes,
        $private_key
    );

    $client = new Google_Client();
    $client->setAssertionCredentials($credentials);
    // Grab token if it's set
    if (isset($_SESSION['service_token'])) {
        $client->setAccessToken($_SESSION['service_token']);
    }
    // Refresh if expired
    if ($client->getAuth()->isAccessTokenExpired()) {
        $client->getAuth()->refreshTokenWithAssertion();
    }
    // Pin to Session
    $_SESSION['service_token'] = $client->getAccessToken();

    // Here is where you will start using the service, such as Google Calendar, etc.
    $service = new Google_Service_Analytics($client);
    // Adding Dimensions
    $params = array('dimensions' => 'ga:medium');   
    // requesting the data  (methods will depend on the service)
    $data = $service->data_ga->get(
        // params from get request
        // request logic, etc.
    );
    // Return to client as JSON
    echo json_encode($data);
?>

You obviously don't need to use the PHP library as there are plenty others available , however the concept remains the same. My use case was quite simple so PHP was the go-to.

With that set up I was able to send a simple get request from my angular app for the data:

app.factory('DataLoader', function( $http, $log ) {

    return {
      getGoogleData: function(toDate, fromDate, viewId) {
        // Pass in some dates and a profile id
        return $http.get('path-to/google-data.php?todate='+toDate+'&fromdate='+fromDate+'&viewid='+viewId);
      }

    } 
})

Hopefully this may help you understand how you can allow your app to interact with the Google api intead of your end users interacting with the api.