Question

我在Google Script（HTML）中使用Google Picker API - 从WebCam捕获图像，但它只显示空白屏幕。

我收到错误 - 拒绝在一个框架中显示[url]，因为它设置了“X-Frame-Options＆＃39;来自同一个来源＆＃39;

picker.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>
    <style>
      body {
        display: flex
      }
      #views {
        border-collapse: collapse;
        margin: 10px;
      }
      #views tr {
        border: 0;
        border-top: 1px solid #e0e0e0;
      }
      #views td {
        border-bottom:1px solid #e0e0e0;
        border-spacing: 0;
        padding: 5px
      }
    </style>

    <script type="text/javascript">
      // The Browser API key obtained from the Google Developers Console.
      var developerKey = '*******Developer Key Here***********';
      // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
      var clientId = "*******Client ID ***********";
      // Scope to use to access user's photos.
      var scope = [
        'https://www.googleapis.com/auth/drive',
        'https://www.googleapis.com/auth/photos',
        'https://www.googleapis.com/auth/youtube'
      ];
      var authApiLoaded = false;
      var pickerApiLoaded = false;
      var oauthToken;
      var viewIdForhandleAuthResult;
      // Use the API Loader script to load google.picker and gapi.auth.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }
      function onAuthApiLoad() {
        authApiLoaded = true;
      }
      function onPickerApiLoad() {
        pickerApiLoaded = true;
      }
      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker(viewIdForhandleAuthResult, true);
        }
      }
      // Create and render a Picker object for picking user Photos.
      function createPicker(viewId, setOAuthToken) {
        if (authApiLoaded && pickerApiLoaded) {
          var picker;
          var origin = (window.location.protocol + '//' + window.location.host)

          if(authApiLoaded && oauthToken && setOAuthToken) {
            picker = new google.picker.PickerBuilder(origin).
              addView(viewId).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
              console.log('picker if',picker)
          } else {
            picker = new google.picker.PickerBuilder().
              addView(viewId).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
               console.log('picker else',picker)
          }

          picker.setVisible(true);
        }
      }
      // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = JSON.stringify(data[google.picker.Response.DOCUMENTS][0], null, "  ");
        }
        var message = 'You picked: <br>' + doc;
        document.getElementById('result').innerHTML = message;
      }
    </script>
  </head>
  <body>
    <a href="https://github.com/howdy39/google-picker-api-demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <table id="views">




      <tr>
        <td rowspan="3">Other(require authorization)</td>
        <td><a href="#WEBCAM" target="_parent" id="WEBCAM">Webcam photos.</a></td>
      </tr>

    </table>

    <pre id="result"></pre>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
    <script type="text/javascript">


      Array.prototype.forEach.call(document.querySelectorAll('#views a'), function (ele) {
        ele.onclick = function () {
          var viewIds = {
            "WEBCAM": google.picker.ViewId.WEBCAM,
          }
          var id = this.id;
          var viewId = viewIds[id];
          var setOAuthToken = true;

          if (id === 'IMAGE_SEARCH' || id === 'MAPS' || id === 'VIDEO_SEARCH') {
            setOAuthToken = false;
            createPicker(viewId, setOAuthToken);
          } else {
            if(authApiLoaded && !oauthToken) {
              viewIdForhandleAuthResult = viewId;
              window.gapi.auth.authorize(
                {
                  'client_id': clientId,
                  'scope': scope,
                  'immediate': false
                },
                handleAuthResult
              );
            } else {
              createPicker(viewId, setOAuthToken);
            }
          }
          return false;
        }
      });
    </script>
  </body>
</html>

在 code.gs

中

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('picker.html')
    .setTitle("AMB Form")
}

我已经在google开发者控制台上设置了javascript来源。

我已关注 - https://github.com/howdy39/google-picker-api-demo

Answer 1

尝试调用PickerBuilder的setOrigin(origin)方法。

 var picker = new google.picker.PickerBuilder()
            .addView(view)
            .setMode(mode)
            .setOAuthToken(token)
            .setDeveloperKey(API_KEY)
            .setCallback(callback)
            .setOrigin(google.script.host.origin)
            .build();

根据PickerBuilder.setOrigin（）方法的信息，它

设置选择器对话框的来源。原点应设置为最顶级的window.location.protocol + '//' + window.location.host 页面，如果您的应用程序在IFrame中运行。

对于Apps脚本网络应用，您可以使用google.script.host.origin属性获取此内容。

Google Picker API iframe不可见

1 个答案: