Реализация аутентификации в Kentico Xperience 13

Проблема

На этапе разработки ваших проектов клиенты иногда хотят защитить свой сайт, чтобы его нельзя было просматривать без правильного логина. В предыдущих версиях Kentico Xperience это делалось несколькими нажатиями кнопок, и, как по волшебству, аутентификация вступала в силу.  При использовании новейшей и лучшей технологии .NET это требует немного больше усилий.  Идея этой статьи заключается в том, чтобы помочь вам реализовать аутентификацию быстро и без усилий.

TL;DR;

Существует репозиторий GitHub с вспомогательным кодом, который вы можете проверить с кодом, необходимым для реализации аутентификации.

Решение

Если вы ищете более сложную реализацию, например, для портала членства или сайта электронной коммерции, вы захотите взять основы, которые вы узнаете здесь, и расширить их.

Мы будем делать это шаг за шагом. Попутно вы можете обнаружить, что я пропустил какой-то шаг, допустил синтаксическую ошибку и т.д. Если вы найдете что-то подобное, пожалуйста, напишите мне или отправьте запрос на GitHub. Давайте начнем!

Предварительные условия

• Вам нужен собственный экземпляр Kentico Xperience с подключенной базой данных. В данном примере используется Xperience версии 13.0.77.
• Для тестирования вы можете импортировать типы страниц, которые я включил, или создать свои собственные.

Шаг 1 — Проверка настроек сайта

Войдите в свой экземпляр Kentico Xperience и перейдите в приложение Settings. В приложении Settings перейдите в раздел Security & Membership. В разделе «Содержание» убедитесь, что параметр «Проверять разрешения на уровне страниц» установлен на «Защищенные области».

Шаг 2 — Добавьте страницы в дерево содержимого

Для этого шага вам понадобятся некоторые страницы в вашем дереве содержимого. Если у вас нет созданных типов страниц, посмотрите 2 простых типа страниц, которые я создал в репозитории GitHub и которые вы можете импортировать в свой проект. Оба типа страниц просты, у них есть поле «PageName» и включены все функции типа страницы.

Я добавил несколько тестовых страниц в дерево контента.

Шаг 3 — Закрепить раздел

Мы будем защищать раздел сайта /Page-2. Если вы хотите защитить весь сайт, то просто выполните описанные ниже действия для корня сайта, а не для страницы Page 2. Помните, что настройки, установленные на родительской странице, будут автоматически повторяться на дочерних страницах.

Выберите страницу Page 2 в дереве содержимого, затем выберите вкладку General > Security на стороне редактора. Прокрутите страницу Security до самого низа, установите флажок Yes для Requires authentication и сохраните страницу.

После сохранения страницы вы немедленно обеспечите безопасность этой страницы и всех ее дочерних страниц. Однако, если вы перейдете на эту страницу, у вас будет очень плохой пользовательский опыт и вы получите уродливую ошибку 403.

Я попросил вас выполнить эти шаги до внедрения кода, потому что это очень быстрый способ заблокировать все, если у вас есть срочная необходимость.  Проблема заключается в том, что нет никакого изящного отката для обработки любых ошибок, входа в систему, перенаправления и т.д., поэтому давайте посмотрим, как мы можем заставить сайт работать с тем, что мы только что реализовали.

Шаг 4 — Внедрение кода

Давайте посмотрим на структуру проекта.

Важными являются следующие файлы:

/Controllers/AccountController.cs
/Models/Users/Account/SignInViewModel.cs
/Views/Account/PermissionDenied.cshtml
/Views/Account/SignIn.cshtml
/Views/Account/WaitingForApproval.cshtml
/Views/Shared/_SignInLayout.cshtml
/StartUp.cs

Файлы, которые я упомянул выше, содержат необходимый код, необходимый для реализации безопасности.  Проект на GitHub содержит все необходимое, чтобы запустить пример сайта с аутентификацией менее чем за 30 минут.  Скорее всего, все дополнительные файлы вам не понадобятся, но вы можете их использовать.

Шаг 4A — Внедрение контроллера учетных записей

public class AccountController : Controller

Посмотрите на файл /Controllers/AccountController.cs. В этом файле есть несколько необязательных элементов, но по большей части он может быть реализован построчно.  Вы заметите, что я закомментировал весь код в этом и последующих файлах, который включает функциональность «запомнить меня».  Если вы хотите использовать эту функциональность, пожалуйста, прочитайте комментарии и обновите код соответствующим образом.

Шаг 4B — Реализация модели SignInViewModel

Как я уже упоминал, функциональность «Remember Me» закомментирована, поэтому если вы заинтересованы в этой функциональности, откомментируйте ее в этих файлах, а также в файле AccountController.

