Элемент управления Login

57

Элемент управления Login упрощает создание страницы входа для аутентификации с помощью форм в сочетании с Membership API. Он предоставляет готовый к применению пользовательский интерфейс, запрашивающий имя и пароль пользователя и предлагающий кнопку для входа пользователя. "За кулисами" он инкапсулирует функциональность, которая была описана в предыдущей статье: проверку удостоверений пользователей через Membership API и инкапсуляцию базовой функциональности аутентификации с помощью форм, такой как перенаправление к изначально запрошенной странице в защищенной области приложения после успешного входа.

Это значит, что Login инкапсулирует такие вещи, как Membership.ValidateUser() или FormsAuthentication.RedirectFromLoginPage(), поэтому писать этот код самостоятельно не придется. На рисунке ниже показан элемент управления Login в действии:

Элемент управления Login в действии

Всякий раз, когда пользователь щелкает на кнопке Log In (Войти), элемент управления автоматически проверяет имя и пароль, применяя для этого функцию Membership.ValidateUser(), а затем вызывает FormsAuthenication.RedirectFromLoginPage(), если проверка прошла успешно. Все опции элемента управления Login влияют на ввод, доставляемый им в эти метода. Например, если отметить флажок Remember me next time (Запомнить учетные данные), он передаст значение true в параметре createPersistentCookie метода RedirectFromLoginPage(). Поэтому FormsAuthenticationModule создает постоянный cookie-набор.

"За кулисами" Login представляет собой составной элемент управления ASP.NET. Он полностью расширяем - в том смысле, что позволяет переопределять любые стили компоновки и свойства, а также перехватывать генерируемые события для переопределения его поведения по умолчанию. Если оставить элемент управления без изменений, как он есть, и не перехватывать никаких событий, то он автоматически будет использовать поставщик членства, сконфигурированный для приложения.

Простейшая форма элемента управления Login на странице выглядит следующим образом:

<asp:Login ID="Login1" runat="server" />

Для изменения внешнего вида элемента управления Login предназначено несколько свойств. Можно применять разные установки стилей, как показано ниже:

<div style="text-align: center">
	<asp:Login ID="Login1" runat="server" BackColor="#E3EAEB" BorderColor="#E6E2D8"
	    BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana"
	    Font-Size="0.8em" ForeColor="#333333" TextLayout="TextOnTop" 
	    CssClass="Login">
	    <TextBoxStyle Font-Size="0.8em" CssClass="MyLoginTextBoxStyle" />
	    <LoginButtonStyle BackColor="White" BorderColor="#C5BBAF" BorderStyle="Solid"
	        BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#1C5E55" />
	    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
	    <TitleTextStyle BackColor="#1C5E55" Font-Bold="True" Font-Size="0.9em"
	        ForeColor="White" CssClass="Title" />
	</asp:Login>
</div>

Кроме того, для настройки внешнего вида Login можно использовать классы CSS. Каждое свойство стиля, поддерживаемое элементом управления Login, включает свойство CssClass. Как и в случае любого другого элемента управления ASP.NET, это свойство позволяет указать имя класса CSS, который был добавлен ранее к веб-сайту. Предположим, что в проект добавлена следующая таблица стилей CSS с именем файла MyStyles.css:

.MyLoginTextBoxStyle {
    cursor: pointer;
    background-color: yellow;
    text-align: center;
    padding:6px;
    border: dotted black;
    font-family: Verdana;
    vertical-align: middle;
}

.Login {
    display:inline-block;
}

.Title {
    padding: 6px;
}

Этот файл стиля можно включить в страницу входа, чтобы иметь возможность использовать стиль для элемента Login:

<link href="MyStyles.css" rel="stylesheet" type="text/css" />

В таблице ниже перечислены стили, поддерживаемые элементом управления Login. Каждый стиль работает одним и тем же способом. Свойства шрифта и цвета можно устанавливать непосредственно или применять свойство CssClass для указания нужного класса CSS:

Стили, поддерживаемые элементом управления Login
Стиль Описание
CheckBoxStyle

Определяет свойства стиля для флажка Remember me next time (Запомнить учетные данные)

FailureStyle

Определяет стиль для текста, который отображается а случае неудачного входа

HyperLinkStyle

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

InstructionTextStyle

Элемент управления Login позволяет указать текст справки, отображаемый непосредственно в нем самом. Этот стиль задает внешний вид этого текста

LabelStyle

Определяет стиль для меток User Name (Имя пользователя) и Password (Пароль)

LoginButtonStyle

Определяет стиль кнопки входа

TextBoxStyle

Определяет стиль для текстовых полей User Name (Имя пользователя) и Password (Пароль)

TitleTextStyle

Определяет стиль текста заголовка для элемента управления Login

ValidatorTextStyle

