Authorization In Blazor Server App

Introduction

 

Authentication and authorization are the most common requirements of most of the applications. Authentication is a process of validating a user and Authorization is a process of validating access right of user for accessing application resources. Blazor uses the ASP.NET core security model to provide authentication and authorization. Both Blazor server app and client app (WebAssembly) have different security scenarios as Blazor server app uses server resource to provide authorization, and Blazor client app (WebAssembly) runs on the client; hence authorization is only determined which UI option can be accessible by the user.

 

In my previous article, I have explained about authentication in Blazor server app. In this article, I will be explained about authorization in Blazor server app. Normally, authorization applies after the authentication is done.

 

Authorization

 

Authorization is a process to validate that user has rights to access the application resource. In other word, it helps you to control user access to a resource based on roles, claims, and policies. Blazor use ASP.NET Core authorization mechanism and it can be achieve using attributes, built-in component and by defining authorization rules.

 

AuthorizeView Component

 

The AuthorizeView is Blazor built-in component that able to show page content based on user 's authentication state. This component also supports policy-based authorization and role-based authorization. This component is very useful when you want to show page content based on the role, policy, or authentication status of the user. It uses AuthenticationStateProvider to know the user authentication state.

 

This component provides Authorized, and NotAuthorized render fragments. The Authorized fragment renders when the user is authenticated, and NotAuthorized fragment renders when the user is unauthenticated. Both fragments accept other interactive components.

<AuthorizeView>
    <Authorized>
        <h4>Hello, @context.User.Identity.Name!</h4>
        <p>This content is only visible if user is authenticated.</p>
    </Authorized>
    <NotAuthorized>
        <p>Please signed in.</p>
    </NotAuthorized>
</AuthorizeView>

Role-based authorization

 

The AuthorizeView component has a "Roles" parameter that helps you to do role-based authorization. If you want to provide access to multiple roles then you need to pass comma separated roles. In following code, page content is rendered based on roles. 

<AuthorizeView Roles="Admin">
    <p> Logged-in user is in Admin Role</p>
</AuthorizeView>

<AuthorizeView Roles="HR">
    <p> Logged-in user is in HR Role</p>
</AuthorizeView>

Policy-based Authorizaion

 

The AuthorizeView component has "Policy" parameter that help you to do policy-based authorization. In the following code, page content is rendered if policy is satisfied .

<AuthorizeView Policy="HRAccessPolicy">
    <p> Logged-in user is in HR Role (using Policy)</p>
</AuthorizeView>

Claim-based authorization

 

The claim-based authorization can be achieved using policy-based authorization. You can define a policy that checks for a specific claim. The default policy is applied in AuthorizeView component if roles or policy is not specified.

 

The AuthorizeView provides Authorizing render fragment that use to display content when authentication is in progress.

 

Authorize attribute

 

The AuthorizeView helps you to control UI depending upon the user 's authorization state. The Authorize attribute use to render Blazor component based on user 's authorization state. It is very similar to Authorize attribute in ASP.NET Core. You can use this attribute in both Razor page and code behind. You can define this attribute to Razor page using @attribute directive.

@page "/authorizeAttributeExample"
@attribute [Authorize]

This attribute only works if component reaches via router. This attribute cannot be used with child components. You must use AuthorizeView component to render child component based on user's authorization state.

 

If you defined this attribute in _Imports.razor page, authorization attribute applied to all the component under all components under that folder. This attribute also can work with role-based, policy-based and claim-based authorization.

//Role-Based authorization
@attribute [Authorize(Roles = “admin, HR”)]

//Policy-based authorization
@attribute [Authorize(Policy = "HRAccessPolicy")]

Customize content for unauthorized Router component .

 

Blazor allows you to customize the content for user is unauthorized, authorization is in progress and route not found. These can be defined using <NotFound>, <NotAuthorized>, and <Authorizing> render fragment. You can only define <NotAuthorized>, and <Authorizing> render fragment under AuthorizeRouteView render fragment.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h4>Not authorized.</h4>
                </NotAuthorized>
                <Authorizing>
                    <h4>Authentication in progress...</h4>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Summary

 

The Blazor server app uses ASP.NET Core ‘s authorization mechanisms. You can use AuthorizeView component to render content based on user 's authorization state. This component is also supporting role-based and policy-based authorization. The authorize attribute helps you to render Blazor component based on user ‘s authorization state.