Owin Framework

An open architecture for interoperable middleware

Interfaces

Project

Authorization UI

NuGet packageOwin.Framework.Authorization.UI
GitHub sourceOwinFramework.Authorization.UI

Home |  Readme

The OwinFramework.Authorization.UI Project

The authorization repository readme file contains documentation on the key concepts around authorization in the Owin Framework. It is strongly recommended that you read it before using this assembly.

To make this UI appear inside a page on your website you need to add a this <div id="auth-ui"></div> to your page. You also need to add a reference to the compiled Javascript. Optionally you can add a reference to the bundled CSS or you can provide your own.

With the default configuration, the asset references in the head of your html page should look like this: 

    <link rel="stylesheet" href="/ui/authorization/styles.css">
    <script async="" src="/ui/authorization/main.dart.js"></script>
This user interface is written in Dart, but the compiled Javascript is embedded into the assembly, so you only need to deploy the assembly for the UI to fully function.

Adding this middleware to the Owin pipeline

builder.Register(ninject.Get<OwinFramework.Authorization.UI.AuthorizationUiMiddleware>())
    .As("Authorization UI")
    .ConfigureWith(config, "/owinFramework/middleware/authorizationUi");    
builder.Register(ninject.Get<OwinFramework.Authorization.UI.AuthorizationApiMiddleware>())
    .As("Authorization UI API")
    .ConfigureWith(config, "/owinFramework/middleware/authorizationUi");
The assumes that you are using Ninject as your IoC container, and followed the getting started walkthrough. If this is not the case then you will need to adjust the code to work in your application.

Default Configuration

The configuration below is the configuration you will get by default if you do not provide a configuration for this middleware. 

{
   "owinFramework": {
      "middleware": {
         "authorizationUi": {
            "documentationRootUrl": "/owin/authorizationUi/config",
            "apiRootUrl": "api/authorization",
            "uiRootUrl": "ui/authorization",
            "assetsPath": "assets",
            "permissionToCallApi": "auth:api",
            "permissionToViewIdentities": "auth:identity.view",
            "permissionToEditPermissions": "auth:permission.edit",
            "permissionToEditRoles": "auth:role.edit",
            "permissionToEditGroups": "auth:group.edit",
            "permissionToAssignPermissionToRole": "auth:permission.assign",
            "permissionToAssignRoleToGroup": "auth:role.assign",
            "permissionToAssignUserToGroup": "auth:group.assign",
            "identityDisplayNameClaims": "username,email"
         }
      }
   }
}
Note that this package contains two middleware components, one serves the user interface and the other handles Ajax calls from the front end. Both middleware components need to be added to the pipeline for the UI to function.

Configuration notes

  • You can add permissions to your database with any naming convention you like, you just need to ensure that the code names of the permissions that you configure match the code names in your authorization database.
  • When searching for identities this UI will display selected claims for each matching identity. Since the claim names are different in every system, you can configure a list of claim names to display. For example if your system stores surname claims then you can add surname to the identityDisplayNameClaims list to have this displayed in the UI.

Related Projects

Copyright 2014-2020