Permissions in Headless CMS

[vitalybrandes]

I am building my project based on Orchard Core + Blazor / React.
I am wondering how to implement orchard permissions system from the UI side.
What will be the best concept to Authorize "add, edit, delete" btn in the UI based on orchard core permissions - not roles.
I do use openid for user authentication.

What will be the best way to "share" user permission with my UI? Both for React and Blazor?!

[Skrypt]

You have OpenId scopes that you can also use as "roles"

[vitalybrandes]

@Skrypt
If i wand to check permission in Razor page or mvc view i just inject authorizationService and check if user have permission , like this:

@if (await _authorizationService.AuthorizeAsync(User, CRM.Module.Permissions.AddData) is true)
{
    <div class="mb-2">
        <a class="btn btn-outline-primary btn-icon-text" style="width: 200px;" asp-page="Add">
            <i class="fas fa-plus"></i>
            <span class="menu-title">Add</span>
        </a>
    </div>
}

i am searching for the right and nice way to do the same in Blazor and React.
based on orchard core permission manger UI views.
Otherwise any other recommendation how to do that.

[ns8482e]

@vitalybrandes permission should be always checked on server side apis

on client side in browser (Blazor/angular/React/Vue) you really define/design user persona and their UI experience, and how you show/hide UI elements/screen based on what action their persona can perform

@Skrypt suggest can use open id scopes and in your UI application you map that scope with persona UI actions

Or you can define an api that returns you what actions a user can perform on given UI screen based on their OC permission

[vitalybrandes]

@ns8482e Thank you for reply.
Basically what you suggest is to create api that will return specific user OC permissions?,
then based on this hide or show elements in ui.
right?

[Skrypt]

To be honest, I think there are some missing implementations in OC for that matter. I personally would try to implement what's missing. Everything else is a workaround for now.

[vitalybrandes]

@Skrypt
What do you think will be the pest way to do that?

[ns8482e]

@vitalybrandes I mean that in general you can't rely java script for permission validation as that can be spoofed or overridden with browser developer tools. the actual validation for permission should always be done on server side before performing any security sensitive operations.

Yes you need something that show/hide UI depending on logged in user permission e.g. you may want to hide/show delete button if logged in user can't delete. For that you can create a custom API that returns flags for your UI based on server side permissions.

[hyzx86]

You can refer to EasyOC
I implemented some API permission validation using the Attribute
https://github.com/EasyOC/EasyOC/blob/main/src/Core/EasyOC.Core/Authorization/Attributes/EOCAuthorizationAttribute.cs

Then referring to the design of ABP, the dynamic API is introduced ，
These API methods can be reused by background code
https://github.com/EasyOC/EasyOC/blob/68894983b0b64d1bba6eb9426c02137a02111084/src/Modules/EasyOC.OrchardCore.OpenApi/Services/Roles/RolesAppService.cs#L56

[hyzx86]

But remember to update your OpenID Server Settings

[hyzx86]

Too much permission information will lead to a large JWT token, and the request header will be too long because the token needs to be placed in the request header
So I plan to switch to an encrypted token and get access all at once

But I wonder why the return information of connect/userinfo does not contain permission information

So I wrote a UserInfo interface myself and didn't use Openid

[vitalybrandes]

@hyzx86
I do need mirror permission list in the spa ?!

[hyzx86]

Yes, that's what I did, or would you need to send a request every time you check permissions?
Of course, if you don't think it's expensive, you can do it

[vitalybrandes]

Thank you all!

[Skrypt]

I will take a look this week. I need to work with OpenApi. If I have some suggestions I will post them here.
The first thing I did so far is to do some customizations on @deanmarcussen module that can be found there :

https://github.com/ThisNetWorks/ThisNetWorks.OrchardCore.OpenApi

This adds OpenApi tooling for Orchard Core.
It will by default set an endpoint for testing your REST API endpoints by using Swagger UI.
The tooling can also be used to generate TypeScript code that can be used afterward to access your different REST APIs.
I need to test how authentication works vs permission with this method still.
Though, the OrchardCore.Contents API controller for example already has permissions check implemented by adding the ViewContentApi permission to a specific role. Then the user needs to have common permissions like Edit, Delete, Publish, EditOwn, DeleteOwn, PublishOwn. This should already work by default.

Though, when we are talking about GraphQL the common permissions are not checked. Right now, the GraphQL endpoint does not do mutations because of that matter.

Removing JWT token encryption needs to be used carefully.

[hyzx86]

I also learn from several enabled SwaggerUI projects, including ThisNetWorks. OrchardCore. OpenApi
I used Swashbuckle.AspNetCore instead of NSwag.AspNetCore in my project
Meanwhile, I have realized the OIDC code authorization on SwaggerUI
It is also compatible with JToken or JObject attributes such as user-defined extension information

[Skrypt]

You added Users and Roles API. And a lot of other things. Though I'm not seeing the ones that come with Orchard Core by default: Content, Lucene, Queries, Tenants. I assume that these got removed from the Swagger UI documentation in favor of your custom APIs.

[hyzx86]

it contains all of OC's open apis, they're just at the top
Of course, same as ThisNetWorks.Orchardcore.OpenApi , does not include graphl and openId