Пошаговое руководство. Создание веб-сайта ASP.NET с базовой функцией входа пользователей

Многие веб-сайты предоставляют доступ к своему содержимому только вошедшим пользователям (прошедшим проверку подлинности). По умолчанию ASP.NET предоставляет шаблоны проекта веб-сайта, включающие страницы, с помощью которых можно выполнить проверку подлинности.

ПримечаниеПримечание

Представленный в этом пошаговом руководстве шаблон проекта веб-сайта ASP.NET впервые появился в Visual Studio 2010.

В этом пошаговом руководстве рассматривается, как с помощью шаблона проекта веб-сайта ASP.NET создать веб-сайт с базовой функцией входа пользователей.

В этом пошаговом руководстве демонстрируется выполнение следующих задач.

  • Создание веб-сайта ASP.NET.

  • Создание страницы с доступом только для членов. Эта страница будет доступна только пользователям, прошедшим проверку подлинности (вошедшим пользователям).

  • Использование страницы регистрации, на которой пользователи могут зарегистрироваться и создать новую учетную запись.

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

  • Использование страницы смены пароля, на которой имеющие учетную запись пользователи могут изменить свой пароль.

  • Предоставление доступа к странице смены пароля (исключительно) пользователям, прошедшим проверку подлинности.

Для выполнения этого пошагового руководства потребуется следующее.

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

В данном пошаговом руководстве используется проект веб-сайта. Вместо этого можно использовать проект веб-приложения. Сведения о различиях между этими типами веб-проектов см. в разделе Сравнение проектов веб-приложений с проектами веб-сайтов.

Создание нового веб-сайта ASP.NET

  1. Запустите Visual Studio или Visual Web Developer.

  2. В меню Файл выберите пункт Новый веб-узел. (Если этот пункт отсутствует, выберите команду Создать, а затем — Веб-сайт.)

    Откроется диалоговое окно Новый веб-узел.

  3. В разделе Установленные шаблоны щелкните элемент Visual Basic или C#, а затем щелкните пункт Веб-сайт ASP.NET.

  4. В поле Расположение в Интернете выберите пункт Файловая система и введите имя папки, в которой будут храниться страницы веб-сайта. Например, введите имя папки C:\Websites\Login и нажмите кнопку ОК.

    Visual Studio создаст папку и откроет веб-сайт в представлении Исходный код. Обратите внимание, что корневой веб-сайт содержит несколько файлов и папок, включая папку Account, файл Web.config, страницы About.aspx и Default.aspx и главную страницу Site.master.

  5. Нажмите клавиши CTRL+F5 для запуска страницы.

    В браузере отобразится домашняя страница веб-сайта. Обратите внимание на пункты меню (Домашняя страница, О программе) и гиперссылку Вход.

  6. Закройте браузер.

В этом разделе рассматривается, как создать страницу с доступом только для членов. Эта страница будет доступна только вошедшим пользователям (прошедшим проверку подлинности). На главную страницу будет добавлен элемент управления HyperLink, с помощью которого пользователи, прошедшие проверку подлинности, будут перенаправляться на страницу, доступную только членам. Не вошедший (анонимный) пользователь, щелкнувший гиперссылку для членов, будет перенаправлен на страницу входа для входа или создания учетной записи.

Создание страницы с доступом только для членов

  1. В окне Обозреватель решений щелкните правой кнопкой мыши папку Account и выберите команду Добавить новый элемент.

    ПримечаниеПримечание

    Убедитесь, что новая страница создается в папке Account.

  2. В диалоговом окне Создать веб-сайт выберите пункт Веб-форма.

  3. В текстовом поле Имя введите MembersOnly.aspx.

  4. Установите флажок Выбрать главную страницу и нажмите кнопку Добавить.

    На экране появится диалоговое окно Выберите главную страницу.

  5. В области Содержимое папок выберите Site.master и нажмите кнопку ОК.

    В папке Account будет создана страница MembersOnly.aspx. Эта страница является страницей содержимого для страницы Site.master.

  6. В окне Обозреватель решений двойным щелчком мыши откройте страницу MemberOnly.aspx и перейдите в представление Конструктор.

  7. Добавьте содержимое на главную страницу.

    Например, можно добавить фразу "Добро пожаловать на страницу, доступную только членам. Вход выполнен успешно".

