Thursday, November 24, 2016

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.

image

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

image

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.

image

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.

image

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

image

On Create Client ID page, select Web application.

image

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.

image

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.

image

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.