从本地HTML / JavaScript(没有Web服务器)访问Google API
access google api's from local html/javascript (without webserver)
是否可以从本地html文件(使用javascript)访问Google API(日历v3)?我想在我的浏览器中打开 c:''temp''gsotto''gsotto.htm 而不是通过 IIS 提供文件。
如果我从以下位置提供我的文件,它可以工作
http://localhost/
通过网络服务器。在谷歌 api 控制台中,我有一个"Web 应用程序的客户端 ID",其中包含:
Redirect URIs: http://localhost
JavaScript origins: http://localhost
以及浏览器应用程序的"简单 api 访问"密钥(带引用)
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。您看到工作的 GET 不是 XHR/AJAX,而是<script>
标签,因此对于大多数现代浏览器来说,答案是否定的。请参阅此处的讨论。如果您运行带有--allow-file-access-from-files
和--disable-web-security
的 Chrome(链接),您可能会让它正常工作。
相关文章:
- node.js将字符串转换为要上传到Web服务器的文件
- 根据HTML文件名授予web服务器写入权限
- 从Web服务器下载图像按钮单击使用JavaScript
- 使用c#在Web服务器上运行JavaScript方法
- 我如何设置HTTP头“;访问控制允许起源”;用于来自thttpd web服务器的HTTP响应
- 用于在web服务器中上载的文件路径
- 如何在服务器中为我的Firefox OS应用程序加载远程内容-在Web和FxOS设备中
- Javascript/web-dev:为什么你需要一个服务器来连接硬件
- Web服务器意外退出,正在重新启动新实例
- PhantomJS与嵌入式web服务器只使用一个CPU
- 将服务器托管的Web应用程序连接到本地Web套接字
- 错误301在web服务器上永久移动
- jQuery插件在本地主机上运行良好,但在web服务器上却与bg镜像混淆
- web工作程序中不同的服务器请求行为
- 将web浏览器客户端输入传递给服务器Java源代码
- 如何确保只有您的javascript才能连接到您的Web服务器
- Angular远程服务器web服务授权
- 如何防止我的服务器web套接字淹没我的浏览器客户端
- 客户端-服务器Web应用程序
- 使安全“;“私人场地区域”;使用准无服务器web架构(AJAX模板魔术)