Google OAuth 2.0 - PART I

In this article you will learn how to integrate with Google's authentication service inside Dittofi using HTTP requests inside actions.

Google offers all kinds of services that you can integrate into your app in order to give your app an immediate functional boost. In order to integrate with these services we can use the Google API.

In this article we are going to learn how to integrate with Google's authentication service so that we can add a google login to our app.

If you're not familiar with how OAuth 2.0 works, we recommend reading the Introduction to OAuth 2.0 before following the user guide.

  • Step 1. Register our app with the Google API

  • Step 2. Some preliminary set up in Dittofi

  • Step 3. Send the access token to the API

  • Step 4. Refresh the access token if necessary

Step 1. Register our app with the Google API

Before we start to integrate with the Google API, we first need to register our app with the Google API. This will allow us to obtain Google OAuth Credentials from the Google API Console.

To do this, begin by making sure that you're logged into your Google account. Next, to obtain OAuth 2.0 client credentials you need to visit the Google API Console.

From inside here, you will be presented with the following screen.

You need to pick your country of residence from the dropdown list and then click to agree with the terms of service, as shown below.

Next, click "Create Credentials" on the left, as shown below.

Once on the credentials screen, you can see that there are no OAuth 2.0 ClientIDs, this is highlighted below by the red box.

On this screen, you have two options for the type of Google user that you want to be able to authenticate against your app, either Internal users, i.e. those within your organization (as defined by their Google accounts) or External users, i.e. any user with a Google Account.

Again, you can add more scopes if you want to ask your users to authorize your app to share more of their Protected Information. For a complete list of the scopes avaliable in Google read this document.

From the dropdown list, select the Application Type. For a Dittofi app, you need to pick Web application.

Give a name to your new credentials e.g. "MyDittofiAppCredentials" and set the URIs that you want to redirect the app to after your user has clicked to give consent. In our case this will the URL from our Dittofi app, as specifically the URL for the page that we want to direct the user to.

Make a note of Your Client ID, because you will need to use this inside your project.


You can always make adjustments by clicking on the credentials from within the Credentials tab.

Step 2. Some preliminary set up in Dittofi

In this step, we are going to set up:

  • A data model to store the access token that we are going to request from the Google Authorization Server.

  • A Custom Model that we will use to store the access token and pass this around the backend of our system i.e. through our endpoints, actions, events and web services

  • Global Variables that will be store useful data that will be used in various parts of our authentication

First, let's create our Data Model.

The Data Model

Before requesting access to the token, we must set up a way to store the acquired access tokens. We can do this by adding a column to our Users data model called GoogleOAuthToken with the kind Text. An example of this is shown below.

The Custom Model

The Users Data Model can now store our Access Token, but we also need a way to pass the Access Token around the backend of our system i.e. pass the Access Token around our endpoints, actions, events and web services. The best way to do this is to create a Custom Model.

To create a Custom Model, head over to the Customs Models tab that is located under the wrench icon in the bottom left of the Dittofi Builder.

  • access_token: text

  • access_token_expires_in: Number

  • access_token_issued_at: Datetime

  • code: text

  • refresh_token: text

  • access_token_expires_at: Datetime

The final configuration of your Custom Model should look like the screen below.

The Global Variables

New Global Variables can be created from within the Global Variables tab that is found below the wrench icon in the bottom left of the screen, as shown below.

Next, add the following list of Global Variables:

  • application_form_url_encoded: Text (with the expression set to application/x-www-form-urlencoded)

  • application_json: Text (with the expression set to application/json)

  • client_id: Text (with the expression set to client_id generated by Google)

  • client_secret: Text (with the expression set to client_secret generated by Google)

  • grant_type: Text (with the expression set to authorization_code)

  • http_success_code: Number (with the expression set to the number 200)

  • redirect_uri: Text (with the expression set to "placeholder" for the time being, we will change this later on)

Your final screen will look like the following:

With the set up now complete, we will move into the implementation of getting the access key.

Step 3. Request an access token from the Google Authorization Server

Now that you've registered your app with the Google API, created a place to store your user Access Tokens and set up your Global Variables, it's time to configure your Dittofi app to get the access tokens for your users.

We will do this in three steps.

  1. First we will create an endpoint

  2. Second we will create a Web Service

  3. Third, we will create an action and event that will trigger our Web Service from our endpoint

Create your endpoint

Next, give you endpoint a Name, call it Authorized redirect URI and give it the path "/google/callback". The final configuration should look like the screen below.

