CODEWITHSUNDEEP
javascriptgoogle-apioauth-2.0google-calendar-api
fegemo
fegemo

Reputation: 2594

Accessing Google Calendar API without authorization via JavaScript

I'm trying to access a public calendar (from Google Calendar) that contains national holidays:

calendarId: 'pt_br.brazilian#[email protected]'

As the calendar is public, I thought I would be able to access it using only the API Key:

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#[email protected]',
            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);
        });

    });
}

However, I keep getting the following response, which is a 401 (unauthorized) error:

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

Can someone clarify whether what I'm trying to do is achievable or not?
And finally if it is possible - what do I have to change referring to my current code?

Upvotes: 23

Views: 24662

Answers (2)

dwbra
dwbra

Reputation: 129

Using plain javascript I was able to tweek the above and also get it to work! This was really helpful as Google docs I found focus mainly on Auth side of things for users accessing and updating calendars. It was tougher to actually get down to where exactly (at what precise endpoint) did I need to make my call to. I've obviously put XXXXX's where your calendarId and API Key need to go.

    //async function to handle data fetching
    async function getData () {
    //try catch block to handle promises and errors
    try {
        const calendarId = '[email protected]'
        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()

Upvotes: 1

Sola Oderinde
Sola Oderinde

Reputation: 1046

I was able to do the same thing using jQuery. 

var mykey = 'your_api_key'; // typically like Gtg-rtZdsreUr_fLfhgPfgff
var calendarid = 'you_calendar_id'; // will look somewhat like [email protected]

$.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
    }
});

However you need to be sure you have done the following:-

1) Register a project at https://code.google.com/apis/console
2) Generate a Simple API Access key
3) Ensure Calendar API is activated under services.

Read more at https://developers.google.com/google-apps/calendar/firstapp

Upvotes: 37

Related Questions