Помимо созданной страницы, в папке Account также содержатся следующие страницы и файлы.

  • Страница Register.aspx. На этой странице пользователи могут создать учетную запись.

  • Страница Login.aspx. На этой странице запрашиваются имя пользователя и пароль.

  • Страница ChangePassword.aspx. На этой странице зарегистрированные пользователи могут изменить свой пароль.

  • Страница ChangePasswordSuccess.aspx. Эта страница отображается после успешного изменения пароля.

  • Файл Web.config.

По умолчанию страницы папки Account, за исключением страниц Register.aspx и Login.aspx, не доступны анонимным пользователям. Параметры, определяющие права доступа к страницам в папке Account, настраиваются в файле Web.config, находящемся в этой же папке. Параметры, определяющие права доступа к странице входа настраиваются в корневом файле конфигурации Web.config.

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

Добавление элемента меню для страницы с доступом только для членов

  1. В окне Обозреватель решений двойным щелчком мыши откройте страницу Site.master и перейдите в представление Конструктор.

  2. Выберите элемент управления Menu, содержащий пункты меню Домашняя страница и О программе, затем щелкните смарт-тег элемента управления меню.

  3. В диалоговом окне Задачи меню выберите пункт Правка элементов меню….

    Откроется Редактор элементов меню.

  4. На панели инструментов области Элементы нажмите кнопку Добавить корневой элемент.

    В дереве меню создается новый элемент.

  5. Выберите Новый элемент.

  6. В окне Свойства окна Редактор элементов меню задайте свойству Text значение "Только для членов".

  7. Выберите свойство NavigateUrl и нажмите кнопку с многоточием (...).

    Откроется диалоговое окно Выбор адреса URL.

  8. В области Папки проекта выберите папку Account.

  9. В области Содержимое папки выберите страницу MembersOnly.aspx и нажмите кнопку ОК.

  10. Нажмите кнопку ОК, чтобы закрыть диалоговое окно.

  11. Сохраните и закройте страницу Site.master.

  12. В окне Обозреватель решений щелкните правой кнопкой мыши страницу Default.aspx и выберите команду Задать в качестве начальной страницы.

Для просмотра страницы с доступом только для членов не имеющим учетной записи пользователям необходимо зарегистрироваться и выполнить вход. Анонимные пользователи имеют право доступа к домашней странице (Default.aspx) и странице "О программе"; содержимое главной страницы, предназначенное для пользователей, прошедших проверку подлинности, не будет доступно. Аналогично анонимным пользователям недоступно содержимое папки Account (за исключением страниц регистрации и входа). При попытке доступа к защищенному содержимому анонимные пользователи будут перенаправлены на страницу входа.

Создание новой учетной записи

  1. Нажмите сочетание клавиш CTRL+F5, чтобы запустить сайт.

  2. Выберите Только для членов.

    Откроется страница входа.

  3. Щелкните Регистрация.

    Отобразится страница Register.aspx (Создание новой учетной записи).

  4. Введите необходимые данные.

    Например, в поле имя пользователя можно ввести ScottBrown, в поле адрес электронной почты — scott@example.com. По умолчанию пароль должен содержать не менее шести символов. Не требуется, чтобы имя пользователя включало не только буквенно-цифровые знаки, а адрес электронной почты был уникальным.

  5. Нажмите кнопку Создать пользователя.

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

  6. Щелкните Выход.

    Вы будете перенаправлены на домашнюю страницу.

  7. Закройте браузер.

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