Определяет стили для элементов управления, используемых для проверки имени и пароля пользователя

Пользовательский интерфейс элемента Login настраивается не только через эти стили; другие дополнительные свойства предназначены для определенных частей содержимого элемента управления, таких как кнопка Log In, которые также позволяют настроить графический интерфейс.

Например, можно выбрать текст, отображаемый на кнопке входа, либо вообще отображать вместо этой кнопки (как установлено по умолчанию) гиперссылку. Более того, к элементу управления Login можно добавить несколько гиперссылок, таких как ссылка на страницу справки или на страницу регистрации. Обе страницы должны быть открыты для анонимного доступа, поскольку справка должна предлагаться также анонимным пользователям (вспомните, что если кто-то видит элемент управления Login, то он - потенциально анонимный пользователь). Чтобы включить дополнительные ссылки в Login, модифицируйте ранее показанное определение следующим образом:

<asp:Login ID="Login1" runat="server" ...
    CreateUserText="Регистрация в системе"
    CreateUserUrl="~/Register.aspx"
    HelpPageText="Справка"
    HelpPageUrl="~/Help.html"
    InstructionText="Пожалуйста введите имя пользователя и пароль для входа в систему"
    PasswordRecoveryUrl="~/PasswordRecovery.aspx">
    ...
</asp:Login>

Этот код приводит к отображению двух дополнительных ссылок - на страницу справки и на страницу первоначальной регистрации, а также добавляет текст краткой инструкции под заголовком элемента Login:

Настройка элемента управления Login

Стили, описанные ранее, применимы и к этим свойствам. В таблице ниже описаны важные свойства для настройки элемента управления Login:

Важные свойства для настройки элемента управления Login
Свойство Описание
Текст сообщений
TitleText

Текст, отображаемый в заголовке элемента управления

InstructionText

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

FailureText

Текст, отображаемый элементом управления Login, если попытка входа не удалась

UserNameLabelText

Текст, отображаемый в виде метки перед текстовым полем имени пользователя

PasswordLabelText

Текст, отображаемый в виде метки перед текстовым полем пароля пользователя

UserName

Начальное значение, заполняющее текстовое поле имени пользователя

UsernameRequiredErrorMessage

Сообщение об ошибке, отображаемое, если пользователь не ввел имя

PasswordRequiredErrorMessage

Сообщение об ошибке, отображаемое, если пользователь не ввел пароль

Кнопка входа
LoginButtonText

Текст, отображаемый на кнопке входа

LoginButtonType

Кнопка входа может отображаться как ссылка, кнопка или графическое изображение. Для этого нужно соответствующим образом установить это свойство. Допустимые значения - Link, Button и Image

LoginButtonImageUrl

Если кнопка входа представлена как графическое изображение, необходимо указать URL, где находится это изображение

Страница входа
DestinationPageUrl

Если попытка входа была успешной, элемент управления Login перенаправляет пользователя на эту страницу. По умолчанию это свойство пусто. При пустом значении используется инфраструктура аутентификации с помощью форм для перенаправления либо на исходную запрошенную страницу, либо на defaultUrl, сконфигурированный в web.config для аутентификации с помощью форм

FailureAction

Определяет действие, которое элемент управления выполняет после неудачной попытки входа. Два допустимых варианта - Refresh и RedirectToLoginPage. Первое значение приводит к обновлению только текущей страницы, а второе - к перенаправлению на сконфигурированную страницу входа. Второй вариант полезен, если элемент управления Login используется где-то в другом месте, а не на странице входа

VisibleWhenLoggedIn

Если установлено в false, то элемент управления автоматически скрывает себя, если пользователь уже вошел. Если установлено в true (по умолчанию), то элемент Login отображается, даже если пользователь совершил вход

Настройка метки "Запомнить меня"
DisplayRememberMe

Позволяет показывать или скрывать флажок Remember me next time (Запомнить меня). По умолчанию это свойство установлено в true

RememberMeSet

Определяет значение по умолчанию флажка Remember me next time. По умолчанию это свойство установлено в false, т.е. флажок не отмечен

Страница регистрации
CreateUserUrl

Определяет гиперссылку на страницу веб-сайта, которая позволяет создавать (регистрировать) пользователя. Таким образом, это обычно используется для открытия пользователю доступа к странице первичной регистрации. Обычно при этом отображается элемент управления CreateUserWizard

CreateUserText

Определяет текст, отображаемый в гиперссылке CreateUserUrl

CreateUserIconUrl

URL-адрес графического изображения, выводимого вместе с текстом гиперссылки CreateUserUrl

Страница помощи
HelpPageUrl

URL-адрес для перенаправления пользователя на страницу справки

HelpPageText

Текст, отображаемый в гиперссылке, сконфигурированной в свойстве HelpPageUrl

HelpPageIconUrl

