Malekbenz

Hi, I'm MalekBenz. I author this blog, I'm FullStack Developer, create courses & love learning, writing, teaching technology. ( Javascript, C#, ASP.NET , NodeJS, SQL Server )

Step by Step - Login using facebook account in Asp.net Application

06 Dec 2016

  • Category:Asp.Net
  • tags:Asp.Net, facebook, and OAuth2
  • Time:06 Dec 2016

Instead of using your own user database to maintain user credentials. I will give you step by step demo on how to integrate Facebook login into you ASP.NET MVC 5 application.

This post shows you how to enables users to log in using OAuth 2.0 with credentials from an external authentication in our case Facebook.

if you don’t already have visual studio you can download a free version of visual studio https://www.visualstudio.com/vs/community/.

Create Asp.net web application

Create an MVC web application, launch visual studio and create a new asp.net MVC application:

  • Click New Project in the Start page or in the File menu.

  • In the New Project dialog, click Web in the left pane and ASP.NET Web Application in the middle pane.

Specify project Name AspNetApp, Location, and other options, and then click OK.

  • The New ASP.NET Project dialog appears Click a MVC template , and then click OK.

CMD

  • In Solution Explorer, right click the project and select Properties.

CMD

  • Select the Web tab, and then paste the URL http://localhost:2016 into the Project Url box. Save the file.

CMD

Creating the app in Facebook

In the browser, navigate to https://developers.facebook.com/apps and log in by entering your Facebook credentials.

CMD

If you aren’t already registered as a Facebook developer, click Register as a Developer and follow the directions to register.

On the Apps tab, click Create New App.

  • Enter an App Name and Category, then click Create App.

CMD

This must be unique across Facebook. The App Namespace is the part of the URL that your App will use to access the Facebook application for authentication (for example, https://apps.facebook.com/{App Namespace}). If you don’t specify an App Namespace, the App ID will be used for the URL. The App ID is a long system-generated number that you will see in the next step.

  • Select Settings for the left menu bar.

CMD

  • select Add Platform to specify that you are adding a website application.

CMD

  • Select Website from the platform choices.

CMD

  • Your App ID and your App Secret will be added both into your MVC application later. Also, Add your Site URL (http://localhost:2016/) to test your MVC application. Also, add a Contact Email. Then, select Save Changes.

Connecting the Facebook app to our project

  • In Visual Studio, open App_Start\Startup.Auth.cs.

CMD

  • Copy and paste the AppId and App Secret into the UseFacebookAuthentication method.

  • Click Save Changes.

  • Run the application.

  • Select Log in to display the Login page. Click Facebook under Use another service to log in.

CMD

  • Enter your Facebook credentials.

CMD

  • You will be prompted to grant permission for the application to access your public profile and friend list.

CMD

  • You are now logged in. You can now register this account with the application.

CMD

That’s it!.