Google Picker API + Angular2 无法在“DOMWindow”上执行“postMessage”

Question

我希望将 Google Picker API 集成到我的 Angular 2 应用程序中。

我的 HTML 代码：

<h1>
  {{title}}
</h1>
<button (click)="onApiLoad()">Click Me!</button>

我的组件打字稿代码：

import { Component } from '@angular/core';
declare var gapi:any;
declare var google:any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';
  developerKey = 'AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ';
  clientId = "487432935414-ekonc03orunp50312oqmlrauutorpb53.apps.googleusercontent.com"
  scope = ['https://www.googleapis.com/auth/drive.readonly'];
  pickerApiLoaded = false;
  oauthToken?: any;

  constructor() { }

  onApiLoad() {
    gapi.load('auth', {'callback': this.onAuthApiLoad.bind(this)});
    gapi.load('picker', {'callback': this.onPickerApiLoad.bind(this)});
  }

  onAuthApiLoad() {
    gapi.auth.authorize(
        {
          'client_id': this.clientId,
          'scope': this.scope,
          'immediate': false
        },
        this.handleAuthResult);
  }

  onPickerApiLoad() {
    this.pickerApiLoaded = true;
    this.createPicker();
  }

  handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
      if (authResult.access_token) {
        var pickerBuilder = new google.picker.PickerBuilder();
        var picker = pickerBuilder.
            enableFeature(google.picker.Feature.NAV_HIDDEN).
            setOAuthToken(authResult.access_token).
            addView(google.picker.ViewId.PHOTOS).
            setDeveloperKey('AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ').
            setCallback(function (e){
              var url = 'nothing';
              console.log(url);
              if (e[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var doc = e[google.picker.Response.DOCUMENTS][0];
                url = doc[google.picker.Document.URL];
              }
              var message = 'You picked: ' + url;
              console.log(message);
            }).
            build();
        picker.setVisible(true);
      }
    }
  }

  createPicker() {
    if (this.pickerApiLoaded && this.oauthToken) {
      var picker = new google.picker.PickerBuilder().
          addView(google.picker.ViewId.DOCUMENTS).
          setOAuthToken(this.oauthToken).
          setDeveloperKey(this.developerKey).
          setCallback(this.pickerCallback).
          build();
      picker.setVisible(true);
    }
  }

  pickerCallback(data) {

    var url = 'nothing';
    console.log(url);
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
    }
    var message = 'You picked: ' + url;
    alert(message);
  }

我可以登录谷歌并获得访问令牌，但之后我无法在谷歌驱动器中查看文档。

而不是我得到以下错误：

1. cb=gapi.loaded_0:96 无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源 ('https://docs.google.com') 与收件人窗口的来源 ('https://localhost:4200') 不匹配。
2. 加载“https://docs.google.com/picker?protocol=gadgets&origin=https%3A%2F%2Flocalhost%3A4200&navHidden=true&oauth_token=ya29.GlskBRj74kFwZFmKi3ecOvMG9yGYjoTnaaxpf84M_qSOwANu_m3uSvzciXupB35CXxHvfHgNQuS_pfVG9lwRnrKA4JQiU5mTX3hNEWxBQ69cJTMyTnn0LzsQJOgB&developerKey=AIzaSyDFf3LoI2iGoq21Py5mx0YdRZC4-wOu2jQ&hostId=localhost&relayUrl=https%3A%2F%2Flocalhost%3A4200%2Ffavicon.ico&nav=((%22photos%22))&rpctoken=vcwxj7g2b339&rpcService=sz95b67m0h97&thirdParty=true”时遇到无效的“X-Frame-Options”标头：“ALLOW-FROM https://localhost:4200”不是可识别的指令。标题将被忽略。

输出：

Answer 1

这是一个 CORS 问题。您的 client_id 凭据应该将您的 localhost 列入https://console.developers.google.com/ 中的白名单

1. 转到凭据
2. 点击您在 OAuth 2.0 客户端 ID 下使用的客户端 ID
3. 在 Authorized JavaScript Origins 下添加您的 localhost，即 http://localhost:8601