URL-адрес значка, отображаемого вместе с текстом гиперссылки HelpPageUrl

Страница восстановления пароля
PasswordRecoveryUrl

URL-адрес для перенаправления пользователя на страницу восстановления пароля. Эта страница применяется, когда пользователь забыл пароль. Обычно она отображает элемент управления PasswordRecovery

PasswordRecoveryText

Текст, отображаемый в гиперссылке, сконфигурированной в свойстве PasswordRecoveryUrl

PasswordRecoveryIconUrl

URL-адрес значка, отображаемого вместе с текстом гиперссылки PasswordRecoveryUrl

Шаблоны и элемент управления Login

Как видите, благодаря всем этим свойствам элемент управления Login настраивается очень гибко. Но как вы, скорее всего, обратили внимание, определить какое-нибудь выражение для проверки достоверности ввода невозможно. Конечно, можно реализовать проверку достоверности на стороне сервера внутри процедур событий, предлагаемых элементом управления Login. Когда требуется добавить какие-то элементы к составному элементу управления Login, это не получится сделать через представленные выше свойства. Например, что если понадобится второе текстовое поле для надежной аутентификации со вторым паролем или пользовательским ключом доступа, как это делается на некоторых правительственных сайтах?

К счастью, подобно другим элементам управления, таким как GridView, элемент Login поддерживает шаблоны. С помощью шаблонов можно настраивать содержимое элемента управления Login без каких-либо ограничений. К нему можно добавлять любые новые элементы управления. Применяется специальный шаблон к элементу управления Login с помощью дескриптора LayoutTemplate:

<asp:Login ID="Login1" runat="server"
    BackColor="aliceblue"
    BorderColor="Black"
    BorderStyle="double"
    PasswordRecoveryUrl="~/PasswordRecovery.aspx">
    <LayoutTemplate>
        <h4>Войти в систему</h4>
        <table>
            <tr>
                <td>Имя пользователя: </td>
                <td>
        			<asp:TextBox ID="UserName" runat="server" />
        			<asp:RequiredFieldValidator ID="UserNameRequired"
            			runat="server"
            			ControlToValidate="UserName"
            			ErrorMessage="*" ForeColor="Red"
            			ValidationGroup="LoginGroup1" />
       				<asp:RegularExpressionValidator ID="UsernameValidator"
            			runat="server"
            			ControlToValidate="UserName"
            			ValidationExpression="[\w| ]*"
           				ErrorMessage="Некорректное имя пользователя"
            			ValidationGroup="LoginGroup1" />
                </td>
            </tr>
            <tr>
                <td>Пароль: </td>
                <td>
        			<asp:TextBox ID="Password" runat="server" TextMode="Password" />
        			<asp:RequiredFieldValidator ID="PasswordRequired"
            			runat="server"
            			ControlToValidate="Password"
            			ErrorMessage="*" ForeColor="Red"
            			ValidationGroup="LoginGroup1" />
        			<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
            			runat="server"
            			ControlToValidate="Password"
            			ValidationExpression='[\w| !"@§$%&/()=\-?\*]*'
            			ErrorMessage="Некорректный пароль"
            			ValidationGroup="LoginGroup1" />
                </td>
            </tr>
        </table>
        <asp:CheckBox ID="RememberMe" runat="server" Text="Запомнить меня" /><br />
        <asp:Literal ID="FailureText" runat="server" /><br />
        <asp:Button ID="Login" CommandName="Login" runat="server" Text="Войти в систему" ValidationGroup="LoginGroup1" />
    </LayoutTemplate>
</asp:Login>

Если посмотреть на приведенный код, то возникает один вопрос: если при настройке шаблона приходится писать настолько много кода пользовательского интерфейса (или проектировать его в визуальном конструкторе), так почему бы ни написать собственную страницу входа, не применяя элемента управления Login?

Это правильный вопрос. Однако, как объяснялось ранее, интерфейсная часть - это только одна часть элемента Login. Например, на случай, когда пользователь щелкает на кнопке входа, элемент управления Login уже имеет весь необходимый код для автоматической проверки пользователя по хранилищу членства и перенаправляет его на исходную запрошенную им страницу через инфраструктуру аутентификации с помощью форм. Так что вы определенно избавлены от необходимости написания этого кода.

С правильными элементами управления и корректными значениями идентификаторов для этих элементов управления не понадобится писать код обработки событий. Код работает обычным образом, за исключением того, что вы определяете набор элементов управления и их компоновку. В действительности элемент управления Login требует как минимум двух текстовых полей с идентификаторами UserName и Password. Если эти два текстовых поля отсутствуют (или имеют другие значения идентификатора), то Login сгенерирует исключение. Все остальные элементы управления не обязательны, но если вы указываете соответствующее значение идентификатора (такое как Login для кнопки входа), то Login автоматически обработает их события, и будет вести себя так, как тогда, когда применяется компоновка по умолчанию.

