gpt4 book ai didi

javascript - 从本地 html/javascript(没有网络服务器)访问 google apis

转载 作者:数据小太阳 更新时间:2023-10-29 04:44:39 24 4
gpt4 key购买 nike

是否可以从本地 html 文件(使用 javascript)访问 google api(日历 v3)?我想在浏览器中打开 c:\temp\gsotto\gsotto.htm,而不是通过 IIS 提供文件。

如果我从

提供我的文件,它就会工作
http://localhost/ 

通过网络服务器。在 google api 控制台中,我有一个“Web 应用程序的客户端 ID”:

Redirect URIs:  http://localhost
JavaScript origins: http://localhost

和浏览器应用程序的“简单 api 访问” key (带引用)

Firebug shows me this when accessing through http://localhost/gsotto/gsotto.htm
GET http://localhost/gsotto/gsotto.htm
GET https://apis.google.com/js/client.js?onload=handleClientLoad
GET https://apis.google.com/_/apps-static/_/js/gapi/client....cb=gapi.loaded_0
GET https://ssl.gstatic.com/accounts/o/...-postmessagerelay.js
GET https://accounts.google.com/o/oauth2/auth?client_id=.....&authuser=0
GET https://ssl.gstatic.com/accounts/o/....-postmessage.js

and this when access through c:\...
GET https://apis.google.com/js/client.js?onload=handleClientLoad
GET https://apis.google.com/_/apps-static/_/js/gapi/client.....cb=gapi.loaded_0
GET https://ssl.gstatic.com/accounts/o/.....-postmessagerelay.js
and nothing more....

do i need to use other settings in the google api console for this to work?


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
// google calendar id
var calId = "....";

var clientId = "..."; // oAuth2 webapp
var apiKey = "....";// Key for browser apps (with referers)

// google authentication scopes
var scopes = 'https://www.googleapis.com/auth/calendar';
//https://www.googleapis.com/auth/calendar.readonly

// Use a button to handle authentication the first time.
function handleClientLoad() {
console.log('handleClientLoad');
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}

function checkAuth() {
console.log('checkAuth');
try {

gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
catch(e)
{
console.log('e');
console.log(e);
}
}


function handleAuthResult(authResult) {

console.log('handleAuthResult');
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
console.log('result ok');
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
console.log('authresult null or error');
console.log(authResult);
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}

function handleAuthClick(event) {
console.log('handleAuthClick');
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}

function makeApiCall() {
console.log('makeApiCall');
gapi.client.load('calendar', 'v3', function() {
var request = gapi.client.calendar.events.list({
'calendarId': calId
});

request.execute(function(resp) {
console.log('result:');
console.log(resp);

for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('events').appendChild(li);
}
});
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<div id="content">
<ul id="events"></ul>
</div>
</body>
</html>

最佳答案

根据您的浏览器,您会发现从 file:// 运行时无法使用 AJAX。跨站点(或跨协议(protocol))原因的协议(protocol)。您看到有效的 GET 不是 XHR/AJAX,而是 <script>标签,所以对于大多数现代浏览器来说答案是否定的。查看discussion here .如果您使用 --allow-file-access-from-files 运行 Chrome,您可能会得到它的工作和 --disable-web-security (link)。

关于javascript - 从本地 html/javascript(没有网络服务器)访问 google apis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11914119/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com