Authentication and authorization

Radzen provides support for authorization and authentication out of the box. It relies on ASP.NET Core Identity and as a result needs a MS SQL server data source to be configured. Support for other databases will follow.

The built-in authentication and authorization support provides the following features:

  • Login and registration of new users.
  • Ability to define custom user roles.
  • Specify the level of access for pages - everybody, authenticated users or members of a role.
  • Adding custom properties to the user entity.

Enable authentication and authorization support

To enable authentication and authorization support in Radzen follow these steps.

  1. Click the security link at the top right corner (next to data).
  2. Check the Enable Security.
  3. Check the Auto generate pages for user and role management if you want Radzen to create login, register, user and role management pages.
  4. Pick a MS SQL Server data source from the available list. You will have to add at least one in order to use that feature.
  5. Click the Save button.

Specify the access of a page

When authentication and authorization is enabled Radzen will allow you to specify which users can access a page.

  1. Click the edit button of any page.
  2. Pick the access level from the Access dropdown. The available options are:
    • Everybody - everyone can access this page - anonymous and authenticated users.
    • Authenticated - only authenticated users can access that page.
    • All roles - only members of the specified role can access that page. Members of the special Administrator role can access every page.
  3. Click Save

Development authentication

During development you can use a special administrator account for testing. Log in with admin as both username and password. This account is only available during development when the ASPNETCORE_ENVIRONMENT environment variable is set to Development.

Adding roles

You can add roles from the security page. Radzen will ensure the roles are created when the application starts.

API

Server-side API

You can use the ASP.NET Core Identity API. For example to get the name of the authenticated user you can do the following:

var userName = this.HttpContext.User.FindFirst(ClaimTypes.Name).Value;

To authorize only certain roles to have access to controllers decorate them with the Authorize attribute:

using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;

namespace [ApplicationName].Controllers.[DataSourceName]
{
    [Authorize(Roles="Administrator", ActiveAuthenticationSchemes="Bearer")]
    public partial class OrdersController
    {
    }
}

Client-side API

When authentication and authorization is enabled Radzen will inject the Security Angular service to all pages.

Security methods

isAuthenticated(): boolean

Returns true if the user is authenticated; otherwise false;

Example
<div *ngIf="security.isAuthenticated()">
  Only authenticated users will see this.
</div>

isInRole(role: string): boolean

Returns true if the user is from the specified role or Administrator; otherwise false;

Example
<div *ngIf="security.isInRole('Sales')">
  Only sales people or administrators will see this.
</div>

Security properties

get name(): string

Returns the name of the authenticated user.

Example
<div *ngIf="security.isAuthenticated()">
  {{ security.name }}
</div>

get profile(): any

Returns the profile object of the authenticated user. Contains all claims associated with the user - name, role and custom ones.

Example
<div *ngIf="security.isAuthenticated()">
  {{ security.profile | json }}
</div>

get role(): string

Returns the role of the authenticated user.

Example
<div *ngIf="security.isAuthenticated()">
  {{ security.role }}
</div>

Extensibility

Often there would be a need to extend the user entity by adding additional properties.

Add ApplicationUser partial class

  1. Go to the server\Authentication directory.
  2. Add a new file called ApplicationUser.Properties.cs. It will extend the ApplicationUser partial class.
  3. Add a new property e.g. Country

     using System;
     using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
    
     // Replace [ApplicationName] with the namespace of your Radzen application.
     namespace [ApplicationName].Models
     {
         public partial class ApplicationUser
         {
             public string Country { get; set; }
         }
     }
    
  4. Open the server directory in a terminal.
  5. Run dotnet ef migrations add Country -c ApplicationIdentityDbContext. This will create an Entity Framework Core migration which at runtime will add a Country column to the AspNetUsers table. It will store the Country property values.

Extend the Register User page

In order to capture the values of the custom properties created in the previous step you have to update the Register User page.

  1. Open Register User in design time.
  2. Select the Form component in the design surface.
  3. Add a new string form field. Set its Type to string and Property to Country.

Make the custom properties available at the client-side

Often you would need to use some of the custom properties at the client-side - in the Angular application. You need to expose them in the client-side profile object first.

  1. Go to the server\Authentication directory.
  2. Add a new file called ApplicationPrincipalFactory.Properties.cs. It will specify which properties to be available at the client-side.
  3. Define OnCreatePrincipal partial method with the following body:

     using System.Security.Claims;
     using [ApplicationName].Models;
    
     namespace [ApplicationName].Authentication
     {
         public partial class ApplicationPrincipalFactory
         {
             partial void OnCreatePrincipal(ClaimsPrincipal principal, ApplicationUser user)
             {
                 var identity = principal.Identity as ClaimsIdentity;
    
                 if (!string.IsNullOrEmpty(user.Country))
                 {
                     // The first parameter "country" specifies the key at which 
                     // the property will be available at the client-side.
                     identity.AddClaim(new Claim("country", user.Country));
                 }
             }
         }
     }
    
  4. At the client-side you can now use the Country property:

    <div *ngIf="security.isAuthenticated()">{{ security.profile.country }}</div>

If you hit a bug or want to get in touch please open an issue or send an email to info at radzen.com.

Make sure you are running the latest version: 1.6.0.