Skip to main content

Part -1 : Authorising user using Spring Social (Google, FaceBook and LinkedIn) and Spring Security

Part-1: Authorising user using Spring Social (Google, FaceBook and LinkedIn)

Introduction

Social Logins are becoming increasingly popular across web applications, they not only offer good user experience are safe and also saves the user from password fatigue. Imagine losing a customer because they can not log on to the application as they cannot remember a password are not bothered to reset passwords etc. A social login is a kind of single sign-on where you use login information of a social network like Facebook, Twitter, Google+ to log on to a third website, instead of creating a new log-in account specially for that website.

Earlier I have written few blogs about Spring-Social features where I had written about few problems like no support for Google, only one user allowed by spring-social etc and also few exceptions which occur and then how to fix them.I thought of collating all the problems and writing a step by step tutorial explaining in detail, on how to register a user using spring social.

The main aim of this tutorial will be to integrate spring-security and spring-social together and create a web application where users can be registered either by

  • Registering their details
  • Google
  • Facebook
  • LinkedIn

In this first part of the tutorial, our aim will be to get data from spring-social and then display the details on the page, in the second part we will integrate the spring-security where we will ask the user to enter his details and then store on  DB.

Step 1- Maven Dependencies

Assuming that you know how to create a simple spring boot project, let us move on to add maven-dependencies required to run the project. If not, then you can create a spring-starter project and add thymleaf and web support.

Adding Spring-Social dependencies

The first step would be to add spring-social maven repositories, following  dependencies are  required

In case you get the repository not available error, you might have to add the following repository to your pom.

Adding Thymleaf, BootStrap, JQuery and Font-awesome dependencies

To make our web pages look nice we will add some Bootstrap CSS, Font-awesome and Jquery to them and also we will use thymleaf for HTML. Read Here if you want to know more in detail.

Complete POM

To avoid any mistakes, here is the complete POM.xml

 

Step 2- Adding Login Page and Controller

Once the dependencies have been resolved be will create a View and Controller

Adding View

To start we will create a view which will have 3 buttons each for Google, Facebook and Login. When the user will click on any of them he will be asked for authorization for the selected provider, upon verification his details will be rendered on the page.

Create a file under src/main/resources/templates/login.html with the following content. Please note that this view has 3 different forms each for different provider

Adding Controller

Let us create a controller class called LoginController in package com.login.controller with a simple method which will map the above page to URL / or /login.

Now run the above application and at this point, a page like this should appear and of course, it won’t do anything yet.

Step 3- Creating a POJO to show authorised user detail

Once we verify the user via our social provider, we will show the user details on another page. We can store these details in a POJO called UserBean.
Let us define a class called UserBean.java as shown below in package com.login.model

Step 4 – Creating Social Media Providers

For Facebook, Google and LinkedIn we will create a Provider class which will be used to do authentication and save user details to the UserBean, which can be later displayed on the page. To start off with we will create a BaseProvider which will have a constructor where all the providers will be initialized.

This BaseProvider is created by injecting the Facebook, Google, LinkedIn and ConnectionRepository repository. These objects are a reference to Spring Social’s Facebook, Google, LinkedIn and ConnectionRepository API binding.

Now let us create provider class for each provider

Facebook Provider

We will use the below Facebook provider to authorize the user and then access Facebook Data. We will save the fetched user data into our UserBean.

Google Provider

We will use the below google provider to authorize the user and then access Google Data. We will save the fetched user data into our UserBean.

LinkedIn Provider

We will use the below LinkedIn provider to authorize the user and then accessLinkedIn Data. We will save the fetched user data into our UserBean.

Step 5 – Fixing some issues before we can run – Adding Google Support

If you would have noticed by now, spring social doesn’t support Google so to enable autoconfiguration of spring-social-google we need to

Add a GoogleAutoConfiguration Class

Spring social do have a spring-social-google project but it doesn’t have autoconfiguration for Google. So google authorization doesn’t work with spring boot autoconfigure straight away.

To enable autoconfigure of spring-social-google we need to

  • Add a GoogleAutoConfiguration
  • Add GoogleProperties

FacebookAutoConfiguration class you should be able to find it either in org.springframework.boot.autoconfigure.social package in spring-autoconfigure.jar does the autoconfiguration for Facebook, the cheat sheet or the trick would be to copy this File and replace Facebook with Google to enable GoogleAutoConfiguration

Alternatively, copy the below class and put in some package, make sure it is available in classpath(src/main/java or inside another source folder)

 

Add GoogleProperties

In the same package add the below class, this is needed so when we add secret keys in properties file for google. We wont see any error.

Read Here: How to access Google data using spring-social

Step 6- Fixing some issues before we can run – Changing the default spring social redirect face flow

Spring Social is quick and easy to start but it needs some configuring before it can be used for production. The default flow for

The Views are predefined so the user flow is login.html -> connect/facebookConnected.html by default, irrespective of what our submit URL is, the facebook will override the flow and redirect you to connect/facebookConnected.html.

Read Here: How to change the default spring social redirect page flow 

We will add a ChangeDefaultFlowController  which will override the connectedView method and redirect the flow to “/facebook”, “/google” or “/LinkedIn”

 

Step 7 – Fixing some issues before we can run – Allowing Multiple Users to Login

If you test the Spring Facebook example, accessing FB data you will realise that it only supports one user. So when the first users log in to Facebook, only his details will be shared across all new sessions/users and they won’t be asked for any kind of authentication. One of the forum says that this example is supposed to demonstrate what can be done and is not intended for production use.

Read Here: Spring Social Facebook Authentication Example for multiple users 

To fix this problem you need to override a method which always returns a string called “anonymous”.The solution is to override the “anonymous” as the UserId for each new user/session. So for each session, we can simply return a SessionID, however, it may not be unique enough to identify users, especially if it’sh being cached or stored somewhere in a connection database.
Using a Universally Unique Identifier(UUID) would be a safer bet.So we will store a new UUID in session so it persists between different requests but is alive only till the session is valid. See the below method which does the trick.

 

Step 8 – Updating the LoginController

Now since we have added all the fixes, its time to update the controller so our view can submit the forms to Controller

Step 9 – Adding Spring properties

Assuming that you know how to register the API and public/private keys on Google/FB and LinkedIn for this example purpose you can use the below properties file.
Also, notice that server starts on port 3000(don’t change that, since the URL registered with these keys is localhost:3000

 

This is how the project structure will look like

Step 10 – User Details on page

To show the authenticated user on the page, we will display the UserBean using thymleaf. Add the below html page under src/main/resources/static/ as user.html

Now run the Project and access the application on http://localhost:3000/login.

You should be greeted by an authentication popup depending upon your provider selected and then you should be redirected to the page where your username, name, profile image will be displayed as below.

Conclusion

Spring Social API helps us in implementing an authentication mechanism with social providers. It is easy to use and we have seen how to configure it to tailor it to our needs.

Above code can be cloned from here at Github

In the next part we will use spring-security to register users and then only allow logged in users to navigate to secure pages. The link has been provided below for second part.

 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Bitnami