Как загрузить роли пользователей из базы данных и назначить их пользователю в Blazor WASM

Вопрос или проблема

builder.Services.AddIdentity<AppUser, IdentityRole>(options =>
{
    options.SignIn.RequireConfirmedAccount = true;
    options.User.AllowedUserNameCharacters = "0123456789";
    options.User.RequireUniqueEmail = true;
}).AddRoles<IdentityRole>()
  .AddRoleManager<RoleManager<IdentityRole>>()
  .AddEntityFrameworkStores<DBcontext>().AddDefaultUI();

builder.Services.AddIdentityServer()
    .AddApiAuthorization<AppUser, DBcontext>();

builder.Services.AddApiAuthorization();

[HttpPost]
public async Task<IdentityResult> AddRole(AppUser user, string RoleName)
{
    try
    {
        var Role = await db.Roles.FirstOrDefaultAsync(r => r.Name == RoleName);

        if (Role == null)
        {
            Role = new IdentityRole()
                       { 
                           Name = RoleName, 
                           NormalizedName = RoleName.ToUpper() 
                       };
            await db.Roles.AddAsync(Role);
            await db.SaveChangesAsync();
        }

        return await um.AddToRoleAsync(user, RoleName);
    }
    catch (Exception ex)
    {
        // ....
    }
}

<AuthorizeView Roles="Admin,User,Owner">

Ответ или решение

Чтобы загрузить роли пользователей из базы данных и назначить их в приложении Blazor WebAssembly (WASM), которое работает на ASP.NET Core и использует аутентификацию с помощью ASP.NET Core Identity, вам потребуется предпринять несколько шагов. Вот пошаговое руководство по решению данной задачи.

Шаг 1: Подготовьте ваше приложение

Убедитесь, что необходимо правильно настроить вашу серверную часть и клиентскую часть приложения. В вашем коде из Program.cs серверной части с использованием AddIdentity и AddIdentityServer уже выглядит корректным. Также убедитесь, что вы сохраняете роли в базе данных и используете UserManager и RoleManager для выполнения операций с ролями.

Шаг 2: Подключение Identity в данном контексте

Так как у вас уже настроен Identity, убедитесь, что используются необходимые сервисы. После добавления ролей в базу данных, необходимо убедиться, что роли привязаны к пользователям и загружаются при аутентификации.

Шаг 3: Подразумевается наличие JWT токенов

В AddApiAuthorization в клиентское приложение, в Program.cs, это должно обеспечивать получение JWT (JSON Web Token) для аутентификации пользователей. Однако, необходимо убедиться, что массив ролей загружается вместе с токеном. Для этого настройте вашу систему аутентификации.

Шаг 4: Загрузка ролей для пользователя

Чтобы успешно загружать роли для аутентифицированного пользователя, вам нужно использовать ClaimsTransformation. Для этого создайте класс, который будет реализовывать загрузку пользовательских ролей:

public class CustomClaimsTransformation : IClaimsTransformation
{
    private readonly UserManager<AppUser> _userManager;

    public CustomClaimsTransformation(UserManager<AppUser> userManager)
    {
        _userManager = userManager;
    }

    public async Task<ClaimsPrincipal> TransformAsync(ClaimsPrincipal principal)
    {
        var identity = principal.Identity as ClaimsIdentity;
        if (identity != null && identity.IsAuthenticated)
        {
            var user = await _userManager.FindByNameAsync(identity.Name);
            var roles = await _userManager.GetRolesAsync(user);
            foreach (var role in roles)
            {
                identity.AddClaim(new Claim(ClaimTypes.Role, role));
            }
        }
        return principal;
    }
}

Вам также потребуется зарегистрировать этот класс в Program.cs:

builder.Services.AddScoped<IClaimsTransformation, CustomClaimsTransformation>();

Шаг 5: Проверьте конфигурацию авторизации

В вашем клиентском проекте, чтобы компоненты AuthorizeView могли правильно обрабатывать роли, убедитесь, что .AddApiAuthorization() настроена для передачи ролей вместе с токеном. Вам нужно добавить специальный обработчик в Middleware, если это не было сделано ранее.

Шаг 6: Использование AuthorizeView

Воспользуйтесь AuthorizeView в компоненте:

<AuthorizeView Roles="Admin,User,Owner">
    <Authorized>
        <p>Добро пожаловать, вы в группе повышенных прав!</p>
    </Authorized>
    <NotAuthorized>
        <p>Доступ запрещен.</p>
    </NotAuthorized>
</AuthorizeView>

Заключение

Эти шаги должны помочь вам успешно загрузить роли пользователя из базы данных и назначить их после аутентификации. Убедитесь, что роли корректно добавляются и связываются между собой, а также, что при аутентификации пользователи получают все необходимые Claims. Это обеспечит корректное отображение содержимого в соответствии с назначенными ролями.