Google OAuth 2.0 - PART II

Once you've completed the steps in Google OAuth 2.0 - PART I, there are different things that you might want to do, however the most common use case is to use the Access Token that you retrieved from Google to get more information about the user.

NOTE

If you ever want to get any information about the user you will need to use the user Access Token that we retrieved in the final step of Google OAuth 2.0 PART I.

The most common bit of information that you will want to access about a user is the Name and Email for that user. We can do this in 6 quick and easy steps.

• Step 1. Some basic set up

• Step 2. Add new endpoint to Google OAuth Web Service to "get current user"

• Step 3. Add new HTTP request event to "Authorized redirect URI" Action

• Step 4. Add new event to store current user details and access token

• Step 5. Redirect to our app after login

• Step 6. Build "Sign Up With Google" button on our frontend

Step 1. Some basic set up

Before you start, you first need to create a new Custom Model that we are going to called GoogleUser. This variable is going to store the Protected Information that is returned from the Google Resource Server.

To do this, head over to the Custom Models tab, click on , give your new Custom Model the name GoogleUser and add an attribute with a name and label of "email" of type "text", as shown below.

Click to save your Custom Model and head to the Web Services tab.

Step 2. Add new endpoint to Google OAuth Web Service to "get current user"

In the Web Services tab, click on the Google OAuth Web Service that we created in Google OAuth 2.0 - PART I, and add a new endpoint to it by clicking , as shown below.

Next, fill out your endpoint with the following details:

• Name: getCurrentUser

• HTTP Method: GET

• Path: /oauth2/v1/userinfo

• Response variable: googleUserResponse (Custom Model, link to the Custom Model that we created in Step 1. of this guide)

• Request Content Type: application/json

• Response Content Type: application/json

A screenshot of the configuration is shown below.

Next, scroll down on your endpoint and add the following Header Variables.

• Accept: Text

• ContentType: Text

• Authorization: Text

Below we show an example of adding the "Accept" text variable.

The final configuration is shown below.

NOTE

The Authorization variable is going to store the Access Token that we will use to access the users Protected Information on the Google Resource Server.

Lastly, click and close the endpoint.

Step 3. Add new HTTP request event to "Authorized redirect URI" Action

Next up, find the "Authorized redirect URI" Action that we created in Google OAuth 2.0 - PART I and click on this to open it up.

Inside the action, add a new HTTP request event to the actions and events graph, as shown below.

Next create a Variable inside your event, as shown below.

Set the type to text expression and set the name for the variable to "Access Token".

Next, prefix the word "Bearer" to the Access Token that you obtained in the previous event.

The final configuration for your Access Token Variable is shown below. Notice that there is a space after the word "Bearer", so it will be "Bearer " + var:googleOAuthResponse.access_token.

NOTE

The word "Bearer" has no special meaning. It is just a word that the Google API requires you to use.

Click and close down the "New Variable" popup.

Finally set the rest of the variables contained in your new HTTP request event options as shown below.

Notice two things. First, that the Accept and Content-Type variables are both application_json, which is taken from your Global Variables whereas the Authorization field is taken from the statistically typed word "Bearer ", joined to the Access Token that we got back from our first HTTP request event in your action and event chain.

Save your new event, and let's run a quick test to see that we have our current user data. To do this, click on "Trigger Component" and switch the Response Variable in your Action to "getCurrentUserResponse".

Then build your code and try logging in with Google again by copying and pasting the URL of the Google Authentication screen (the long string below that you created in Google OAuth Part I) into the browser, as shown below

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

You will notice that the current user's email address is now contained in the response variable.

Step 4. Add new event to store current user details and access token

What you do with the user email is ultimately up to you, but what we can do is to add this current user to our data model. To do this, you can first, add a condition event as shown below.

Configure this condition event to check for a 200 success message, as shown below.

This will ensure that our new user has authenticated correctly.

Next, we can add a Create Event inside of our Condition. Our goal here is that if the user correctly authenticates that we can create a new user record in our users table.

Add the email and access token to your create event and map these to the getCurrentUserReponse.email variable created in the second HTTP request event and AccessToken variable also created in the second HTTP request event. The final configuration should look like the screenshot below.

We can test this by building our code and testing our our login again, as shown below.

Notice that our new user, and their access token are now stored in our Data Models tab, as shown below.

Step 5. Redirect to our app after login

Now that we have our user signed up, and we have stored their email and access token stored, we can access the users Protected Data and display this information inside our app.

The first step to doing this, is to add a Redirect Event that will redirect the user to the homepage of our app after sign up. To do this, we need to:

(1) Update our Authorized redirect URI endpoint to Response Content Type, text/html, as shown below.

(2) create a new Global Variable called Application URL and set this equal to the page in our app that we want to redirect the user to after login e.g. the homepage (if this is where you want them to go)

NOTE

If you are not sure what URL to redirect your users to after login, try clicking the Preview button for your app and copy and paste the URL into your Application URL variable.

(3) Add a new Redirect Event to your Authorized Redirect URI Action

Configure this event to redirect to the URL stored inside your Application URL Global Variable, as shown below.

Your final Action and Events chain will look like the screenshot below.

Notice that we run the events in order to first, run an HTTP Request to get our Authorization Token, next to get the current user and their Access Token, if that run successfully we then Create and new user and redirect them to a page in our app (in this case the homepage).

(4) Remove the response variable from our Authorized redirect URI Action.

(5) Build our code and test it by logging in again. If successful you should see the page that you redirect to display and a new user created in your Users Data Model.

Step 6. Build "Sign Up With Google" button on our frontend

The final step that we will show you here is to add a "Sign Up" page to your app. To do this, open up the Dittofi page builder and select Pages >> Add New Page, as shown below.

Give you page the Name, Sign Up and set the Slug to /sign_up, as shown below.

Lastly, click to save your new page.

Next add a Link Block element and a Button element to your new Sign Up page. Make sure that you put your Button element inside your Link Block element, as shown below.

Next, select your Link Block and copy and paste the link to the Google Authorization screen into the URL box, as shown below.

Lastly, we can style our button however we link and then build our code and test it. To test, visit the sign up screen for your app and click your new button, as shown below.