Integrating External Login (Facebook) In Your MVC Project

As external login is very important and useful to integrate in your project. In one of my article i described why actually we need social Login in our projects. You can check here in the following link.

• Why We Need Social Login Integration In our Website 

Here, I am explaining how to integrate Facebook Login in our Project.

Step 1: Create an MVC project. Run the project and go to Login section, In Login section you will find the following view:

 

 

Step 2: Now go to the solution explorer App_Start and StartUp.Auth.cs

 

Step 3: Now open the StartUp.Auth.cs You will find the following commented code. Now as we are going to integrate facebook login  just uncomment the Facebook section as in the following code. 

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();
    }
}

Just save your code and run the project and go to Login Section. Now you will see the login option for Facebook is available.

 

Step 4: Now we need the appId and appsecreat for login, so now go to the following url in Facebook as in the following figure.

 

Step 5: Now here click MyApps and Add a New App. Now you will get the following popup page.

 

Now here choose www(website), it will ask for the name as in the following:

 

 

Now here i am giving my website name as CodeX. After that press SkipQuick Start. It will redirect to the following page.

 

Now to check the App Secret click the show button. It may ask to re-enter your password.

 

Now after entering your password you will get your app secret.

 

 

Now copy the appId and App secret and paste there. 

public void ConfigureAuth(IAppBuilder app)
{
    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);
    app.UseFacebookAuthentication(appId: "1069827226391314", appSecret: "963d5782b2a66880be952043cd89****");
}

Now run the application and you will get the following error:

 

Now check your Localhost URL and set it in the developers.facebook page as in the following:

 

Now just update "Microsoft.Owin.security.Facebook" as in the following:

 

The code for integrating is already provided by identity framework. Just run the project and click the facebook button.

 

Now you will be able to login your application using facebook credentials.

 

Now if you check the details in "ASP.NetUserLogin" table you will get the following information.

 

Here your information is saved.

So in this way we can use Facebook to login with our application.