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 .

Next up, create a new project by clicking on as shown below.

Give your new project a name e.g. MyGoogleAuthProject, check that the Organization and location are correct and click.

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.

We now need to create an OAuth 2.0 Client ID. To do this, click on and select OAuth client ID, as shown below.

Next, we need to Configure Consent Screen. This can be done by clicking.

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.

In our case, let's select "External" and click so that people outside of our organization can login through Google to our app.

Next, fill out all of the mandatory fields only. At the time of writing, this includes your apps Name, Support Email and the Developer Contact information. Then click .

This will bring up the page on "Scopes". The Scopes are the bits of your users Protected Information that you're going to request access to. In this example, click and select the email, profile and openid options, as shown below.

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.

Next, click and skip through the Test users and Summary screen without changing anything.

NOTE You can return to change any of these details by going back to the OAuth Consent Screen tab and clicking .

The final step here is to create your credentials. To do this, return to the Credentials tab and, as before, click and select OAuth client ID as shown below.

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.

Finally click and this will create your OAuth client credentials, as shown below.

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

NOTE

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.

Create a new Custom Model by clicking on, give your Custom Model the name GoogleOAuthToken add the following Attributes to your new Custom Model:

• 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.

When you're done click and close your Custom Model.

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.

From within here, you are able to create new variables by clicking in the top right hand corner 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

To create an Endpoint in Dittofi, we need to go to the Endpoint screen and click on .

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.

To set the URI, we need for first build the code for our endpoint. This can by done by clicking on the button at the top right of the screen.

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.

Next, scroll to the section marked "Authorised redirect URI" and click .

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.

Finally click to complete this step.

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.

Next, you need to create a new Web Service. You can do this by clicking in the top right 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: www.googleapis.com

• Description: Google OAuth 2.0 API Integration

The final form is shown below.

Next click to save your Web Service and then add a endpoint to the Web Service by clicking as 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.

NOTE

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.

Finally, click and close this window.

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.

https://accounts.google.com/o/oauth2/auth?approval_prompt=force&scope=<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> ==>873270106212-ascmkqesg3e5jtsglh23rg139n6edd1o.apps.googleusercontent.com

• <redirecturi> ==> https://dittofi.com/1685/iapi/google/callback

This gives us the final URL:

https://accounts.google.com/o/oauth2/auth?approval_prompt=force&scope=email profile openid&client_id=873270106212-ascmkqesg3e5jtsglh23rg139n6edd1o.apps.googleusercontent.com&redirect_uri=https://dittofi.com/1685/iapi/google/callback&response_type=code&access_type=offline

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.

NOTE

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

To create a new action, head on over to the actions tab inside Dittofi and click on . Give your action the same name as your endpoint and set the trigger component to the Authenticate redirect URI endpoint that we created at the start of Step 3.

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

NOTE TWO THINGS:

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.

Finally, save your HTTP request Event and set the response variable to googleOAuthResponseCode. Then click .

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.

https://accounts.google.com/o/oauth2/auth?approval_prompt=force&scope=email profile openid&client_id=873270106212-ascmkqesg3e5jtsglh23rg139n6edd1o.apps.googleusercontent.com&redirect_uri=https://dittofi.com/1685/iapi/google/callback&response_type=code&access_type=offline

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.

Onwards

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.