Azure App Service provides very convenient way to publish your web application on internet. You can directly publish the web application from Visual Studio publish.

Azure App Services also provide authentication and authorization options and you can enable social logins on the applications without configuring/modifying anything in the Azure AD.

In this article, let’s see how to enable social logins (facebook or google) on an Azure App Service, without modifying anything in the application code.

Prerequisites

We considering a simple web application created using Visual Studio and published in Azure. So, the application will have a URL, https://app-name.azurewebsites.com where app-name is the app service name. You can find detailed steps in my previous blog article.

For following all steps in this article, we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

Also, you will need account in Facebook for Developers and Google Developers Console.

Google Developers Console

Refer previous blog article detailed steps on creating the developers console account and registering an application.

In the same application, select Credentials from the left navigation. Here we need to make two changes as mentioned below. Make sure to replace the app-name with actual name of app service.

• Authorized JavaScript origins, set this to https://app-name.azurewebsites.net, as now the requests will directly be initiated by App Service instead of Azure AD.
• Authorized Redirect URIs, set this to https://app-name.azurewebsites.net/.auth/login/google/callback.

Once these two modifications are done, save the settings. Copy the Client ID and Client Secret values from here and keep it with you. These will be required in App Service configurations.

Facebook for Developers

Refer my previous blog article which explains all the steps for registering and creating first application in Facebook for Developers.

Select the application from the dashboard. Go to the Facebook Login option under Products and select Settings. Under Valid OAuth Redirect URIs, add a new URI – https://app-name.azurewebsites.net/.auth/login/facebook/callback to allow redirect from the App Service. Do not forget to replace app-name with actual name of the service. Then hit the Save Changes button.

In the left pane, select Settings > Basic. In the App Secret field, select Show. Copy the values of App ID and App Secret. You use them later to configure your App Service app in Azure.

App Service Configurations

Login to Azure Portal for following next steps.

In the published app service, select the Authentication / Authorization option from the left navigation. Then enable the app service authentication by turning it on.

We also can see another input – Action to take when request is not authenticated. This is the important input in this demo. Select Log in with Google option.

When you set this input, your app requires all requests to be authenticated. It also redirects all unauthenticated requests to Google for authentication.

Login with Google

Select Google provider from the above screen and enter Client ID and Client Secret copied form the Google Developers Console. Then click on OK.

Login with Facebook

No select Facebook provider and enter App ID and App Secret copied from the Facebook for Developers portal and click on OK.

Run and Verify

Now if you run the application, the application will by default redirect the user to Google login page. This is because we have set Action to take when request is not authenticated to Login with Google. If we change this setting to Login with Facebook, and then run the application, users will be redirected to Facebook login page.

So, we have successfully configured authentication without changing the application code.

Note

App Service provides authentication, but it doesn't restrict authorized access to your site content and APIs. You need to authorize users in your app code.

Let’s say you want to allow only specific users to view all functionality of your app, while other users should have read-only access. The above configurations will help to authenticate the users, but we will need custom authorization logic in the application code to authorize the users and show right pages them.

So, in my opinion, this option may be good in initial phase of project to switch on authentication on the application until your authentication and authorization decisions are made by the development / architect team.

I hope you enjoyed this article. Let me know your thoughts.