Integrating Google Drive API with Fusion Tables in PhoneGap/Cordova mobile application

Other Questions Google drive
1

I’m working on a mobile app using PhoneGap and Sencha Touch. I need to build functionality that connects to Google Drive and allows me to create and modify Google Fusion Tables directly from the app.

I have a working JavaScript solution that works perfectly in my local development environment. However, when I build the app and test it on my Android device, the authentication process fails completely. The Google OAuth authorization popup doesn’t show up even though my Gmail account is already logged in on the device.

Here’s a simplified version of my current implementation:

var appConfig = {
  clientKey: 'your-client-id-here.apps.googleusercontent.com',
  secretKey: 'your-secret-key',
  apiToken: 'your-api-key',
  permissions: 'https://www.googleapis.com/auth/fusiontables'
};

function initializeApp() {
  gapi.client.setApiKey(appConfig.apiToken);
  document.getElementById('btn-create').onclick = buildTable;
  document.getElementById('btn-add').onclick = addRecord;
  setTimeout(function() { authenticate(true); }, 100);
}

function authenticate(skipPrompt) {
  gapi.auth.authorize({
    client_id: appConfig.clientKey,
    scope: appConfig.permissions,
    immediate: skipPrompt
  }, processAuthResponse);
}

function processAuthResponse(result) {
  var authBtn = document.getElementById('auth-btn');
  var createBtn = document.getElementById('btn-create');
  if (result && result.access_token) {
    authBtn.disabled = true;
    createBtn.disabled = false;
  } else {
    authBtn.disabled = false;
    authBtn.onclick = function() { authenticate(false); };
  }
}

function buildTable() {
  var tableSpec = {
    name: "UserData",
    columns: [
      { name: "Username", type: "STRING" },
      { name: "Score", type: "NUMBER" }
    ],
    isExportable: true
  };
  
  executeRequest({
    path: '/fusiontables/v1/tables',
    body: JSON.stringify(tableSpec),
    method: 'POST'
  }, handleTableCreation);
}

What’s the best approach to make Google API authentication work properly in a PhoneGap mobile app? Are there specific configurations or plugins I need to handle OAuth flows on mobile devices?

2

oauth’s a pain in phonegap since it’s running in a webview, not a real browser. you’ll need the inappbrowser plugin to handle the auth popup correctly. also, set your redirect uri to something like http://localhost in your google console settings for mobile apps.

3

This is a whitelist issue - super common with PhoneGap apps. I hit the exact same problem and it was my config.xml blocking Google’s OAuth domains. Add access entries for accounts.google.com and oauth.googleusercontent.com to your whitelist.

Also, don’t load the Google APIs on window load like you’d do in a regular web app. Wait for the deviceready event instead. PhoneGap’s timing is different from normal DOM ready, and gapi fails silently if you get this wrong.

One more thing - check your OAuth client settings in Google Console. Set it as “web application,” not “Android application.” PhoneGap runs as a web app inside a native container, so it needs the web config.

4

Had this exact problem two years ago building a data collection app. Google’s JavaScript client library expects a normal browser, but PhoneGap runs everything in a restricted webview container. I switched to the cordova-plugin-googleplus plugin instead of gapi.auth directly - that’s what fixed it for me. The plugin handles native OAuth on Android and completely bypasses the webview issues. Just configure it with your OAuth client ID and it’ll authenticate through the device’s native Google account. BTW, Fusion Tables got deprecated in 2019. If you’re starting fresh, consider Google Sheets API or Cloud Firestore instead. Same auth approach works with both and they’ve got way better long-term support.