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!
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!
Create Project button:
There are a ton of options here. The one we care about is
APIs & auth -> Credentials:
OAuth Consent Screen tab:
You’ll need to enter a
Product Name at a minimum. Make sure you hit the
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:
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:
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:
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.
Jump over to your Stormpath Admin Dashboard and click the
Create Directory button and select
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:
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:
Add Account Store button and select the Google Account Store you just created:
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.
When you click the
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.
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.
Like what you see? Follow @goStormpath to keep up with the latest releases.