Angular2/Ionic2 gapi.client.drive 中的 Google Drive API [英] Google Drive API in Angular2/Ionic2 gapi.client.drive
本文介绍了Angular2/Ionic2 gapi.client.drive 中的 Google Drive API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写 Angular2/Ionic2 应用程序来显示列表并将文件上传到 Google Drive.使用 Google 登录可以正常工作，但 gapi.client.drive 未定义.我应该怎么做才能解决它或有方法呢?
I write Angular2/Ionic2 app to show list and upload file to Google Drive.
Login with Google works fine but gapi.client.drive got undefined. What should I do to solution it or have method instead?
我安装了
npm install --save @types/gapi
npm install --save @types/gapi.auth2
还有我的代码home.ts
import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import { DriveService } from '../../services/drive.service';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [ DriveService ]
})
export class HomePage {
googleLoginButtonId = "google-login-button";
userAuthToken = null;
userDisplayName = "empty";
auth2: any;
constructor(public navCtrl: NavController, private _zone: NgZone, private driveService: DriveService) {
}
start() {
gapi.load('auth2', () => {
// Retrieve the singleton for the GoogleAuth library and set up the client.
this.auth2 = gapi.auth2.init({
client_id: 'xxx.googleusercontent.com',
scope: 'https://www.googleapis.com/auth/drive'
});
this.attachSignin(document.getElementById('customBtn'));
});
};
attachSignin(element) {
console.log(element.id);
this.auth2.attachClickHandler(element, {},
(googleUser) => {
this._zone.run(() => {
this.userAuthToken = googleUser.getAuthResponse().id_token;
this.userDisplayName = googleUser.getBasicProfile().getName();
});
},(error) => {
alert(JSON.stringify(error, undefined, 2));
});
}
signOut() {
this.auth2 = gapi.auth2.getAuthInstance();
this.auth2.signOut().then(() => {
console.log('User signed out.');
this._zone.run(() => {
this.userAuthToken = null;
this.userDisplayName = "empty";
});
});
}
listFile() {
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) {
var pre = document.getElementById('output');
var textContent = document.createTextNode(message + '
');
pre.appendChild(textContent);
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="start()">Start</button>
<button ion-button (click)="signOut()">Logout</button>
<div class="main-application">
<p>Hello, {{userDisplayName}}!</p>
</div>
<div id="gSignInWrapper">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<button ion-button class="buttonText">Google</button>
</div>
</div>
<button ion-button (click)="listFile()">Get Drive</button>
</ion-content>
推荐答案
我的回答:添加到 index.html Google API 库，在 <body> 标签
My answer:
add to index.html Google API library, after <body> tag
<script src="https://apis.google.com/js/platform.js" async defer></script>
这篇关于Angular2/Ionic2 gapi.client.drive 中的 Google Drive API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
