Question

我正在尝试在Meteor应用程序中使用Google Picker。我不是专家，我只是按照Google Picker API页面https://developers.google.com/picker/docs/index上的示例进行操作，但无法使其正常工作。

以下是我在客户端尝试的内容，当然我更改了devKey和客户端ID：

// The Browser API key obtained from the Google Developers Console.

var developerKey = 'AIzaSyC9gfrgtnj6fd00hDau3B0LSTqajeDIyl0';

      // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
      var clientId = "582812345678-5t9joqkb5d1rfders25fhr5u6k28s9lc.apps.googleusercontent.com"

      // Scope to use to access user's photos.
      var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

    Template.gPicker.helpers({
      // Use the API Loader script to load google.picker and gapi.auth.
        onApiLoad : function() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      },

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

        onPickerApiLoad : function() {
        pickerApiLoaded = true;
        createPicker();
      },

        handleAuthResult : function(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      },

      // Create and render a Picker object for picking user Photos.
        createPicker : function() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              addView(google.picker.ImageSearchView).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      },

      // A simple callback implementation.
        pickerCallback : function(data) {
        var url = 'nothing';
        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;
        document.getElementById('result').innerHTML = message;
      }

    });

然后在模板上：

<head>
  <title>imagesearch</title>

</head>

<body>

  {{> gPicker}}
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

</body>

<template name="gPicker">

   <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control recherche">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
  </div>

  <div id="result"></div>

</template>

将Google Picker与MeteorJS集成

0 个答案: