React js or react-native with Asp.net Web API – User Registration, Login and Logout Operations part2

Create Web API Project

To create the Web API Project,Open your Visual Studio. In-order to create a new project, go to FILE > New > Project (Ctrl + Shift + N).

Then select Web API template. then Click On Change Authentication and Make sure that we have selected No Authentication Option.

So here we have created a brand new Web API Project.

Add Asp.Net Identity to Asp.Net Application

Asp.Net Identity is a membership system for Asp.Net Applications. It provides lot of feature like User Management, Role Management, User Authentication and Authorization, Social Logins with Facebook, gmail, twitter etc. In this article, we will use Asp.net Identity  to store user details inside Identity tables.

First of install required package for Asp.Net Identity. Right click on the project, then Manage NuGet Packages… , then search(Online) and Install Microsoft ASP.NET Identity EntityFramework.

Asp.Net Identity uses Code First Approach, So table structure inside the membership system is already defined, if you want to customize the structure, we have to do some additional works. First of all add IdentityModels file inside Models folder as follows.

/Models/IdentityModels.cs

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public class ApplicationUser : IdentityUser {     public string FirstName { get; set; }     public string LastName { get; set; } }   public class ApplicationDbContext : IdentityDbContext<ApplicationUser> {       public ApplicationDbContext()         : base("DefaultConnection", throwIfV1Schema: false)     {     }       protected override void OnModelCreating(DbModelBuilder modelBuilder)     {         base.OnModelCreating(modelBuilder);         //AspNetUsers -> User         modelBuilder.Entity<ApplicationUser>()             .ToTable("User");         //AspNetRoles -> Role         modelBuilder.Entity<IdentityRole>()             .ToTable("Role");         //AspNetUserRoles -> UserRole         modelBuilder.Entity<IdentityUserRole>()             .ToTable("UserRole");         //AspNetUserClaims -> UserClaim         modelBuilder.Entity<IdentityUserClaim>()             .ToTable("UserClaim");         //AspNetUserLogins -> UserLogin         modelBuilder.Entity<IdentityUserLogin>()             .ToTable("UserLogin");     } }

ApplicationUser  class is inherited from IdentityUser. In IdentityUser class, Asp.Net Identity defined the default properties for Identity table (like Username,Email, PasswordHash etc). Inside ApplicationUser  class we have added additional two properties to User details table – FirstName and LastName.

Configure DB Connection

Inside IdentityModels.cs file, we have ApplicationDbContext class which inherits IdentityDbContext class from Asp.Net Identity. With the class constructor, we have configured the DB connection. as part of that we have to add DB connection string  in Web.config file with DefaultConnection name as follows.

web.config

1 2 3 4 5 6 7 8 9

... <configuration> ...   <connectionStrings>   <add name="DefaultConnection" connectionString="Data Source=(local)\sqle2012;Initial Catalog=UserDB;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings>   </configuration>

This connection string will be used for Asp.Net Identity Code First Approach With UserDB Database. You can use all of your application data along Identity table inside this same database or you can have a separate DB for Application Data (Data except User Management and Role Management), in that case you may have to add one more connection string.

Back to ApplicationDbContext class, there we have overridden OnModelCreating from Asp.Net Identity to change the default identity table names.

Now in-order to see these changes in action. Go to Tools > Library Package Manager > Package Manager Console.

In code first application, Database table structure are defined in C# code, in-order to see them as database objects first of all we have to enable migration for that execute following Command.

1	enable-migrations

then add a migration –  it’s like restore point in windows

1	add migration InitialMigration

to see these changes in database, execute following update command

1	update-database

Now if you check the database as per web config connection string you can see tables from Asp.Net Identity with our customization.

Add Web API Controller for User Registration

Now let’s add Web API controller for user registration. Right click on Controllers folder, Add > Controller. I’ll name this controller as AccountController. Inside the controller we need a Web API method Register to Post registration data from Angular 5 application. Finally the controller will be as follows.

/Controllers/AccountController.cs

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

public class AccountController : ApiController {     [Route("api/User/Register")]     [HttpPost]     public IdentityResult Register(AccountModel model)     {         var userStore = new UserStore<ApplicationUser>(new ApplicationDbContext());         var manager = new UserManager<ApplicationUser>(userStore);         var user = new ApplicationUser() { UserName = model.UserName, Email = model.Email };         user.FirstName = model.FirstName;         user.LastName = model.LastName;         manager.PasswordValidator = new PasswordValidator         {             RequiredLength = 3         };         IdentityResult result = manager.Create(user, model.Password);         return result;     } }

As per Asp.Net Identity, Password should be at least 6 characters long. Inside the method we reduced minimum number of characters to 3. As a parameter for this we an object of AccountModel class. So let’s add this class inside Models Folder.

/Models/AccountModel.cs

C#

1 2 3 4 5 6 7 8

public class AccountModel {     public string UserName { get; set; }     public string Email { get; set; }     public string Password { get; set; }     public string FirstName { get; set; }     public string LastName { get; set; } }

So here we have done with this Web API Project.

But there is a Problem – CORS

CORS (Cross-Origin Resource Sharing) : it is a mechanism to let a user agent (browser) gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. cross-origin HTTP request occurs when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

In this application, our web API project will block request from angular 5 application, since they are cross-origin HTTP request(from different port number – 4200). In-order to allow cross-origin HTTP request, we have to configure Web API project for this localhost:4200 request. so let’s look how we can do that.

First of we have to install NuGet Package : WebApi.Cors. Back to Visual Studio, Select your Web API project from solution explorer, then go to Tools > Library Package Manager > Package Manager Console. use following NuGet command to install WebApi.Cors.

1	Install-Package Microsoft.AspNet.WebApi.Cors

Now let’s look how we can use this package. In-order allow cross-origin request in Web API project, Go to App_Start >WebApiConfig.cs file. add following lines of code

/App_Start/WebApiConfig.cs

C#

1 2 3 4 5 6 7 8 9

... using System.Web.Http.Cors;   public static class WebApiConfig {    public static void Register(HttpConfiguration config)    {        config.EnableCors(new EnableCorsAttribute("http://localhost:4200", headers: "*", methods: "*"));        ...

now web API project is ready for cross-origin request from our angular 5 application.

Now try run this application without debug mode, some of you may get this problem.

It is due to different version of latest WebApi.Cors and System.Web.Http (5.0.0), so lets install same version of WebApi.Core (Not Cors it is Core). it will resolve this assembly problem. for that you can run following NuGet Command from Package Manager Console.

1 2	Update-Package Microsoft.AspNet.WebApi -reinstall Install-Package Microsoft.AspNet.WebApi.Core

So here we have successfully implemented React User Registration with Web API.

Token Based User Authentication in Web API

Now let’s update the Web API Project for Token Based Authentication. In-order to implement user authentication we need OWIN(Open Web Interface For .Net Applications). It act as a middle-ware between Asp.Net Application and IIS Server. First of all install required NuGet Packages.

In Solution explorer, Right Click On References. then click on Manage NuGet Packages. then do an online search for following packages and install them.

• Microsoft ASP.NET Identity Owin
• Microsoft.Owin.Host.SystemWeb
• Microsoft.Owin.Cors

In-order to work with OWIN, we have to create OWIN Startup class. For that right click on Project > New Item,  then Search for OWIN Startup class. and I’ll name the file as Startup.cs. Now you can update the class as follows.

Startup.cs

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

public class Startup {     public void Configuration(IAppBuilder app)     {         app.UseCors(CorsOptions.AllowAll);           OAuthAuthorizationServerOptions option = new OAuthAuthorizationServerOptions         {             TokenEndpointPath = new PathString("/token"),             Provider = new ApplicationOAuthProvider(),             AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(60),             AllowInsecureHttp = true         };         app.UseOAuthAuthorizationServer(option);         app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());     } }

Let’s discuss line by line.

app.UseCors  function will enable CORS(Cross Origin Resource Sharing) inside the application. In previous article, we already enabled CORS in WebApiConfig.cs file. Now you can comment that line.

After Enabling CORS, we have an object of OAuthAuthorizationServerOptions. inside that we have following properties

• TokenEndpointPath  – Specifies URL to Authenticate a user. In this Case we have to make HttpPost Request with username and password into http:localhost:portnumber/token URL. If given user credentials are valid, it will return an access token.
• Provider – we set provider as ApplicationOAuthProvider class object. inside that we define how do we authenticate a user from database.
• AccessTokenExpireTimeSpan  – access token from token request response will have an expire time. In this case it is 60 minutes/1 Hour.
• AllowInsecureHttp – flag to secure token request from unsecured HTTP.

Let’s create the ApplicationOAuthProvider provider class to  validate username and password.

ApplicationOAuthProvider.cs

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

public class ApplicationOAuthProvider : OAuthAuthorizationServerProvider     {         public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)         {             context.Validated();         }           public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)         {             var userStore = new UserStore<ApplicationUser>(new ApplicationDbContext());             var manager = new UserManager<ApplicationUser>(userStore);             var user = await manager.FindAsync(context.UserName,context.Password);             if (user != null) {                 var identity = new ClaimsIdentity(context.Options.AuthenticationType);                 identity.AddClaim(new Claim("Username", user.UserName));                 identity.AddClaim(new Claim("Email", user.Email));                 identity.AddClaim(new Claim("FirstName", user.FirstName));                 identity.AddClaim(new Claim("LastName", user.LastName));                 identity.AddClaim(new Claim("LoggedOn", DateTime.Now.ToString()));                 context.Validated(identity);             }             else                 return;         }     }

ApplicationOAuthProvider is inherited from OAuthAuthorizationServerProvider class. Inside that we have overridden two functions.

• ValidateClientAuthentication() – used to validate client device based on clientID and secret code. but in this project we’ll not authenticate client device.
• GrantResourceOwnerCredentials() – authenticate a user with given username and password. If authentication is successful then we save user details as Claims Identity. It can be used to retrieve user details without DB interaction.

Now back to VS Code Editor. Let’s make token POST request on login form submission.

Consume Web API Methods with Authorization

To consume Web API method with Authorize Attribute, we need to send access token along with the request. To demonstrate this process, let me add a Web API method with Authorize attribute.

Inside the Web API project, I’ll add a new Web API method inside AccountController as follows.

AccountController

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

...   [HttpGet] [Authorize] [Route("api/GetUserClaims")] public AccountModel GetUserClaims() {     var identityClaims = (ClaimsIdentity)User.Identity;     IEnumerable<Claim> claims = identityClaims.Claims;     AccountModel model = new AccountModel()     {         UserName = identityClaims.FindFirst("Username").Value,         Email = identityClaims.FindFirst("Email").Value,         FirstName = identityClaims.FindFirst("FirstName").Value,         LastName = identityClaims.FindFirst("LastName").Value,         LoggedOn = identityClaims.FindFirst("LoggedOn").Value     };     return model; }

This method returns few user claims saved during user authentication.