OAuth2 with Spring — Part 4: Spring Authorization client Social Login Demo with Google Authorization Server

In our previous article we learned on how we can connect to our own authorization server using OIDC. We defined our own client application in our self hosted authorization server. In our today’s article we will use Google and GitHub as our authorization server and connect our authorization client application to these authorization servers and receive tokens from them. The application login screen will look like this.

To achieve this, we need to register our authorization client application as the client in Google authorization server and use the client credentials in our client application along with the available scopes.

Client Registration in Google Authorization Server

We need to create an app in google developer console and configure the necessary things.

Open your browser and go to https://console.developers.google.com/ . You will see the screen like Fig 1.

Fig 1

From here, select the dropdown to select a project (1.1). It will display a popup like above. From the popup, click on New Project button (1.2). Since I have created my app already and have named my app as google-auth-server-demo (1.3), I won’t create a new app anymore.

Once you have created your app, select your app from the above screen and you will see the dashboard. From the left navigation, click on APIs & Services and page. Since we are not interested on any google service from the list for now, we can click on Credentials (2.1) from the left side navigation. But if you are interested in using any google service from your client application, you may find this article interesting, where I demonstrated accessing google drive data.

Fig 2

It will take us to the following page.

Fig 3

From here, we can create new credentials (3.1). Since we have our credentials created already (3.2), we can edit it (3.3) to see how we have configured it.

Fig 4

In the Client registration page, we have configured client name (4.1), authorized JS origin (4.2) to register against CORS security issue, Authorized redirect URIs (4.3). When we clicked on Save button (4.4) for the first time, it generated a Client ID (4.5) and Client Secret (4.6) for us.

We need to use these Client ID, Client Secret and Redirect URI in our client application’s configuration file, i.e: application.yml.

Using the above info in authorization client application.yml file:

The configuration is much similar to our Part-3 client configuration part.

spring:
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: "615531537634-806j95c1s18uundif9nl4oggcag7lcm6.apps.googleusercontent.com"
            client-secret: "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"
            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"

Now, we need to set up the consent screen in google authorization server to allow the client application to request for the required scopes.

To go to consent screen, we need to click on the Oauth Consent Screen from the left side nav bar (5.1).

Fig 5

I already created the consent screen, so let’s see what I did by editing the application (5.2)

Fig 6

This screen is already well documented at the right side of the screen (6.1). Follow these guidelines and save to proceed to the step 2: Scopes (6.2)

Fig 7

On this above screen, click on ADD OR REMOVE SCOPES button (7.1) and it will open a popup window at right. From this popup window we selected few minimum required scopes for our demo (7.2) and clicked on UPDATE button (7.3). Once updated, these scopes will be displayed in the (7.4) section of Fig 7.

When we click on SAVE AND CONTINUE button from this scopes step, we can add some test users to test from our client application.

Fig 8

For testing purpose, we have allowed 2 users only (8.1).

Now once we save these step 3 and step 4, we are ready to use these scopes in our client application.

Let’s update the previously mentioned application.yml file with these scopes.

Updated application.yml

spring:
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: "615531537634-806j95c1s18uundif9nl4oggcag7lcm6.apps.googleusercontent.com"
            client-secret: "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"
            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
            scope:
              - https://www.googleapis.com/auth/userinfo.email
              - https://www.googleapis.com/auth/userinfo.profile
              - openid

We also need to update our service code to allow for the scope we have from Google authorization server (9.1).

Fig 9

Now let’s test our application. Let’s visit to http://localhost:8081/private-data and it will take us to the login page (10.1). Select Google as the authorization server from here (10.2).

Fig 10

We will be redirected to the Google account selection page. Since we allowed only 2 accounts for testing purposes, we will select one of those accounts (11.1).

Fig 11

Now once we have selected the correct account, google will redirect us to the redirect URI of our authorization client application, and we will be able to see our private data (Fig 12) since this was a saved request to our server.

Fig 12

Thank you for reading with patience. The source code can be found here.

On the next article we will discuss on PKCE for Enhanced Security.