Implementing Google Social Login in a Spring Boot Web Chat App
Written on
Introduction to Google Social Login
This guide is part of a series focused on building a Web Chat Application with social login functionality using Spring Boot. In this article, we will enhance our Web Chat application's authentication by integrating Google as a social identity provider.
Here's a preview of what our Web Chat will look like upon completion!
Creating an OAuth2 Application in Google
To begin, we need to set up an OAuth application within the Google Cloud Platform console. Follow these steps:
- In the top-left corner, near the Google Cloud logo, click the dropdown menu and select the "NEW PROJECT" button. Name your project "simple-web-chat" and click "CREATE."
- Ensure your project is selected in the dropdown, then navigate to the burger menu on the top-left, select "APIs & Services," and choose "OAuth consent screen."
- On the consent screen, select "External" and click the "Create" button.
- In the "App information" section, enter "Simple Web Chat" as the app name and provide your email for user support and developer contact. Click "SAVE AND CONTINUE."
- Under "Scopes," click "ADD AND REMOVE SCOPES," select "profile" and "openid," then click "UPDATE" and "SAVE AND CONTINUE."
- In the "Test users" section, add your email as a test user and save the changes.
- Finally, review the OAuth consent summary and click "BACK TO DASHBOARD."
Next, we need to create credentials:
- Go to the "Credentials" menu and click "+ CREATE CREDENTIALS," then select "OAuth client ID."
- Choose "Web application" for the application type and name it "Simple Web Chat App." Add the redirect URI: http://localhost:8080/login/oauth2/code/google.
- Click "CREATE." The Client ID and Client Secret will be displayed; make sure to note them down as they will be used for login testing.
Updating the Backend and Frontend
Creating the GoogleOAuth2UserInfoExtractor Class
Next, let's create the GoogleOAuth2UserInfoExtractor class in the security package. This class will handle user information extraction:
package com.example.simplewebchat.security;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Service;
import java.util.Collections;
@Service
public class GoogleOAuth2UserInfoExtractor implements OAuth2UserInfoExtractor {
@Override
public CustomUserDetails extractUserInfo(OAuth2User oAuth2User) {
CustomUserDetails customUserDetails = new CustomUserDetails();
customUserDetails.setUsername(retrieveAttr("given_name", oAuth2User) + retrieveAttr("family_name", oAuth2User));
customUserDetails.setName(retrieveAttr("name", oAuth2User));
customUserDetails.setAttributes(oAuth2User.getAttributes());
customUserDetails.setAuthorities(Collections.singletonList(new SimpleGrantedAuthority(WebSecurityConfig.CHAT_USER)));
return customUserDetails;
}
@Override
public boolean accepts(OAuth2UserRequest userRequest) {
return "google".equalsIgnoreCase(userRequest.getClientRegistration().getRegistrationId());}
}
The GoogleOAuth2UserInfoExtractor class is designed to extract user details from Google's OAuth2 provider. It implements the OAuth2UserInfoExtractor interface, providing methods to retrieve user information and verify the OAuth2 provider.
Updating application.properties
Add the following lines to your application.properties file:
spring.security.oauth2.client.registration.google.clientId=${GOOGLE_CLIENT_ID}
spring.security.oauth2.client.registration.google.clientSecret=${GOOGLE_CLIENT_SECRET}
spring.security.oauth2.client.registration.google.scope=profile
These lines configure the OAuth2 client registration for Google, ensuring that the Client ID and Client Secret are pulled from environment variables rather than being hard-coded. The scope is set to "profile," requesting access to basic user profile data.
Modifying login.html
In the login.html file, implement the following changes:
<a th:href="@{/oauth2/authorization/google}">Google</a>
This line establishes the link for initiating the OAuth2 authorization flow with Google.
Testing Google Login
To test the integration, set the Client ID and Client Secret as environment variables:
export GOOGLE_CLIENT_ID=your_client_id
export GOOGLE_CLIENT_SECRET=your_client_secret
Start the Web Chat application with:
./mvnw clean spring-boot:run
Navigate to http://localhost:8080, select Google as your identity provider, and follow the prompts to log in. If successful, you'll be redirected to the index.html of the Web Chat application.
Conclusion
This article concludes our series on implementing a Web Chat application with social login using Spring Boot. We hope you found this guide informative and useful!
Engagement and Support
If you appreciated this content, please consider the following actions:
👏 Engage by clapping, highlighting, and commenting; I'm here to answer your questions.
🌐 Share this article on your social media.
🔔 Follow me on Medium, LinkedIn, Twitter, and GitHub.
✉️ Subscribe to my newsletter for the latest updates.
This video provides a tutorial on OAuth2 social login with Spring Security, specifically focusing on integrating the 'Sign in with Google' feature into your Spring Boot application.
This video explains how to integrate a Java Spring Boot application with Google sign-in using OIDC, guiding you through the implementation step-by-step.