在Angular2/TypeScript中使用GoogleAPI

之前的一个问题让我得到了大部分工作(希望如此),但是我似乎无法从TypeScript中获得Google API.我基本上遵循这个示例:https://developers.google.com/api-client-library/Javascript/samples/samples

我没有看到错误,运行API调用的方法不会被触发.

我已经安装了gapi和gapi.auth的类型.initClient()不会抛出任何错误,它似乎永远不会完成.当前用户是以Google用户身份登录的,但尚未获得API调用授权.这是我要处理的下一件事,但现在这个电话甚至都没有.如下所示,我在方法的开头添加了一个未被调用的日志行.

initGapiClient() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({
      apiKey: '',
      discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
      clientId: 'xxxxxx.apps.googleusercontent.com',
      scope: 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly'
    }).then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listPlaylists();
    } else {
      alert("Can't sign in");          
    }
  }

  listPlaylists() {
    console.log("Called listPlaylists");
    ... 
    API call here
    ... 
  }

eko.. 5

更改

.then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

至

.then(()=> {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this));

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

如果你使用函数你this将不会引用你的组件并将函数作为参数传递,.listen(this.updateSigninStatus);也会使外部this绑定到此函数.

我建议你阅读:如何在回调中访问正确的`this`上下文？

更改

.then(function () {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

至

.then(()=> {
      // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this));

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });

如果你使用函数你this将不会引用你的组件并将函数作为参数传递,.listen(this.updateSigninStatus);也会使外部this绑定到此函数.

我建议你阅读:如何在回调中访问正确的`this`上下文？

在弄乱了这个之后,我发现我的用例的一个更好的样本是这个:https://cloud.google.com/compute/docs/tutorials/Javascript-guide

请注意,我也在使用第一个建议:

gapi.auth2.getAuthInstance().isSignedIn.listen(status => this.updateSigninStatus(status));

在我意识到我必须首次使用我想要的所有东西后,我能够让一切正常工作 - 我想我可以稍后再用不同的范围进行授权.我现在在index.html中这样做:

    var PROJECT_ID = 'projectname';
    var CLIENT_ID = 'xxxx.apps.googleusercontent.com';
    var API_KEY = '1234';
    var SCOPES = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly';

    /**
    * Authorize Google Compute Engine API.
    */
    function authorization() {
      gapi.client.setApiKey(API_KEY);
      gapi.auth.authorize({
        client_id: CLIENT_ID,
        scope: SCOPES,
        immediate: false
      }, function(authResult) {
          if (authResult && !authResult.error) {
            window.alert('Auth was successful!');
          } else {
            window.alert('Auth was not successful');
          }
        }
      );
     }