Adding Google authentication to Azure App Service web app

In this post, I want to show you how quickly you can enable Authentication using Google to web app hosted in azure app service. You can configure other authentication providers also if you wish. The documentation for this feature can be found here.

First of all create a blank asp.net web app and publish it to azure. It can be any web application. For demonstration purposes I have created a .net core web app and hosted on Azure App Service.  Open the App Services blade and open your website blade then click on settings.  Under settings you will see Authentication and Authorization option.  Turn on authentication feature as shown below.

After you turn on authentication, for “Action to take when request is not authenticate” select “Log in with Google”

You can see different authentication providers in the list above. Click on Google.  On the next screen it will ask you Google Authentication Settings i.e. a Client ID and Client Secret.

Let’s head over to developer.console.google.com.  You should on the dashboard page and click on Enable API. Then Click on the Google+ API to enable that api. Your screen should have Google+ API like the screenshot below.

After you have enabled Google+API, go the Credentails page and Click on Credentials button and click on OAuth Client ID.

On Create Client ID page, select Web application.

As soon as you click on Create you will be asked to provide following information.  Let’s go over these in detail.

1. Name (provide any name you wish, I used the name of the web app)

2. Under Restrictions – Authorized JavaScript origins, you have to provide different urls that you want to be protected so when someone hits that url they will be presented with Google’s login dialog. You cannot provide wildcards in the url. My url is http://[webappname].azurewebsites.net

3. Under Restrictions – Authorized redirect URIs, you have to provide a redirect url.  What is a redirect url? So after you are successfully authenticated Google doesn’t know where it should redirect you, so you will have to provide a redirect url for your website. Now you cannot provide any url.  It has to be https://[webappname].azurewebsite.net/.auth/login/google/callback.

After you save you will be provided with a Client ID and Client Secret. Copy them and paste them in the Azure Portal and save.

Navigate to your website and you will be provided with Google login option.  After your are successfully logged in, you will be redirect to your website’s home page.  I think it is very easy to setup but real world apps need more than just one size fits all approach.  For example, what if I wanted anonymous access to home page but authenticated access to the entire application.

You might have questions like,”How do I prevent anybody with a Google account from accessing my app?” Then that piece is upon you to configure in your application.  “How do I know the email of the user and which login provider they used?” These are provided to you as HTTP header attributes as follows:

X-MS-CLIENT-PRINCIPAL-NAME : youremail@gmail.com

X-MS-CLIENT-PRINCIPAL-IDP: google

In Asp.Net Core you can access them as follows

 public IActionResult Index()
        {
            var user = Request.Headers["X-MS-CLIENT-PRINCIPAL-NAME"].ToString();
            if (user == "youremail@gmail.com")
            {
                return View("Index"); //Authorized View
            }
            else
            {
                return View("Error"); //UnAuthorized View
            }
        }

If you want to see more information returned from Google you can access your sites but typing the following url

https://[webappname].azurewebsites.net/.auth/me

This will return a json object with all the information.

Inside Asp.Net 4.6 application you can access this information via Claims already populated.