[Required(ErrorMessage = "Please enter a user name")]
[Display(Name = "User name")]
[MaxLength(100, ErrorMessage = "The User name cannot be longer than 100 characters.")]
public string UserName { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Password")]
[MaxLength(100, ErrorMessage = "The password cannot be longer than 100 characters.")]
public string Password { get; set; }

Шаг 4C — Реализация представлений

Вам необходимо добавить 4 представления:

• Представление макета входа — это урезанное представление файла _Layout.cshtml, который используется для всех представлений «аутентификации».  Следующие 3 вида будут наследовать этот вид.

• Представление входа — это форма, которую пользователь заполняет для входа в систему.

• Представление «Отказано в разрешении» — это простое сообщение пользователю о том, что он не может получить доступ к странице, скорее всего, из-за ролей, которые были внедрены (это еще одна статья в блоге).

• Вид «Ожидание одобрения» — этот вид отображает сообщение пользователю о том, что он еще не был одобрен администратором.

Ниже вы заметите, что для формы и всего остального сайта мы использовали довольно простую реализацию Bootstrap 5.  Одним из очень важных элементов, который принес мне несколько часов головной боли, был атрибут asp-route-returnurl и его значение в представлении Sign In.  Если вы не включите его, ваши пользователи не будут перенаправлены туда, куда они пытались попасть.

<h2>Sign in</h2>
<div asp-validation-summary="ModelOnly">
    <span>Please correct the following errors</span>
</div>

<form asp-controller="Account" asp-action="SignIn" method="post" class="row g-3" asp-route-returnUrl="@Context.Request.Query["ReturnUrl"]">
    <div class="col-12">
        <label asp-for="UserName" class="form-label"></label>
        <input asp-for="UserName" class="form-control" required />
        <span asp-validation-for="UserName" class="text-danger"></span>
    </div>

    <div class="col-12">
        <label asp-for="Password" class="form-label"></label>
        <input asp-for="Password" class="form-control" required />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    @* Enable if you want the "remember me" feature to work *@
    @*<div class="col-12">
        <span class="logon-remember-me-checkbox checkbox">
            @Html.EditorFor(model => model.RememberMe) @Html.LabelFor(model => model.RememberMe)
        </span>
    </div>*@
    <div class="col-12">
        <input type="submit" value="Sign in" class="btn btn-primary" />
    </div>                            
</form>

Шаг 4D — Реализация кода Startup.cs

Следующий метод — это основная область важности.  Есть еще несколько второстепенных областей, и вы увидите их при просмотре файла кода, но этот метод — самая важная часть, которую нужно обязательно реализовать.

/// <summary>
/// Method used to configure authentation for a Kentico Xperience site
/// </summary>
/// <param name="services"></param>
private static void ConfigureMembershipServices(IServiceCollection services)

Этот метод содержит все необходимые элементы, которые нужны для правильной реализации «быстрой» аутентификации на вашем сайте.  Опять же, это минимально необходимые элементы.  Если вы хотите включить дополнительные возможности или функциональность, я бы посоветовал прочитать документацию по Kentico Xperience или посмотреть пример сайта Kentico Xperience Training на GitHub (эта копия кода соответствует Kentico Xperience Developer Training).

Шаг 5 — Реализация кнопки выхода из системы

Хотя я не упомянул этот файл в предыдущем шаге, стоит отметить, что если мы позволяем пользователю войти, мы также должны позволить ему выйти.

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

@if (User.Identity.IsAuthenticated)
{
    @* Give the user a signout button if signed in *@
    @using (Html.BeginForm("SignOut", "Account", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <button type="submit" class="btn btn-link">Sign Out</button>
    }
}

Собираем все вместе

Ниже приведены несколько скриншотов основного сайта и его работы.

Незащищенная страница:

Попытка доступа к защищенной странице, принудительный вход:

После входа в систему вы получаете доступ к «защищенному» содержимому:

Это очень упрощенная реализация.  Она НЕ:

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

Что он делает, так это следующее:

• требует создания пользователя в приложении Kentico Xperience User’s,
• позволяет этому пользователю войти на публичный сайт,
• позволяет пользователю получить доступ к страницам, требующим аутентификации,
• позволяет пользователю выйти из системы, если он вошел в систему.

Если вам больше не нужна аутентификация на вашем сайте, вы можете установить параметры безопасности для этой страницы или раздела страниц на Requires authentication = NO или Inherit (NO).  Нет никаких проблем в том, чтобы оставить код на месте, за исключением того, что все страницы «/Account» будут доступны.

И это все!  Хотя это может показаться сложной задачей, вы сможете запустить этот пример в течение 30 минут, даже если вам придется установить новый экземпляр Kentico Xperience.

Ждем ваших комментариев и улучшений на GitHub!

Удачи и счастливого кодинга!