In my previous post, I demonstrated how easy it is to go from the most basic Spring Boot app to deploying multiple apps on Heroku and enabling single sign-on (SSO) with Stormpath’s ID Site service.

In this post, I will show you how easy it is to enable Google login for your Stormpath enabled applications. While the focus here is using the ID Site service, what follows applies to the use of any of the Stormpath SDKs. That is, you get social logins out-of-the-box with any of Stormpath’s SDKs, just like you get login and registration forms.

If you haven’t already, follow the instructions in the previous post for creating and configuring your Stormpath account.

You can deploy the code used here to your Heroku account using this handy button:

Deploy

Make sure the application is deployed and working in your Heroku account before continuing, because guess why? No further coding changes are necessary to enable Google Login for your application. It’s all Google and Stormpath ID Site configuration from here!

Enable Google Login

With ID Site you get typical authentication and authorization flows out of the box. You also get single sign-on. Adding in social logins is a snap as well. In this section we will setup your ID Site to allow users to login with Google.

There are no code changes and no new deploys are needed.

The first thing you need to do is create a Google Project at https://console.developers.google.com/project. This will be the hardest part of this entire post!

google project

Click the Create Project button:

google project

Click the Create button:

google project

There are a ton of options here. The one we care about is APIs & auth -> Credentials:

google project

Click the OAuth Consent Screen tab:

google project

You’ll need to enter a Product Name at a minimum. Make sure you hit the Save button.

Back on the Credentials screen, choose the Add credentials dropdown and select OAuth 2.0 client ID:

google project

Next, you’ll enter in valid origin and callback urls. The origin url is your ID Site. The format of the url is:

In the example I setup, the tenant name is topaz-monkey, so the authorized origin url would be:

The authorized redirect urls are the same as we set up in your ID Site:

google project

Note: If you used the Heroku deploy button at the top of this post, you will have a Heroku url to your application. You must setup the redirect urls using your Heroku app. Fortunately, ID Site supports wildcards:

Click the Create button and you will get your client ID and client Secret. That’s the information we need to update the ID Site settings.

google project

Phew! That was a lot of work to get the Google side of things setup. It’s easy from here.

Connect Google Login API to Stormpath ID Site

Jump over to your Stormpath Admin Dashboard and click the Directories tab:

google project

Click the Create Directory button and select Google from the Directory Type dropdown. Plug in the values you just got back from Google for client ID and client Secret, as well as the Google authorized redirect:

google project

Click the Create Directory button.

Now, the last thing before the magic – you need to add in Google as an Account Store for each of your Stormpath Applications that you want to provide Google login for. Click the Applications and select one of your Stormpath Applications. Then, click the Account Stores link on the left:

google project

Click the Add Account Store button and select the Google Account Store you just created:

google project

Click the Create Mappings button.

Now, the magic! Browse back to the web app you setup in your Heroku at the beginning. Click the Click here for a secret message button.

google project

Whadya know – there’s a Google button there!

To recap, with a slightly convoluted Google configuration, and a pretty easy Stormpath Directory configuration, we’ve added in the ability for users to log in with Google. This is with no code changes and no deployments.

You can see it in action in the web apps we created in the previous post: Super Awesome App and Super Amazing App.

When you click the Google button, you get the familiar popup asking for permissions:

google login

Once you grant the requested permissions, you are authorized to access the restricted page and are redirected there. And the same Single Sign-On we set up previously works when you’ve logged in with Google as well.

Wrapping Up

In this follow-up post, you’ve added the ability to login to your Stormpath enabled web applications with Google. You did it all by interacting with Google and Stormpath’s administrative web UIs. No additional coding or even deployment was necessary.

I hope you’ve enjoyed learning about how Stormpath can relieve you of the burden associated with authentication and authorization in your applications. I’d love to hear about your experience in working with the examples in this post.

Feel free to drop a line over to email or to me personally anytime.

Like what you see? to keep up with the latest releases.