【发布时间】：2018-05-07 16:20:22
【问题描述】：
我在 Google Script(HTML) 中使用 Google Picker API - 从网络摄像头捕获图像， 但它只显示空白屏幕。
我收到一个错误 - 拒绝在框架中显示 [url]，因为它将“X-Frame-Options”设置为“同源”。
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")
}
我已经在谷歌开发者控制台上设置了 javascript 源。
【问题讨论】：
-
have already setup the javascript origin on google developer console是什么意思？ Google Developer 的控制台中没有设置可以修改托管 webapp 的 URL - IFrame 所需的origin。您上面的代码从不设置 Picker 的 IFrame 的来源。 -
您是否按照完整的设置here？
标签： javascript google-apps-script google-drive-api google-picker