Customize security | Create a Blazor CRM application with Radzen (Blazor)link

In this step from the CRM Application tutorial we will customize the security settings:

• Add FirstName, LastName and Picture columns to the AspNetUsers table.
• Customize the user management pages - Add Application User, Application Users and optionally Edit Application User.
• Create some roles and add a couple of users.
• Set page permissions.

Extend the AspNetUsers tablelink

Radzen applications come with a built-in security feature which relies on ASP.NET Core Identity. ASP.NET Core Identity is backed up by a set of tables that are created via Entity Framework Core migrations automatically the first time you log in your Radzen application.

Application users are stored in the AspNetUsers table which by default looks like this:

Yes, by default it has only the most basic info. Lets change that by adding FirstName, LastName and Picture columns. This time though we are not going to edit the database in SQL Server Management Studio or run SQL. Remember that ASP.NET Identity relies on Entity Framework Migrations which use code to create the underlying tables and columns.

1. Open RadzenCrm.sln with Visual Studio (or the server directory with Visual Studio Code).

2. Add a new file server\Models\ApplicationUser.Custom.cs with the following content.

   using System;
   using System.Collections.Generic;
   using System.ComponentModel.DataAnnotations.Schema;
   using System.Runtime.Serialization;
   using Microsoft.AspNetCore.Identity;
   using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
   
   namespace RadzenCrm.Models
   {
       public partial class ApplicationUser
       {
           public string FirstName { get; set; }
           public string LastName { get; set; }
           public string Picture { get; set; }
       }
   }
   

   The ApplicationUser class represents a record from the AspNetUsers table and by adding those three properties we extend it.

3. Add a new file server\Data\CrmContext.Custom.cs with the following content.

   using Microsoft.EntityFrameworkCore;
   using RadzenCrm.Models;
   
   namespace RadzenCrm.Data
   {
       public partial class CrmContext
       {
           partial void OnModelBuilding(ModelBuilder builder)
           {
               builder.Entity<ApplicationUser>().ToTable("AspNetUsers");
           }
       }
   }
   
   

4. Open a command prompt window and go to the server directory of the CRM application.

5. Run the following command (it will take some time to complete):

   dotnet ef migrations add ExtendApplicationUser -c ApplicationIdentityDbContext
   

   This command uses the Entity Framework Core tooling to add the FirstName, LastName and Picture columns to the AspNetUsers table.

6. Open the generated migration class in Data/Migrations/XXX_ExtendApplicationUser.cs and remove any extra code added with DropIndex()/CreateIndex() and DropForeignKey()/AddForeignKey() if present. The code should look like this:

    public partial class ExtendApplicationUser : Migration
    {
        protected override void Up(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.AddColumn<string>(
                name: "FirstName",
                table: "AspNetUsers",
                type: "nvarchar(max)",
                nullable: true);
   
            migrationBuilder.AddColumn<string>(
                name: "LastName",
                table: "AspNetUsers",
                type: "nvarchar(max)",
                nullable: true);
   
            migrationBuilder.AddColumn<string>(
                name: "Picture",
                table: "AspNetUsers",
                type: "nvarchar(max)",
                nullable: true);
        }
   
        protected override void Down(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.DropColumn(
                name: "FirstName",
                table: "AspNetUsers");
   
            migrationBuilder.DropColumn(
                name: "LastName",
                table: "AspNetUsers");
   
            migrationBuilder.DropColumn(
                name: "Picture",
                table: "AspNetUsers");
        }
    }
   
   

   If you haven't installed the EF Core tools before that command will fail. Run dotnet tool install --global dotnet-ef to install them.

Now that we have added three new columns it is time to update the Add and Edit Application User pages.

Update the user management pageslink

Radzen has scaffolded pages for managing application users. We will now update those pages to allow setting the new database columns.

We will start from the Add Application User page.

1. Open the Add Application User page in Radzen.
2. Duplicate the "Email" Row from the page. The easiest way to do so is from the Outline tree in the property grid.
3. Select the TextBox and set its Value property to ${user.FirstName}. This will data-bind the text box to the FirstName property of the ApplicationUser class (which we added in the previous step).
4. Select the Label and set its Text property to First Name. Set Component to FirstName.
5. Finally select the RequiredValidatorComponent below the text box. Set its Text to First Name is required. Set Component to FirstName. This will associate the required validator with the "First Name" text box.

Here are all the steps as a short video.

1. Perform steps 1 - 5 for the LastName property.
2. Duplicate a form row once again. Delete the TextBox component. Drag-and-drop a FileInput component. Set its Value property to ${user.Picture}. It will allow the user to upload a picture which will be saved in the AspNetUsers table (in the Picture column).
3. Change the Label text to Picture. Set its Component property to Picture.
4. Set the Text of the RequiredValidator to Picture is required. Set its Component property to Picture.

Optionally you can perform those above steps to add FirstName, LastName and Picture to the Edit Application User page.

Let's now update the Application Users page to show FirstName, LastName and Picture in the DataGrid.

1. Open the Application Users page in Radzen.
2. Select the DataGrid component.
3. Add a new data grid column by clicking the + button next to the Columns label in the property grid. The new column goes last. Scroll to the bottom of the property grid.
4. Pick FirstName from the Property dropdown. This specifies what property (database column) this column will display.

1. Now perform steps 1-4 for the LastName column.

We now need to add a data grid column to display the Picture column of the AspNetUsers table.

1. Add a column for the Picture property by followign the steps above. Then click the Edit button next to Template. We need to add an Image component in this column to display the user picture stored in the database.
2. Drag and drop an Image component from the Radzen toolbox. Set its Path property to ${data.Picture}.
3. Go to the Style tab of the property grid. It allows you to specify various visual component settings. Set Width to 30px and Height to 30px.
4. Click End template editing.

Create roles and userslink

Now that we have customized the security pages it is time to add roles and users.

Add the roleslink

1. Run the application in Radzen and log in with admin/admin.
2. In your browser go to the application menu in the top right corner.
3. Click Roles. This loads the role management pages.
4. Add two roles: Sales Manager and Sales Representative.

Add the userslink

1. In your browser go to the application menu in the top right corner.
2. Click Users. This loads the user management pages.
3. Add a new user with the following attributes:

• Email: salesmanager@demo.radzen.com
• First Name: Jane
• Last Name: Smith
• Roles: check Sales Manager
• Upload some photo for the Picture (we will use this)
• Password and Confirm password: SalesManager1@

1. Add a second user with the following attributes:

• Email: salesrep@demo.radzen.com
• First Name: John
• Last Name: Doe
• Roles: check Sales Representative
• Upload some photo for the Picture (we will use this)
• Password and Confirm password: SalesRep1@

And we are done with the users!

Set page permissionslink

We would now allow only the members of the Sales Manager role to create new users and roles as well as opportunity statuses, task types and task statuses.

1. Go back to Radzen and stop the running application.
2. Right click the Add Application User page and choose Properties from the context menu.
3. Clear the existing Access and select only Sales Manager. This will make the Add Application User page available only to members of the Sales Manager role.
4. Repeat steps 2 and 3 for Application Users, Application Roles, Edit Application User, Add Application Role, etc.

We are now ready to Customize the CRUD pages.