Javascript 如何通过谷歌日历API v3永久访问我自己的谷歌日历?
我想在我的网站(前端)上建立一个界面,使客户端能够在我自己的谷歌日历(后端)中创建事件。我希望通过Google Calendar API v3,使用JavaScript和/或PHP技术实现这一点 虽然使用这个API对我来说是全新的,但我还是从下面的代码开始,这是一个稍微修改的版本。它实际上就像一个符咒,但不能满足我的需要 我需要的是授权我的特定站点(比如说“axel.com/calendar”)对我的谷歌日历中的事件进行“永久”访问,并能够根据用户的特定操作添加事件。界面的实际用户根本不需要授权任何东西 对于我现在倾向于使用的UIJavascript 如何通过谷歌日历API v3永久访问我自己的谷歌日历?,javascript,php,google-calendar-api,Javascript,Php,Google Calendar Api,我想在我的网站(前端)上建立一个界面,使客户端能够在我自己的谷歌日历(后端)中创建事件。我希望通过Google Calendar API v3,使用JavaScript和/或PHP技术实现这一点 虽然使用这个API对我来说是全新的,但我还是从下面的代码开始,这是一个稍微修改的版本。它实际上就像一个符咒,但不能满足我的需要 我需要的是授权我的特定站点(比如说“axel.com/calendar”)对我的谷歌日历中的事件进行“永久”访问,并能够根据用户的特定操作添加事件。界面的实际用户根本不需要授权
谷歌日历API快速启动
授权
退出
var客户端ID=“”;
var API_键=“”;
var DISCOVERY_DOCS=[”https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
变量作用域=”https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton=document.getElementById('authorized-button');
var signburatton=document.getElementById('signout-button');
函数handleClientLoad(){
load('client:auth2',initClient);
}
函数initClient(){
gapi.client.init({
API密钥:API_密钥,
clientId:客户端ID,
发现文档:发现文档,
范围:范围
}).然后(函数(){
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick=handleAuthClick;
SignerButton.onclick=handleSignoutClick;
});
}
函数updateSigninStatus(isSignedIn){
如果(伊西涅丁){
authorizeButton.style.display='none';
signexputton.style.display='block';
listUpcomingEvents();
}否则{
authorizeButton.style.display='block';
signexputton.style.display='none';
}
}
函数handleAuthClick(事件){
gapi.auth2.getAuthInstance().signIn();
}
函数handleSignoutClick(事件){
gapi.auth2.getAuthInstance().signOut();
}
函数appendPre(消息){
var pre=document.getElementById('content');
var textContent=document.createTextNode(message+'\n');
pre.appendChild(文本内容);
}
函数listUpcomingEvents(){
gapi.client.calendar.events.list({
'日历ID':'主要',
'timeMin':(新日期()).toISOString(),
“showDeleted”:false,
“singleEvents”:对,
“maxResults”:10,
“订购人”:“开始时间”
}).然后(功能(响应){
var事件=response.result.items;
appendPre(“即将到来的事件:”);
如果(events.length>0){
对于(i=0;i
您可以使用服务帐户凭据,而不是使用OAuth密钥
OAuth用于访问需要用户同意的客户端日历
相反,您应该使用服务帐户凭据来修改您自己的日历中的事件,这些事件将与用户共享
在GoogleAPI开发者控制台上选择项目,并选择服务帐户作为凭证,而不是OAuth
您将获得一个相应的json凭证文件,可用于后端的身份验证
此链接将在这里帮助您
(特别是在使用PHP Laravell时)
您可以使用服务帐户凭据,而不是使用OAuth密钥 OAuth用于访问需要用户同意的客户端日历 相反,您应该使用服务帐户凭据来修改您自己的日历中的事件,这些事件将与用户共享 在GoogleAPI开发者控制台上选择项目,并选择服务帐户作为凭证,而不是OAuth 您将获得一个相应的json凭证文件,可用于后端的身份验证 此链接将在这里帮助您 (特别是在使用PHP Laravell时)
AFAIK,访问令牌的生命周期有限。如果您的应用程序需要在单个访问令牌的生命周期之外访问Google API,它可以获得刷新令牌。刷新令牌允许应用程序获取新的访问令牌。检查,关于使用OAuth 2.0访问Google API。希望这有帮助。好吧,访问令牌的生命周期有限。如果您的应用程序需要在单个访问令牌的生命周期之外访问Google API,它可以获得刷新令牌。刷新令牌允许应用程序获取新的访问令牌。检查,关于使用OAuth 2.0访问Google API。希望这能有所帮助。我正试图做OP想做的事情,但我还有一个额外的困难,那就是我无法访问服务器(我正在使用Shopify),所以我必须在客户端完成所有事情。可能吗?我可以接受自己管理日历(比如说,我输入了一堆事件),然后在客户端网站上查询日历并处理一些逻辑,但是能够存储事件也很棒。@AnkurRanjan现在看起来好多了。感谢您抽出时间:)@MichaelStachowsky抱歉,我对Shopify平台没有太多想法,我是否可以建议使用单独的后端服务器来管理日历ev
<!DOCTYPE html>
<html>
<head>
<title>Google Calendar API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<pre id="content"></pre>
<script type="text/javascript">
var CLIENT_ID = '<YOUR_CLIENT_ID>';
var API_KEY = '<YOUR_API_KEY>';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listUpcomingEvents();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
function listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
}).then(function(response) {
var events = response.result.items;
appendPre('Upcoming events:');
if (events.length > 0) {
for (i = 0; i < events.length; i++) {
var event = events[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
appendPre(event.summary + ' (' + when + ')')
}
} else {
appendPre('No upcoming events found.');
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>