ASP.NET MVC 5 – Demo Authentication App with Facebook and Google
This article demonstrates how to configure an application, to allow authentication using Google and Facebook.
Introduction
MVC5 came with some really nice stuff. In this post I’ll dig into the authentication with external logins as Microsoft calls them. With this demo, I will demonstrate how it’s possible to configure application, to allow authentication using Google and Facebook.
STEP 1 - Create new project on Visual Studio 2013
- Open Visual Studio
- Create new ASP.NET Web Application Project
- Give a name to the project (in this case I call him MVC5Authentication)
http://code.msdn.microsoft.com/site/view/file/106477/1/MVC1.jpg
STEP 2 - Select option Change Authentication
- Select MVC template
- Select option Change Authentication
http://code.msdn.microsoft.com/site/view/file/106478/1/MVC2.jpg
This option open a new window, were we need to check the option “Individual User Account”
http://code.msdn.microsoft.com/site/view/file/106479/1/MVC3.jpg
Start application.
As we see on the next image on the right part where it’s possible to have other authentication services it’s empty.
On the next step, we will configure the application, to provide two new authentication services (Google and Facebook)
http://code.msdn.microsoft.com/site/view/file/106480/1/MVC4.jpg
STEP 3 - Enable Google and Facebook OpenID
Open App_Start\Startup.Auth.cs file and remove the comment characters in //app.UseGoogleAuthentication(); to enable Google authentication and in app.UseFacebookAuthentication to enable Facebook authentication.
http://code.msdn.microsoft.com/site/view/file/106481/1/MVC5.jpg
C#
public partial class Startup
{
// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// Enable the application to use a cookie to store information for the signed in user
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login")
});
// Use a cookie to temporarily store information about a user logging in with a third party login provider
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
// Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
// clientId: "",
// clientSecret: "");
//app.UseTwitterAuthentication(
// consumerKey: "",
// consumerSecret: "");
app.UseFacebookAuthentication(
appId: "",
appSecret: "");
app.UseGoogleAuthentication();
}
}
- Start application again.
- On the start, the application, give us the following error.
- This error, happens because is necessary to create and configure an App on Facebook, that provide us an appID and appSecret, which will be use on the UseFacebookAuthentocation method.
http://code.msdn.microsoft.com/site/view/file/106482/1/MVC6.jpg
STEP 4 - Setting up SSL
To connect to Facebook, you will need to set up IIS-Express to use SSL. Even though Google doesn't require you to use SSL to log in, it's a security best practice to require SSL in your application.
- On the project solution Press F4.
- Enable SSL (a new URL will be provided)
http://code.msdn.microsoft.com/site/view/file/106484/1/MVC7.jpg
Access to the properties of the solution and change the project URL, providing the URL given on the project properties SSL URL
http://code.msdn.microsoft.com/site/view/file/106485/1/MVC8.jpg
STEP 5 - Configure App Facebook
- Open Facebook web page and create a new App
- Set the Display Name and the Category
http://code.msdn.microsoft.com/site/view/file/106486/1/MVC10.jpg
After create the app, we get access to appID and appSecret
http://code.msdn.microsoft.com/site/view/file/106487/1/MVC11.jpg
Set the SSL URL, on the valid OAuth URLs, to give access of our application to Facebook.
http://code.msdn.microsoft.com/site/view/file/106489/1/MVC11.jpg
Set appID and appSecret into our code.
C#
// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// Enable the application to use a cookie to store information for the signed in user
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login")
});
// Use a cookie to temporarily store information about a user logging in with a third party login provider
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
// Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
// clientId: "",
// clientSecret: "");
//app.UseTwitterAuthentication(
// consumerKey: "",
// consumerSecret: "");
//change the id and secret toconnect to your application
app.UseFacebookAuthentication(
appId: "574609735957646",
appSecret: "4339c983ffa2685c1b09d580e3380455");
app.UseGoogleAuthentication();
}
STEP 6 - Run application
Run application after save all the changes below.
As you see, now after our configuration, we application provide two new services of logn (Google and Facebook)
http://code.msdn.microsoft.com/site/view/file/106488/1/MVC13.jpg
MVC5 Resources
Some good online resources about MVC5:
- ASP.NET MVC5 : The official Microsoft .NET WebSite - http://www.asp.net/mvc/tutorials/mvc-5
- OpenID: http://openid.net/specs/openid-authentication-2_0.html
- OAuth: http://oauth.net/2/
- My personal blog: http://joaoeduardosousa.wordpress.com/
- ASP.NET Portal
Code Samples
All of this sample can be found and downloaded in Microsoft Code Gallery: