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 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:
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!
Click the Create Project button:
Click the Create button:
There are a ton of options here. The one we care about is APIs & auth -> Credentials:
Click the OAuth Consent Screen tab:
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:
Next, you’ll enter in valid origin and callback urls. The origin url is your ID Site. The format of the url is:
https://<tenant name>.id.stormpath.io
In the example I setup, the tenant name is topaz-monkey, so the authorized origin url would be:
https://topaz-monkey.id.stormpath.io
The authorized redirect urls are the same as we set up in your ID Site:
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:
https://<your heroku app>.herokuapp.com/
https://<your heroku app>.herokuapp.com/restricted/id_site_callback
And, you’ll have as many of these pairs as you have Heroku apps setup. In the post on SSO, I setup two Heroku apps:
https://idsite-demo-app1.herokuapp.com/
https://idsite-demo-app1.herokuapp.com/idSiteResult
https://idsite-demo-app2.herokuapp.com/
https://idsite-demo-app2.herokuapp.com/idSiteResult
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.
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:
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:
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:
Click the Add Account Store button and select the Google Account Store you just created:
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.
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:
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.