ASP.NET MVC 5 – Demo Authentication App with Facebook and Google

ASP.NET MVC 5 – Demo Authentication App with Facebook and Google

With this demo, I will demonstrate how it’s possible to configure 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)

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=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.

  

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=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)

MVC5 Resources

Some good online resources about MVC5: 

Code Samples

All of this sample can be found and downloaded in Microsoft Code Gallery:
Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (3 items)