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)

STEP 2 - Select option Change Authentication

Select MVC template

Select option Change Authentication

This option open a new window, were we need to check the option “Individual User Account”

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)

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.

C#

public partial class Startup
{
// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864publicvoid 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.

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)

Access to the properties of the solution and change the project URL, providing the URL given on the project properties SSL URL

STEP 5 - Configure App Facebook

Open Facebook web page and create a new App

Set the Display Name and the Category

After create the app, we get access to appID and appSecret

Set the SSL URL, on the valid OAuth URLs, to give access of our application to Facebook.

Set appID and appSecret into our code.

C#

// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864publicvoid 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)