В таблице ниже перечислены специальные значения идентификаторов, требуемые для них типы элементов и признак обязательности:

Специальные элементы управления для шаблона Login
Идентификатор элемента Тип элемента Обязателен?
UserName System.Web.UI.WebControls.Textbox Да
Password System.Web.UI.WebControls.Textbox Да
RememberMe System.Web.UI.WebControls.CheckBox Нет
FailureText System.Web.UI.WebControls.Literal Нет
Login Любой элемент управления, поддерживающий пузырьковое распространение событий и свойство CommandName Нет

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

Можно также добавлять элементы управления с другими идентификаторами, которые вообще не имеют отношения к Login. В показанном выше коде применялись элементы RequiredFieldValidator и RegularExpressionValidator для проверки полей имени пользователя и пароля.

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

Все свойства стиля и несколько свойств настройки текстового содержимого элементов по умолчанию больше не доступны в редакторе свойств Visual Studio, поскольку их можно добавить вручную как отдельные элементы управления или статический текст к шаблону элемента Login. Если вы будете добавлять их к элементу Login в режиме шаблона, они просто будут игнорироваться, потому что шаблон переопределяет интерфейс по умолчанию элемента Login, который пользуется этими свойствами.

Программирование элемента управления Login

Элемент управления Login поддерживает несколько событий и свойств, которые можно применять для настройки его поведения. Они предоставляют полный контроль над тонкой настройкой элемента управления Login (наряду с другими средствами настройки, такими как шаблоны и свойства стиля). Элемент управления Login поддерживает события, перечисленные в таблице ниже:

События элемента управления Login
Событие Описание
LoggingIn

Инициируется непосредственно перед аутентификацией пользователя элементом управления

LoggedIn

Инициируется после того, как пользователь аутентифицирован элементом управления

LoginError

Инициируется при неудачной попытке входа пользователя по какой-либо причине (например, из-за неправильного пароля или имени пользователя)

Authenticate

Инициируется для аутентификации пользователя. Если вы обрабатываете это событие, то должны аутентифицировать пользователя самостоятельно, и элемент управления Login будет полностью полагаться на ваш код аутентификации

Первые три события можно обрабатывать для выполнения некоторых действий перед аутентификацией пользователя, после аутентификации и в случае возникновения ошибки во время осуществления аутентификации. Например, событие LoginError можно использовать для автоматического перенаправления пользователя на страницу восстановления пароля после определенного количества попыток входа, как показано ниже:

protected void Page_Load(object sender, EventArgs e)
{
	if (!this.IsPostBack)
	    ViewState["LoginErrors"] = 0;
}

protected void Login1_LoginError(object sender, EventArgs e)
{
	// Если состояние LoginErrors не существует, создать его
	if (ViewState["LoginErrors"] == null) 
	    ViewState["LoginErrors"] = 0;
	
	// Увеличить счетчик неудачных попыток входа
	int ErrorCount = (int)ViewState["LoginErrors"] + 1;
	ViewState["LoginErrors"] = ErrorCount;

	// Проверить количество неудачных попыток
	if ((ErrorCount > 3) && (Login1.PasswordRecoveryUrl != string.Empty))
	    Response.Redirect(Login1.PasswordRecoveryUrl);
}

Элемент управления Login генерирует события в порядке, представленном на рисунке ниже:

Последовательность генерации событий элементом управления Login

Как упоминалось ранее, если вы перехватываете событие Authenticate, то должны добавить собственный код проверки имени пользователя и пароля. Свойство Authenticate поддерживает экземпляр AuthenticateEventArgs списка параметров. Этот класс аргумента события поддерживает одно свойство по имени Authenticated. Если установить его в true, то элемент управления Login предполагает, что аутентификация прошла успешно, и инициирует событие LoggedIn. Если же установить это свойство в false, будет отображен FailureText и инициировано событие LoginError:

protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)
{
        if (Membership.ValidateUser(Login1.UserName, Login1.Password))
        {
            e.Authenticated = true;
        }
        else
        {
            e.Authenticated = false;
        }
}

Как видите, имеется прямой доступ к введенным значениям через свойства UserName и Password, которые содержат текст, введенный в соответствующие текстовые поля. Если вы используете шаблонные элементы управления и хотите получить значение из другого элемента, в дополнение к элементам с идентификаторами UserName и Password, то для этого можете использовать метод FindControl() для получения этого дополнительного элемента. Этот метод принимает идентификатор нужного элемента и возвращает экземпляр System.Web.UI.Control. Затем полученный объект просто приводится к типу требуемого элемента управления и читается значение, необходимое специальному методу проверки удостоверения пользователя.

Пройди тесты
Лучший чат для C# программистов