Use Google as login in your web app with OAuth2

I want to create an OAuth2 client with Google so that I can integrate login with Google to use as authentication with my web app. In this way Google is the identity provider, which means that I will know for sure that the user that signs into my web page has a valid email and profile at google. Lets get started!

Go to Google’s dev setup site at: https://console.developers.google.com. First create a project.

Setup information about your project so that google can show what types of consent the users gives your app to use information from google. In my case it is going to be email address and profile picture.

Consent information for your project

After you have setup the project you need to create a client id for each app (that the user can login with) that you will have for your project. In my case it is just going to be a web app. I am also adding localhost as authorized origins so that when I test, it will work. When you deploy you need to add the web app url.

When I push create I get a client id and secret that will be used in my web app to authenticate back to google.

Now as I have generated a clientId and secret that will authenticate users into my localhost web app, I follow the sample provided by google from this dev resource:

Integrating Google Sign-In into your web app | Google Sign-In for Websites | Google Developers

modifying some of that code to make a simple login page:

Run this webapp and click the google login button, and continue your login at google

I am redirected to Google’s signin.

It will get your login information and display it in the screen

If you want to see what happened in the background you can debug in your browser or write out “googleUser.getAuthResponse().id_token” and see the bearer token sent back from google.com, when requesting the login.

{"token_type":"Bearer","access_token":"ya29.GltZBQnTxmVLOk_jQuif6nnEBuYk5C7Q5GtZi2BUyg5KNULuvEQiV0YS2WFXrfxNBwdsb22j-JMK3_fxJVNGIiP1sIt3kNPL8jwEcHkTOKe7FxZyxxx","scope":"https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me openid email profile","login_hint":"AJDLj6JUa8yxXrhHdWRHIV0S13cAmSjoB1CUgxf2DE2e0qAXa3PcmaQyru34O6pDb7y5yFR9iz24rfZhDqxWAY3pZhV85HJdDg","expires_in":3600,"id_token":"eyJhbGciOiJSUzI1NiIsImtpZCI6ImJhNGRlZDdmNWE5MjQyOWYyMzM1NjFhMzZmZjYxM2VkMzg3NjJjM2QifQ.eyJhenAiOiI4NzU0MzE3OTQyNzAtb3MwN3RzaWNwZGUzdWFnNzJjZ2p2cXUyYnVnaWpmMXUuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiI4NzU0MzE3OTQyNzAtb3MwN3RzaWNwZGUzdWFnNzJjZ2p2cXUyYnVnaWpmMXUuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMDQ2OTAzMTIwMzgzNjI1MTAxNzAiLCJlbWFpbCI6InRob21hcy5oZWxsc3Ryb21AZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF0X2hhc2giOiJMU0V5dWJTdkpZaE83OVFHb1N4bDN3IiwiZXhwIjoxNTE3OTI2MzA5LCJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwianRpIjoiM2YwMmFjNzMxNTVlNGM2Mjg2Y2Y5YjA0YWNjN2FiNzczMTE3MjBlZSIsImlhdCI6MTUxNzkyMjcwOSwibmFtZSI6IlRob21hcyBIZWxsc3Ryw7htIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS8tY3lRX0tzbHR0X0kvQUFBQUFBQUFBQUkvQUFBQUFBQUFCYm8vU2Z6U1ZtbnJiLXMvczk2LWMvcGhvdG8uanBnIiwiZ2l2ZW5fbmFtZSI6IlRob21hcyIsImZhbWlseV9uYW1lIjoiSGVsbHN0csO4bSIsImxvY2FsZSI6Im5vIn0.xxxsignature","session_state":{"extraQueryParams":{"authuser":"0"}}}

Google uses the id_token to pass on the data payload in a JWT format. If you are unfamiliar with JWT(Json Web Tokens) take a look at jwt.io and paste your id_token to read out the token payload information. By default the scopes are set to “https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me openid email” which allows me to get email, name and profile information as payload on the token. This is why the information is available to me using the javascript provided by google.

So my original problem was to log into my web app using google, and this was pretty simple and I don’t have to create my own login service and keep passwords on my own and Google has verified the name and email for me. Actually all was done in client side code as well.

The next step in a later post will be to use the token as a secure way to call other services from my web app and that requires server side handling of the token and using the client secret.

Authenticate with a backend server | Google Sign-In for Websites | Google Developers