[How to]Ionic 2 with Google Drive APIs REST?


#1

i follow https://developers.google.com/drive/v3/web/quickstart/js with JavaScript

in quickstart.html

<html>
  <head>
    <script type="text/javascript">
      // Your Client ID can be retrieved from your project in the Google
      // Developer Console, https://console.developers.google.com
      var CLIENT_ID = '<YOUR_CLIENT_ID>';

      var SCOPES = ['https://www.googleapis.com/auth/drive.metadata.readonly'];

      /**
       * Check if current user has authorized this application.
       */
      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': true
          }, handleAuthResult);
      }

      /**
       * Handle response from authorization server.
       *
       * @param {Object} authResult Authorization result.
       */
      function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          // Hide auth UI, then load client library.
          authorizeDiv.style.display = 'none';
          loadDriveApi();
        } else {
          // Show auth UI, allowing the user to initiate authorization by
          // clicking authorize button.
          authorizeDiv.style.display = 'inline';
        }
      }

      /**
       * Initiate auth flow in response to user clicking authorize button.
       *
       * @param {Event} event Button click event.
       */
      function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
          handleAuthResult);
        return false;
      }

      /**
       * Load Drive API client library.
       */
      function loadDriveApi() {
        gapi.client.load('drive', 'v3', listFiles);
      }

      /**
       * Print files.
       */
      function listFiles() {
        var request = gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
          });

          request.execute(function(resp) {
            appendPre('Files:');
            var files = resp.files;
            if (files && files.length > 0) {
              for (var i = 0; i < files.length; i++) {
                var file = files[i];
                appendPre(file.name + ' (' + file.id + ')');
              }
            } else {
              appendPre('No files found.');
            }
          });
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

    </script>
    <script src="https://apis.google.com/js/client.js?onload=checkAuth">
    </script>
  </head>
  <body>
    <div id="authorize-div" style="display: none">
      <span>Authorize access to Drive API</span>
      <!--Button for the user to click to initiate auth sequence -->
      <button id="authorize-button" onclick="handleAuthClick(event)">
        Authorize
      </button>
    </div>
    <pre id="output"></pre>
  </body>
</html>

Myproject

www/index.php (Including an External JavaScript Library)

<script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var gapi: any;


@Component({
  templateUrl: 'build/pages/home/home.html'
})




export class HomePage {

  constructor(public navCtrl: NavController) {
let CLIENT_ID: string
let SCOPES: string[]
let authResult: any
let output:any
  }
output = " "
CLIENT_ID = '503034341738-0ds10qkh99c8kmvm5n56rtfbka4953ub.apps.googleusercontent.com';
SCOPES = ['https://www.googleapis.com/auth/drive.metadata.readonly'];

  checkAuth() {
alert(this.CLIENT_ID)
gapi.auth.authorize(
  {
    'client_id': this.CLIENT_ID,
    'scope': this.SCOPES.join(' '),
    'immediate': true
  }, this.handleAuthResult);
  }
  handleAuthResult(authResult) {
alert(this.CLIENT_ID + '/' + authResult)
if (authResult && !authResult.error) {
  // Hide auth UI, then load client library.
  this.loadDriveApi();
} else {
this.checkAuth();
}
  }
  loadDriveApi() {

gapi.client.load('drive', 'v3', this.listFiles);

  }
  listFiles(){
var request = gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
          });

          request.execute(function(resp) {
        this.appendPre('Files:');
        var files = resp.files;
        if (files && files.length > 0) {
          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            this.appendPre(file.name + ' (' + file.id + ')');
          }
        } else {
          this.appendPre('No files found.');
        }
      });


  }
appendPre(message){

this.output = this.output + ' / ' + message;



}


}

in Error

Uncaught TypeError: Cannot read property 'CLIENT_ID' of undefined

my english is not very good,so sry


#2

Have you solved this?

I’m not sure if you’re getting the error on
alert(this.CLIENT_ID)
or
gapi.auth.authorize({'client_id': this.CLIENT_ID})
…but the error is telling you that this is undefined in the given context.

Try adding the following line to app/src/declarations.d.ts:

declare const gapi: any;

That will declare the gapi variable in Ionic.


#3

any updates? @thebossza101