Next, scroll to the bottom of the endpoint and add the following Query Variables.

  • code: text

  • state: number

An example of this is shown below.

The final configuration should look as follows:

Now that you have created your endpoint, we can set the URI inside the Google API.

Next, run your endpoint and select and copy the URL for your endpoint, as shown below.

Next, go back to your Google account and click on the credentials that you made in Step 1. of this tutorial, as shown below.

Paste in the URL from your endpoint into the Authorized redirect URI section and delete the ":" and "?state=0&code=" part of the URL.

** IMPORTANT ** Remember to delete the ":" and "?state=0&code=" from the URL as shown below.

Create your Web Service

To create a Web Service from within the Dittofi, we first need to go to the Web Services tab. This can be found under the wrench icon in the bottom left of the screen, as shown below.

Once you've added your new Web Service, fill in the Web Service with the following information:

  • Name: Google OAuth

  • Protocol: HTTPS

  • Host:

  • Description: Google OAuth 2.0 API Integration

The final form is shown below.

Next, fill in the form with the following information.

  • Name: Get Access Token

  • Http method: POST

  • Path: /oauth2/v4/token

  • Response Variable: Custom Model: GoogleOAuthToken

  • Request Content-Type: application/x-www-formurlencoded

  • Response Content-Type: application/json

A screenshot of the completed form is shown below:

Next, scroll down and under the section Variables, add the following header variables to your request:

  • Accept: Text

  • Content-Type: Text

An example of this is shown below.


For the Content-Type, the Label should be set to Content-Type and the Name should be set to ContentType (without the "-"). This is because the Label is used in the code generation as so cannot accept special characters.

Next, scroll down to the Body Variable section and add the following variables

  • client_id: text

  • client_secret: text

  • code: text

  • grant_type: text

  • redirect_uri: text

An example of this is shown below.

The final configuration is shown below.

Create an action and event

Now that we have created our endpoint and webservice, the final step is to define the order of things that we want to happen when a user clicks a "login" or "sign up" with Google button.

To do this, let's first configure the authentication screen that Google will display to our users. To do this, use the following URL and substitute in your own personal details to replace the placeholder values that are between the "<" and ">" symbols.<googlescopes>&client_id=<clientid>&redirect_uri=<redirecturi>&response_type=code&access_type=offline

In the case of this tutorial we have:

  • <googlescopes> ==>email profile openid

  • <clientid> ==>

  • <redirecturi> ==>

This gives us the final URL: profile openid&

Once you have done this, take the final URL and copy and paste it into your browser, as shown below.

At this point, we have the screen where the users are going to reach when they are authorizing which Protected Information they are willing to share with your app. Once the user clicks authorize, next our Redirect URI that we created in Step 2. and that we also registered with Google in Step 2 will be triggered by Google. This will return an Authorization Grant and Code from Google to our app. At this point, we are going to want to send this information back to Google to our Access Token.


This whole process is called OAuth 2.0 and none of it seems particularly intuitive to first time or non-technical users. If you want to recap what is happening, please read Introduction To OAuth 2.0, this will recap the high level flow of what is taking place.

Create your action and event

Next, add an HTTP request Event to our actions and events graph and link this to our Google OAuth Web Service and Get Access Token Endpoint, as shown below.

Next, map all of the variables in the HTTP request Event as shown below and set the Response Variable and Response Code to googleOAuthResponse and googleOAuthResponseCode (respectively).

Variable mapping

Event response variable and code


  1. The variables are taken from a combination of Global Variables with fixed expressions that we created in step 2. AND

  2. Our redirect_uri variable is currently set to "placeholder". You will need to go back to your Global Variables tab and select the redirect_uri variable and add the Redirect URI that we added inside Google. An example of this is shown below.

You can test that everything is working by copying and pasting the URL that we created in Step entering the "create action and event" section of this document and entering this into the browser. This link is shown again below and the GIF shows this being tested. profile openid&

After clicking login, the response provided should be "200", then we know that we have set this all up correctly. You can see this below and in our above GIF and also in the screenshot below.

Notice that if we switch over the response variable to our Google OAuth Response and repeat the above process, we will get the custom Access Token in the response. This is the bit of information that we need to access the customers Protected Data.


In Google OAuth 2.0 Part II, we will show you how you can access your clients Protected Data using the access token and build a frontend to (A) login your users with a "Google Sign Up" button and (B) to display the customer data.

Last updated