通过 JavaScript 未经授权访问 Google Calendar API答案

【问题标题】：Accessing Google Calendar API without authorization via JavaScript通过 JavaScript 未经授权访问 Google Calendar API
【发布时间】：2012-11-19 00:23:15
【问题描述】：

我正在尝试访问包含国定假日的公共日历（来自 Google 日历）：

calendarId: 'pt_br.brazilian#holiday@group.v.calendar.google.com'

由于日历是公开的，我想我可以只使用 API 密钥来访问它：

function OnLoadCallback() {
    var config = {
        client_id: '32j4lk32j5kj342l5h.googleuser.com', //fake client id
        scope: 'https://www.googleapis.com/auth/calendar.readonly'
    };
    gapi.client.setApiKey('fId345AM20HXXXXXXXXXXXXXXXXgT3f9kyp2REfkaw2'); //fake api key
    gapi.client.load('calendar', 'v3', function() {
        var today = new Date(),
            request;

        request = gapi.client.calendar.calendarList.get({
            calendarId: 'pt_br.brazilian#holiday@group.v.calendar.google.com',
            timeMin: (new Date(today.getFullYear(), today.getMonth(), today.getDay(), 0, 0, 0, 0)).toISOString(),
            timeMax: (new Date(today.getFullYear(), today.getMonth(), today.getDay(), 23, 59, 59, 999)).toISOString(),
            fields: 'items(creator(displayName,email),end,endTimeUnspecified,start,summary)'
        });

        request.execute(function(response) {
            window.alert('length of items: ' + response.items.length);
        });

    });
}

但是，我不断收到以下响应，这是一个 401（未经授权）错误：

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "required",
    "message": "Login Required",
    "locationType": "header",
    "location": "Authorization"
   }
  ],
  "code": 401,
  "message": "Login Required"
 }
}

有人可以澄清我想要做的事情是否可以实现吗？
最后，如果可能的话 - 参考我当前的代码，我必须改变什么？

【问题讨论】：

标签： javascript google-api oauth-2.0 google-calendar-api

【解决方案1】：

我可以使用 jQuery 做同样的事情。

var mykey = 'your_api_key'; // typically like Gtg-rtZdsreUr_fLfhgPfgff
var calendarid = 'you_calendar_id'; // will look somewhat like 3ruy234vodf6hf4sdf5sd84f@group.calendar.google.com

$.ajax({
    type: 'GET',
    url: encodeURI('https://www.googleapis.com/calendar/v3/calendars/' + calendarid+ '/events?key=' + mykey),
    dataType: 'json',
    success: function (response) {
        //do whatever you want with each
    },
    error: function (response) {
        //tell that an error has occurred
    }
});

但是您需要确保您已完成以下操作：-

1) 在https://code.google.com/apis/console注册一个项目
2) 生成简单的 API 访问密钥
3) 确保日历 API 在服务下被激活。

【讨论】：

您的示例如上所示，您是否有关于如何对传入项目进行排序的参考？
@blackhawk 您可以 console.log 响应并查看其中的内容。
@sola-oderinde 您能否提供您是如何找到日历 ID 的？ *编辑我在谷歌日历设置中找到了这个。另外仅供参考，您的日历将出现 404，除非它与公众共享。
这个有配额限制吗？

【解决方案2】：

使用普通的 javascript，我能够对上面的内容进行 tweek 处理并让它工作！这真的很有帮助，因为我发现 Google 文档主要关注用户访问和更新日历的 Auth 方面。真正深入到我需要拨打电话的确切位置（在什么精确的端点）更难。我显然把 XXXXX 放在了你的 calendarId 和 API Key 需要去的地方。

    //async function to handle data fetching
    async function getData () {
    //try catch block to handle promises and errors
    try {
        const calendarId = 'XXXXXXXXXXXXX@group.calendar.google.com'
        const myKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'
        //using await and fetch together as two standard ES6 client side features to extract the data
        let apiCall = await fetch('https://www.googleapis.com/calendar/v3/calendars/' + calendarId+ '/events?key=' + myKey)
        //response.json() is a method on the Response object that lets you extract a JSON object from the response
        //response.json() returns a promise resolved to a JSON object
        let apiResponse = await apiCall.json()
        console.log(apiResponse)
    } catch (error) {
        console.log(error)
    }
}
getData()

【讨论】：