Создание на домашней странице ссылки на страницу смены пароля

  1. В окне Обозреватель решений двойным щелчком мыши откройте страницу Site.master и перейдите в представление Конструктор.

  2. Из узла Стандартные области Панель элементов перетащите элемент управления HyperLink на главную страницу и поместите его рядом с гиперссылкой Вход.

    В данной части руководства не имеет значения, куда будет помещен элемент управления HyperLink.

  3. В окнах Свойства измените значение свойства Text на "Смена пароля". Можно принять идентификатор по умолчанию.

  4. В окне Свойства выберите свойство NavigateUrl и нажмите кнопку с многоточием (...).

    Откроется диалоговое окно Выбор адреса URL.

  5. В области Папки проекта выберите папку Account.

  6. В области Содержимое папки выберите страницу ChangePassword.aspx и нажмите кнопку ОК.

  7. Нажмите клавиши CTRL+F5 для запуска страницы.

    Обратите внимание: ссылка Смена пароля доступна, даже если вход не выполнен.

  8. Щелкните ссылку Смена пароля.

    Вы будете перенаправлены на страницу входа, поскольку страница смены пароля доступна только пользователям, прошедшим проверку подлинности.

  9. Введите созданные ранее имя пользователя и пароль, и нажмите кнопку Вход.

    Откроется страница смены пароля.

  10. Щелкните Выход.

  11. Вернувшись на домашнюю страницу, закройте браузер.

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

Преобразование ссылки смены пароля в доступную только для вошедших в систему пользователей

  1. В окне Обозреватель решений двойным щелчком мыши откройте страницу Site.master.aspx и перейдите в представление Конструктор.

  2. Удалите созданную ранее гиперссылку Смена пароля.

  3. Перейдите в представление Исходный код.

  4. Из узла Стандартные области Панель элементов перетащите элемент управления HyperLink в элемент LoggedInTemplate, находящийся внутри элемента управления LoginView.

  5. Измените значение свойства Text на "Смена пароля".

  6. После атрибута runat="server" введите "NavigateUrl=" и дважды щелкните элемент всплывающего списка Выбрать URL-адрес....

    Откроется диалоговое окно Выбор элемента проекта.

  7. В области Папки проекта выберите папку Account.

  8. В области Папка содержимого выберите страницу ChangePassword.aspx и нажмите кнопку ОК.

    Разметка кода для гиперссылки будет аналогична приведенной ниже разметке.

    <asp:HyperLink ID="HyperLink1" runat="server" 
        NavigateUrl="~/Account/ChangePassword.aspx">
      Change Password
    </asp:HyperLink>
    

    Обратите внимание: гиперссылка не будет видима в представлении Конструктор, поскольку содержимое элемента LoggedInTemplate по умолчанию не отображается.

Далее рассматривается, как тестировать функциональность смены пароля для входа на веб-сайт.

Тестирование страницы смены пароля

  1. Нажмите сочетание клавиш CTRL+F5, чтобы запустить сайт.

    Откроется домашняя страница, однако ссылка Смена пароля отображаться не будет.

  2. Щелкните Вход и введите свои имя пользователя и пароль.

    Вы будете перенаправлены на домашнюю страницу. Обратите внимание: теперь ссылка Смена пароля отображается.

  3. Выберите Только для членов.

    Вы будете перенаправлены на страницу, доступную только членам.

  4. Щелкните ссылку Смена пароля.

    Откроется страница смены пароля.

  5. Введите новый пароль.

    Щелкните ссылку Смена пароля. После изменения пароля отобразится страница успешного завершения операции.

Тестирование нового пароля

Далее рассматривается, как войти в систему с новым паролем и открыть страницу, доступную только для членов.

Тестирование нового пароля

  1. Щелкните Выход. Вы будете перенаправлены на домашнюю страницу, которую могут просматривать анонимные пользователи.

  2. Щелкните Вход.

  3. Введите имя пользователя и пароль и щелкните Вход.

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

  4. Выберите Только для членов.

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

  5. Закройте браузер.

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

Показ: