Integrating Google Calendar API to web app using serverless Node.js functions (Part 1 of 2)
Let’s say you are building an app and need to access a user’s Google Calendar Events. Just say it, humor me. Or maybe you’re just curious on what this new thing “serverless” is, which everyone keeps talking about. Or maybe, you want to build something Node.js and stumbled upon this page.
Prerequisites
You know how to use Firebase SDK, if not, please go through this article on basics of using Firebase and also the official docs and samples.
Also, assuming you have basic knowledge of Node.js.
What are we building today?
The following steps would guide you through setting up a Firebase project, building a simplistic web app that prompts the user to provide permissions for accessing the Google Calendar. The code, then uses these permissions(OAuth 2.0) to fetch data from user’s Calendar via the Google Calendar API.
If this is what’s happening to you, don’t be alarmed.
We’ll go through everything step by step.
What is this serverless you speak of?
Google Cloud Functions, a serverless compute platform, lets you write backend code without needing to manage and scale your own servers. In other words, expose functions which need to run when a particular event occurs. Triggers, for example, can either be a HTTP request to a certain URL, database CRUD events etc.
Enough talk, let’s build something
First step, Sign up on Firebase Console
Click “Add Project”.
Name your project a little better than what I did and click “Continue”.
Also, note down the Project ID somewhere.
At this point, we assume that you have installed firebase-tools and logged into firebase using CLI.
Open the terminal, navigate to your project folder and run
firebase init functionsSelect the project we just created as the default project when prompted.
Choose JavaScript as the preferred language when prompted, for this guide has been written in JS.
We’ll now spend some time setting up you Google account to enable authentication and consent screen, then come back to coding. This might take a few mechanical steps, don’t be overwhelmed.
Setting up your Google console
Open https://console.cloud.google.com . On top left, click “Select a project”
And you guessed it right, select the project we created on the Firebase console.
Enabling Calendar API for your Cloud Console
Open the following link in your browser https://console.developers.google.com/apis/library/calendar-json.googleapis.com
and click “Enable”.
Setting up the OAuth consent screen
On the navigation sidebar on the left, go to “APIs & Services” > “Credentials”
You may have used websites where, for accessing your Google+ or Gmail account, the website redirects you to a “Consent Screen” where you allow the website with some permissions. It may look like this.
At some point of time, our Calendar App would also need to ask for user’s permission. We would now setup the same screen for the web app we are creating.
Go to the “OAuth consent screen” tab shown below.
You may change the “Application Name” here. This changes the display name which shows on the Consent Screen.
Select your email from the drop down for “Support Email”
Scroll down a bit, you would see the “Scope for Google APIs” section.
This section lets you set the scope of Google APIs that you want to get access to. Here, we are going to ask for read-only access to Google Calendar APIs.
Click on “Add scope” button . A popup appears.
Click on the “manually paste” link on right bottom and add the calendar permissions as shown.
https://www.googleapis.com/auth/calendar.readonlyScroll down a bit and you would see the “Authorized domain” Section.
You need to add the domain at which our Google Cloud Functions would be hosted.
But we haven’t done anything yet with cloud functions, how do we know the URL(domain) beforehand?
Well, we do.
Your URL would be
us-central1-<your project id>.cloudfunctions.netClick Save. You OAuth Consent Screen is all set.
Setting up credentials
Go to “Credentials” Tab
Click on “Create Credentials” drop down. Select “OAuth Client ID”.
Select “Web application” option.
Add the “Authorized JavaScript origins” value for the domain we finalized above., i.e
https://us-central1-<your project id>.cloudfunctions.netAlso, add a “Authorized redirect URI” which would be
https://us-central1-<your project id>.cloudfunctions.net/tokenNotice the /token we added at the end. This is the URI at which one of our functions would be setup. But we’ll get to that later.
Click “Create”.
On the resulting screen you can see the entry you just created.
Click the “Download” icon on the right of the new created entry and save the file it generates. We would be using that in the code.
And we’re done with Google Cloud Platform setup.
If you’ve made it this far, great. In the next and final article we would look at the actual code for serverless Google cloud functions and test our app. Please find it here.
Written with ❤
