Attracting More Users With External Logins

Overview

ASP.NET MVC makes it easy to implement external logins. This week, I took some time to experiment with the external logins feature that is provided with the default MVC templates in Visual Studio, and I found it to be a mostly simple feature to setup. Microsoft has even done a good job of providing some example articles on how to set this feature up, which proved to be quite helpful for me.

What are external logins? When you setup an MVC project with individual account authentication, users can sign up for an account using credentials that are specific to your web application. Using a unique set of credentials for each web application can quickly get old for users. As a result, you probably have seen that many sites will offer the option to used to leverage existing accounts from other services. This is what Microsoft refers to as an external login. Common examples of external logins that you may see on other sites include Google, Facebook, and Twitter.

Default Example

The most helpful setup example that I found to get started with external logins was Microsoft’s own example with Facebook and Google. I was able to follow through their Google example using Visual Studio 2015 and MVC 5. I did run into one small issue, but it was easily resolved. When I mistakenly skipped over the step to enable the Google+ API, I was presented with an access denied error.

If you read the previously mentioned article, you will see that there are two primary steps to setting up an external login. First, you configure support for your application with the login provider. Second, you configure code in your application to communicate with the external login.

Configuring the application code should be particularly easy for the four providers that are referenced in the default Startup.Auth.cs code that is provided in the MVC template for Visual Studio 2015. These include Microsoft, Twitter, Facebook, and Google. Indeed, updating the code for Google proved to be a cakewalk. All that I had to do was to uncomment the Google specific block of code in Startup.Auth.cs and provide the client ID and client secret provided by google. Below is an example with dummy values.

 

Add-On Example

If you do a little bit of research, you will find that there is an OWIN OAuth Providers project that provides support for more than 40 external login providers. Taking advantage of this project, really opens up a lot of possibilities to you. To take advantage of this project, you simply need to add a reference to the Owin.Security.Providers NuGet package. If you don’t want to include support for all of the, you can reference a package that supports an individual login such as Owin.Security.Providers.Wordpress.

I gave the previously mentioned WordPress NuGet package and encountered very little difficulty in getting this running. In order to register your application with WordPress, you need to go to the WordPress applications page. Setting up an application there is very similar to the steps described in the Microsoft article for Google and Facebook. You will need to provide a redirect URL such as https://localhost:44300/signin-wordpress, that ends with signin-wordpress.

After setting up the application with WordPress, you will be given a client id and client secret to use in your application code. After referencing the Owin.Security.Providers.Wordpress NuGet package, you will want to reference that package (add a using statement) in your Startup.Auth.cs and add a code block at the end of the ConfigureAuth method that looks like the example below.

After doing this, you will see a new WordPress button on your application’s login page. Clicking the button should prompt your for WordPress credentials before logging you in to your web application.

Error Feedback

During my testing, one shortcoming that I saw in the handling of external logins was the fact that no feedback is reported to the user when the external login fails. Instead, the user is simply taken back to the login page without any indicator of a failure. I didn’t feel like this would be a good way to handle a failure in the real world, so I added a simple error indicator so that the user would be aware of the failure.

In order to implement this, I had to first pass an error message to the Login action on the Account controller. I did this in the first block of code within the ExternalLoginCallback method. Below is the modified code example, and you can see that I am providing a new errorMessage parameter.

Next, I had to add the errorMessage parameter to the Login get method on the Account controller. I also had to set a new ErrorMessage property on the ViewBag so that I would be able to pass it to the view. Below is the modified Login method.

Finally, I had to output the error message in _ExternalLoginsListPartial.cshtml when appropriate. I added an if statement to this view so that the message would only appear when an error was present. Below is the relevant portion of the view that was modified.

Surprising Struggles

One annoyance that I had with external logins was that I was not able to get the Microsoft external login to work appropriately. I could not find an MVC 5 specific article for the Microsoft login, but I did find this ASP.NET Core article. I followed the steps there to register my application with Microsoft. I then followed steps similar to those outlined in the Google article to configure my application. After doing this, and even after much research into the matter, I am still getting an access denied error. I’ve even posted this question to Stack Overflow, which does not currently have any answers. Although I will readily admit that the issue is likely somewhere on my end, I find that it is odd that it’s more difficult to setup a Microsoft external login than a Google external login, considering that MVC is a Microsoft framework.

Final Thoughts

Aside from the difficulties that I had with Microsoft accounts, configuring external logins for an MVC web application project proved to be quite painless. I was able to quickly add a couple of these external logins to a production application, and I look forward to leveraging this feature again in the future. I know that I will think twice about signing up for a web app that does not provide such external logins, so hopefully this feature will prove to be of benefits to the users of my web apps in the future.

Leave a Reply