Google project and credentials for Google APIs

Do you want to make an application that calls the Google APIs and use Google data, like calendar data?

Before your application can communicate with the Google APIs you will need to setup credentials that is used to identify your application before access is being given to Google data. The credentials “lives” inside a project. This post describes how you setup a Google project and credentials. In the next post I will show you how to use the credentials to call the Google API.

 

Open the url: https://console.developers.google.com/ and sign in with your Google account.

 

The dashboard will appear when you are logged in.

First thing you need to do is to create a project that can hold the credentials. This is done by selecting the menu Select a project.

 

Now click on NEW PROJECT.

 

Give the project a name of your choice (my project is called Demo) and click CREATE. It might take a moment to create the project.

 

When the project has been created you will be redirected back to the dashboard and the selected project will be the project that you just created (in my case Demo). You are now ready to define the APIs that your project should have access to – you can always change this later. For, now we will enable the Calendar API.  To enable the Calendar API, click the Library.

 

You can now search and look for all the APIs that your application can get access to. But for this demo we only need to find the Calendar API. To do this, search for Calendar in the Search for API and Services.

 

You should now see 2 hits. Click on the Google Calendar API. This is the API that will give your application access to the user’s calendar.

 

You will now see details for the API. Click on ENABLE. This will enable the API for your project. This is not the same as you can call it. You still need to add the API  – see later.

 

After the API has been enabled you will be redirected to the dashboard for the project. Now create the credentials – these are used for authenticating your application. Click on CREATE CREDENTIALS.

 

You should now see the credential setup page. First, you need to select the API that your project will be given access to. You will be able to add/delete APIs to the project later but for now we will add the Calendar API that we enabled earlier – if you skipped that step then just go back and do it now. Click on the drop down and select the Google Calendar API.

After selecting the Google Calendar API you need to choose from where you will be calling the API and what data the API should return. For this tutorial select the Web browser (Javascript) in the drop down and select User data as the data to be accessed/returned.  Then click the button What credentials do I need?

Web browser (Javascript) is also the one that should be selected if you are creating a SPA (Single Page Application like Angular) and want to make the front end take care of ‘everything’.

 

The popup shown when the button What credentials do I need? is clicked will give you the opportunity to create a consent page to your users – click SET UP CONSENT SCREEN.

 

For this tutorial you will just need to setup the Application name. You can set it to whatever you like – I sat it to Demo. Then add a Support email. Finally you need to add the scope for the calendar. This is done by the Add scope button and then select

and click add. Then you should see the calendar.readonly scope (this will let your application have access to the calendar data, read only access). Now, remember to press Save at the bottom of the page.

 

You should now see the consent screen menu. Note that for a real application you will need to get your application verified but for this tutorial there is no need to get it verified.

 

Because the consent page wasn’t setup, then the process of adding the credentials was skipped (looks like an error in the process) but this means that you will need to add the credentials again. That is, you need to get back to adding the credentials. Click on the Credentials menu. Then click CREATE CREDENTIALS and then Help me choose.

 

You will now see a form that you have seen before. Just fill the form again (as you did before).

 

The next step in adding the credentials is setting up a Name for the credentials. In this tutorial the name is Web client 1. Next thing is to define the Authorized Javascript origin,  this defines from where Google will accept to be called from when your user is to authorized – this will be your web application URI. For this tutorial type http://localhost and press Enter. Finally, define the Authorized redirect URI, this defines the URI that Google will redirect the user when he has been authorized (remember to press Enter). For this tutorial type http://localhost. In a real application this will be the URI for your web application. Now click Create OAuth client ID.

 

The credentials has now been added and you are able to see your client ID. This ID is needed when communicating with Google OAuth2 APIs. Just click Done.

 

You can now see the added OAuth2 client ID.

 

You have now create a project with credentials that your application can use to call the Google APIs. In the next tutorial I will show you how to call the API and get data back from the API.