In this article you are going to learn what ASP.NET Identity is it's not something new its same ASP.NET Membership but with some updated version if you have looked at older version of ASP.NET Membership where user only can login using their credentials but the as the web is going faster everything is changing fast now user has multiple accounts [Many users have Social Network account such as Facebook, Google, Twitter] and along with that you will have various account password to remember such as bank credentials , office account credentials and many more ha-ha to remember this all password we need a password manager.
But by using ASP.NET Identity we no more require to remember password if he has social network account such as Facebook, Google, Twitter he still login into our application that good feature.
If you might visit e-commerce site then this option as available there for ease for user to shopping.
Finally, all this data will be stored in SQL Server database.
We are going Implement below OAuth provider in step by step Manager
- Mircosoft
We are going to start this part with Database part first
Configuration Used
- Visual studio 2015
- SQL Server 2008 R2
Database part
We are going to create Database with Name "MVC5DEMODB" in SQL Server 2008 R2
Create New Asp.Net MVC Application
From Visual studio 2015 IDE Start page click on "New Project" link.
After clicking on "New Project" link a new dialog will pop up.
In that we are going to select web templates from left pane after selecting web template, we find only one project template in it "ASP.NET Web Application" just select that.
After selecting this project template next we are going to name the project as "MVC5DEMO1" and clicking on the OK button a new dialog will pop up with Name "New ASP.NET Project" for selecting project Templates.
In this dialog, we are going to choose MVC project template and then we are going to choose Authentication type for doing that just click on Change Authentication button, a new dialog will pop up with name "Change Authentication" here we are going to choose Individual User Accounts .
Note: - Individual User Accounts
If you choose this option for Authentication of application then your application will be configured to use ASP.NET identity [ASP.NET Membership] where User register in the application and then sign in using credentials and also User sign in via social accounts such as Facebook, Twitter, Google, Microsoft and other providers. All user data will be stored in SQL server database.
After selecting Authentication type as Individual User Accounts click on OK Button.
It will show a progress bar while it is creating a project.
After creating a project it will show Readme HTML page with use links on that page.
And in right part, you will see newly created project structure.
As we have chosen Individual User Accounts Authentication type we get ready made Membership Model added in Models folder as shown below.
Project structure
Complete Project structure after creating new project.
Models Folder View
After creating project successfully now let's add connection string to project
Adding Connection String in Web.config file
<connectionStrings>
<add name="DefaultConnection"
connectionString="Data Source=sai-pc;Database=MVC5DEMODB;UID=sa;Password=Pass$123"
providerName="System.Data.SqlClient" />
</connectionStrings>
After adding Connection string next step just save current project and RUN.
Homepage View in browser after running application
After homepage appears just click on Register link, then Register page will appear.
After Register page appear enter details required for registration.
After filling data just click on Register button meanwhile Microsoft.AspNet.Identity will generate tables in the database as shown below.
Database View after registering User
Along with this, it will also save data in these tables.
Just have a look on below snapshot it is data which we have filled while we have registered in the application.
If you look out properly you will as see other tables in the database which stored data related to Role and Users.
Tables and its Details
AspNetRoles : - which stored data related to Role
AspNetUserRoles : - which stored data related to Role assigns to User.
AspNetUsers : - which stored data related to User.
AspNetUserLogins : - which stored data related to Login Provider [Google, Facebook, Twitter] [ProviderKey, UserId].
After Completing with Database part let's move back to Application part.
Now you are logged into application if you want you can log out and retry to log in.
It is the traditional way to doing it.
Now let move toward Implementing External Authentication provider like Facebook.
Implementing External Authentication provider Facebook
In this part of implementation, we do not require to do any coding part it's all about configuration.
All configuration starts with Startup.Auth.cs
Startup.Auth file in Asp.Net MVC
This Class (Startup.Auth.cs) file is created by default when we create application and it is located inside App_Start as shown below
Now let's take a view on Startup.Auth.cs file and see what it contains.
The Startup.Auth.cs file contains all OAuth Clients comment by default. We are going to implement an example of OAuth with Facebook for that we need to uncomment Facebook client first.
Now you can run the application but it will throw an error because we have not provided ( appId: "", appSecret: "" ) for this we first need to Register Application with Facebook.
Register Application with Facebook
In this part we are going to register our application with Facebook but for doing this process we need to have account on Facebook if it is not there then we need to create account for this demo, if you already have Facebook than that good you are ready to take ride just login into your Facebook account past given URL: - https://developers.facebook.com/ , then at corner go to My Apps Menu just hover it, will show link of "Add a New App" just click on it.
Create a New App ID in Facebook
After clicking on "Add a New App" a new pop-up appear with name Create a New App ID which is going to ask Display Name will be your App Name here we are going to enter OauthDemoMVC5 and then we need to enter Contact Email it is mandatory here I have entered my Email ID [Sai####@gmail.com] and finally option in category here I am going to select Education and then finally click on "Create App ID" button.
After clicking on "Create App ID" button we will have security check like as shown below.
After entering valid captcha it will take you to Dashboard page where you will get your ( AppId: "", AppSecret: "" ) which we need to Used Facebook OAuth service. The following snapshot shows where you will see (AppId: "", AppSecret: "" ) on the dashboard page.
After that, we need to set our App Domains. For setting this first we need to click on setting just below Dashboard then we will see +Add Platform button just click on it. A new dialog will open to select Platform inside that we are going to select Website.
After selecting platform in next step it is going to ask Site URL this URL must be constant if you are developing on the local machine then fix your port number such that it would no change because this URL will be registered on Facebook.
To see where project URL is just right clicked on Project then select Properties like as shown below.
After selecting Properties a new window of Properties will open in that select Web Menu just below Build at bottom of page you will see Project URL which we highlighted in Red color here project URL like " http://localhost:1390/ Just copy that URL.
After copying just paste that URL inside Site URL (http://localhost:1390/ and then click on save changes button.
After that just copy App ID and App Secret and just add in Startup.Auth.cs files.
After adding just save your application then Run application.
Below is Login page which with appear with a Facebook button on it.
After the Facebook button is displayed on Login page just click on the Facebook button it will take you to Facebook login page and it will ask you for credentials just enter valid credentials and click on Log in button.
After login in to Facebook site now new dialog will pop up for allowing App to access your profile information (Your public profile includes name, profile picture, age range, gender, language, country and other public info).
Now just click on Continue as Saineshwar button [Button in blue color] to proceed further
After clicking on Continue as a button it will redirect to ExternalLoginCallback view and on that view you need to enter Email ID to register.
Along with that, it shows good message.
"You've successfully authenticated with Facebook. Please enter a user name for this site below and click the Register button to finish logging in."
After entering Email ID and clicking on Register button it will register you and along with that it login in the application as shown below.
Now let's look at database tables what kind of data is been stored there after this process.
AspNetUserLogins table
This table store data related to LoginProvider.
As you can see it is storing data of Facebook login.
AspNetUsers table
This table store data related to all Users from Oauth login as well as from Traditional.
If it contains PasswordHash then it is registered by Traditional Login and if it is PasswordHash is empty then it is done by OAuth login.
Finally, we completed understanding what OAuth is and how to use with asp.net MVC 5 applications and also had an example of OAuth integration with Facebook.
No comments:
Post a Comment