LightSwitch Tip: A Simple Way to Check User Permissions from the HTML Client

Those of you that have been working with LightSwitch know that we support a robust permissions system that allows developers to define certain permissions and then check them in code. LightSwitch provides numerous “CanExecute” hooks on entities and queries that can be used for checking permissions around data & query actions.

For instance, if you have defined a permission “CanAddCustomer” you can check if a user has this permission before allowing Inserts on the Customer entity on the server. First define the permissions on the Access Control tab of the project properties:

Then in the data designer, select the Server perspective and then drop down the “Write Code” button and select the Customers_CanInsert access control method:

Then you write code like this to allow or disallow the insertion of customers:

Private Sub Customers_CanInsert(ByRef result As Boolean)
    result = Me.Application.User.HasPermission(Permissions.CanAddCustomer)End Sub

You always want to secure the server-side this way in order to protect the data in your system. However, sometimes we also want to use a permission check in the UI in order to hide/unhide (or enable/disable) elements on a screen.

In the Silverlight desktop client this is a very easy thing to do because we make use of portable assemblies that allows LightSwitch to share code between the client and the server side. You have a User object available to you at all times from any screen. In the HTML client this isn’t the case but all is not lost!

Define a Query

If we want to check permissions on the HTML client screens, the easiest thing to do is add a query and secure the query on the server-side. For example, add a query based on Customer called CanAddCustomer:

Then add the code in the CanAddCustomer_CanExecute method to check the permission:

Private Sub CanAddCustomer_CanExecute(ByRef result As Boolean)
    result = Me.Application.User.HasPermission(Permissions.CanAddCustomer)End Sub

Because this will hit the database if a user does have permission, we can make the query as efficient as possible by not returning any actual results. Select the CanAddCustomer_PreprocessQuery method and write a query that won’t return results.

Private Sub CanAddCustomer_PreprocessQuery(            ByRef query As System.Linq.IQueryable(Of LightSwitchApplication.Customer))

    query = From c In query Where 0 = 1End Sub

Set Up the Screen

Now that we have our query we can add it to the screen in which we want to enable/disable UI elements based on this permission. On the screen designer click the “Add Data Item” button at the top and add the query to your screen:

Then select the control you want to enable/disable and note its name in the properties window, we’ll need this in code.

Add Some JavaScript Code

Lastly, select the Screen node in the designer and then drop down the “Write Code” button and add code to the “created” method.

myapp.BrowseCustomers.created = function (screen) {// Write code here.screen.getCanAddCustomer().then(function success() {
        screen.findContentItem("AddCustomer").isEnabled = true;
    }, function error() {
        screen.findContentItem("AddCustomer").isEnabled = false;
    });

};

The code calls the query on our screen and it will fail if the user doesn’t have permission to execute it, which will invoke the failure handler. Note that this could also hide the UI if the query failed for another reason, but this ensures the UI is only shown if the client can actually verify the user’s permissions.

Remember that hiding the elements in the client doesn't provide real security, so make sure to use the server-side access control methods shown above to ensure no client can access data you want to protect. 

Enjoy!