Создание приложения веб-форм ASP.NET с двухфакторной проверкой подлинности по SMS (C#)

Статья
06/16/2023

Скачивание приложения ASP.NET Web Forms с проверкой подлинности Email и Two-Factor SMS

В этом руководстве показано, как создать приложение ASP.NET Web Forms с проверкой подлинности Two-Factor. Это руководство было разработано в дополнение к учебнику Создание безопасного приложения ASP.NET Web Forms с регистрацией пользователей, подтверждением электронной почты и сбросом пароля. Кроме того, это руководство было основано на учебнике По MVC Рика Андерсона.

Введение

В этом руководстве описаны шаги, необходимые для создания приложения ASP.NET Web Forms, которое поддерживает проверку подлинности Two-Factor с помощью Visual Studio. Two-Factor Проверка подлинности — это дополнительный шаг проверки подлинности пользователя. Этот дополнительный шаг создает уникальный личный идентификационный номер (ПИН-код) во время входа. ПИН-код обычно отправляется пользователю в виде сообщения электронной почты или SMS-сообщения. Затем пользователь приложения вводит ПИН-код в качестве дополнительной меры проверки подлинности при входе в систему.

Учебные задачи и сведения:

Создание приложения ASP.NET Web Forms
Настройка проверки подлинности с помощью SMS и Two-Factor
Включение проверки подлинности Two-Factor для зарегистрированного пользователя
Дополнительные ресурсы

Создание приложения ASP.NET Web Forms

Начните с установки и запуска Visual Studio Express 2013 для Web или Visual Studio 2013. Также установите Visual Studio 2013 с обновлением 3 или более поздней версии. Кроме того, необходимо создать учетную запись Twilio , как описано ниже.

Примечание

Важно! Для работы с этим руководством необходимо установить Visual Studio 2013 обновление 3 или более поздней версии.

Создайте проект (Файл ->Новый проект) и выберите шаблон веб-приложения ASP.NET вместе с платформа .NET Framework версии 4.5.2 в диалоговом окне Новый проект.
В диалоговом окне Новый проект ASP.NET выберите шаблон веб-формы. Оставьте для проверки подлинности по умолчанию значение Индивидуальные учетные записи пользователей. Затем нажмите кнопку ОК , чтобы создать проект.
Включите протокол SSL для проекта. Выполните действия, описанные в разделе Включение SSL для Projectсерии начало работы с веб-формы.
В Visual Studio откройте консоль диспетчера пакетов (Инструменты ->Диспетчер пакетов NuGet ->Консоль диспетчера пакетов) и введите следующую команду:
Install-Package Twilio

Настройка проверки подлинности с помощью SMS и Two-Factor

В этом руководстве используется Twilio, но вы можете использовать любой поставщик SMS.

Создайте учетную запись Twilio .
На вкладке Панель мониторинга учетной записи Twilio скопируйте идентификатор безопасности учетной записи и маркер проверки подлинности. Вы добавите их в приложение позже.
На вкладке Числа также скопируйте свой номер телефона Twilio.
Сделайте приложение доступными для идентификатора безопасности учетной записи Twilio, маркера проверки подлинности и номера телефона . Чтобы все было проще, сохраните эти значения в файлеweb.config . При развертывании в Azure значения можно безопасно хранить в разделе appSettings на вкладке настройки веб-сайта. Кроме того, при добавлении номера телефона используйте только номера.
Обратите внимание, что вы также можете добавить учетные данные SendGrid. SendGrid — это служба уведомлений по электронной почте. Дополнительные сведения о том, как включить SendGrid, см. в разделе "Подключение SendGrid" руководства Под названием Создание защищенного приложения ASP.NET Web Forms с регистрацией пользователя, подтверждением электронной почты и сбросом пароля.
```
</connectionStrings>
  <appSettings>
        
    <add key="emailServiceUserName" value="[EmailServiceAccountUserName]" />
    <add key="emailServicePassword" value="[EmailServiceAccountPassword]" />
    
    <add key="SMSSID" value="[SMSServiceAccountSID]" />
    <add key="SMSAuthToken" value="[SMSServiceAuthorizationToken]" />
    <add key="SMSPhoneNumber" value="+[SMSPhoneNumber]" />    
  </appSettings>
  <system.web>
```
Предупреждение

Безопасность— никогда не сохраняйте конфиденциальные данные в исходном коде. В этом примере учетная запись и учетные данные хранятся в разделе appSettings файлаWeb.config . В Azure эти значения можно безопасно хранить на вкладке Настройка в портал Azure. Дополнительные сведения см. в статье Рика Андерсона "Рекомендации по развертыванию паролей и других конфиденциальных данных в ASP.NET и Azure".

SmsService Настройте класс в файле App_Start\IdentityConfig.cs, сделав следующие изменения, выделенные желтым цветом:

public class SmsService : IIdentityMessageService
{
    public Task SendAsync(IdentityMessage message)
    {
        var Twilio = new TwilioRestClient(
           ConfigurationManager.AppSettings["SMSSID"],
           ConfigurationManager.AppSettings["SMSAuthToken"]
        );
        var result = Twilio.SendMessage(
            ConfigurationManager.AppSettings["SMSPhoneNumber"],
           message.Destination, message.Body);

        // Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
        Trace.TraceInformation(result.Status);

        // Twilio doesn't currently have an async API, so return success.
        return Task.FromResult(0);
    }
}

Добавьте следующие using инструкции в начало файла IdentityConfig.cs :
```
using Twilio;
using System.Net;
using System.Configuration;
using System.Diagnostics;
```

Обновите файл Account/Manage.aspx , удалив строки, выделенные желтым цветом:

<%@ Page Title="Manage Account" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Manage.aspx.cs" Inherits="WebFormsTwoFactor.Account.Manage" %>

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>

    <div>
        <asp:PlaceHolder runat="server" ID="successMessage" Visible="false" ViewStateMode="Disabled">
            <p class="text-success"><%: SuccessMessage %></p>
        </asp:PlaceHolder>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-horizontal">
                <h4>Change your account settings</h4>
                <hr />
                <dl class="dl-horizontal">
                    <dt>Password:</dt>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Change]" Visible="false" ID="ChangePassword" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Create]" Visible="false" ID="CreatePassword" runat="server" />
                    </dd>
                    <dt>External Logins:</dt>
                    <dd><%: LoginsCount %>
                        <asp:HyperLink NavigateUrl="/Account/ManageLogins" Text="[Manage]" runat="server" />

                    </dd>
                    <%--
                        Phone Numbers can used as a second factor of verification in a two-factor authentication system.
                        See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                        for details on setting up this ASP.NET application to support two-factor authentication using SMS.
                        Uncomment the following block after you have set up two-factor authentication
                    --%>

                    <dt>Phone Number:</dt>
                    <%--
                    <% if (HasPhoneNumber)
                       { %>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Add]" />
                    </dd>
                    <% }
                       else
                       { %>
                    <dd>
                        <asp:Label Text="" ID="PhoneNumber" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Change]" /> &nbsp;|&nbsp;
                        <asp:LinkButton Text="[Remove]" OnClick="RemovePhone_Click" runat="server" />
                    </dd>
                    <% } %>
                    --%>

                    <dt>Two-Factor Authentication:</dt>
                    <dd>
                        <p>
                            There are no two-factor authentication providers configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                            for details on setting up this ASP.NET application to support two-factor authentication.
                        </p>
                        <% if (TwoFactorEnabled)
                          { %> 
                        <%--
                        Enabled
                        <asp:LinkButton Text="[Disable]" runat="server" CommandArgument="false" OnClick="TwoFactorDisable_Click" />
                        --%>
                        <% }
                          else
                          { %> 
                        <%--
                        Disabled
                        <asp:LinkButton Text="[Enable]" CommandArgument="true" OnClick="TwoFactorEnable_Click" runat="server" />
                        --%>
                        <% } %>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</asp:Content>

В обработчике Page_Load кода программной части Manage.aspx.cs раскомментируйте строку кода, выделенную желтым цветом, чтобы она выглядела следующим образом:

protected void Page_Load()
{
    var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();

    HasPhoneNumber = String.IsNullOrEmpty(manager.GetPhoneNumber(User.Identity.GetUserId()));

    // Enable this after setting up two-factor authentientication
    PhoneNumber.Text = manager.GetPhoneNumber(User.Identity.GetUserId()) ?? String.Empty;

    TwoFactorEnabled = manager.GetTwoFactorEnabled(User.Identity.GetUserId());

    LoginsCount = manager.GetLogins(User.Identity.GetUserId()).Count;

    var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;

    if (!IsPostBack)
    {
        // Determine the sections to render
        if (HasPassword(manager))
        {
            ChangePassword.Visible = true;
        }
        else
        {
            CreatePassword.Visible = true;
            ChangePassword.Visible = false;
        }

        // Render success message
        var message = Request.QueryString["m"];
        if (message != null)
        {
            // Strip the query string from action
            Form.Action = ResolveUrl("~/Account/Manage");

            SuccessMessage =
                message == "ChangePwdSuccess" ? "Your password has been changed."
                : message == "SetPwdSuccess" ? "Your password has been set."
                : message == "RemoveLoginSuccess" ? "The account was removed."
                : message == "AddPhoneNumberSuccess" ? "Phone number has been added"
                : message == "RemovePhoneNumberSuccess" ? "Phone number was removed"
                : String.Empty;
            successMessage.Visible = !String.IsNullOrEmpty(SuccessMessage);
        }
    }
}

В коде программной части account/TwoFactorAuthenticationSignIn.aspx.cs обновите Page_Load обработчик, добавив следующий код, выделенный желтым цветом:
```
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var userId = signinManager.GetVerifiedUserId<ApplicationUser, string>();
        if (userId == null)
        {
            Response.Redirect("/Account/Error", true);
        }
        var userFactors = manager.GetValidTwoFactorProviders(userId);
        Providers.DataSource = userFactors.Select(x => x).ToList();
        Providers.DataBind();
    }
}
```
При внесении изменений в приведенный выше код раскрывающийся список "Поставщики", содержащий параметры проверки подлинности, не будет сброшен до первого значения. Это позволит пользователю успешно выбрать все параметры, используемые при проверке подлинности, а не только первый.
В Обозреватель решений щелкните правой кнопкой мыши Default.aspx и выберите Пункт Начальная страница.
Проверив приложение, сначала выполните сборку приложения (CTRL+SHIFT+B), а затем запустите приложение (F5) и выберите Зарегистрировать , чтобы создать новую учетную запись пользователя, или выберите Войти, если учетная запись пользователя уже зарегистрирована.
После входа в систему щелкните идентификатор пользователя (адрес электронной почты) на панели навигации, чтобы открыть страницу Управление учетной записью (Manage.aspx).
Нажмите кнопку Добавить рядом с полем Номер телефона на странице Управление учетной записью .
Добавьте номер телефона, на который вы как пользователь хотите получать SMS-сообщения (текстовые сообщения), и нажмите кнопку Отправить .

На этом этапе приложение будет использовать учетные данные изWeb.config для связи с Twilio. Sms-сообщение (текстовое сообщение) будет отправлено на телефон, связанный с учетной записью пользователя. Чтобы убедиться, что сообщение Twilio отправлено, просмотрите панель мониторинга Twilio.
Через несколько секунд телефон, связанный с учетной записью пользователя, получит текстовое сообщение, содержащее код проверки. Введите код проверки и нажмите кнопку Отправить.

Включение проверки подлинности Two-Factor для зарегистрированного пользователя

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

Как пользователь приложения вы можете включить двухфакторную проверку подлинности для конкретной учетной записи, щелкнув идентификатор пользователя (псевдоним электронной почты) на панели навигации, чтобы открыть страницу Управление учетной записью . Затем щелкните ссылку Включить , чтобы включить двухфакторную проверку подлинности для учетной записи.
Выйдите из системы, а затем снова войдите в систему. Если вы включили электронную почту, можно выбрать sms или электронную почту для двухфакторной проверки подлинности. Если вы не включили электронную почту, ознакомьтесь с руководством Создание безопасного приложения ASP.NET Web Forms с регистрацией пользователей, подтверждением Email и сбросом пароля.
Отобразится страница Two-Factor Проверка подлинности, где можно ввести код (из SMS или электронной почты).
Если щелкнуть поле Запомнить этот браузер проверка, вам не потребуется использовать двухфакторную проверку подлинности для входа в систему при использовании браузера и устройства, на котором вы установите флажок. Если пользователи-злоумышленники не смогут получить доступ к вашему устройству, включение двухфакторной проверки подлинности и нажатие кнопки Запомнить этот браузер обеспечит вам удобный одношаговый доступ по паролю, сохраняя при этом надежную двухфакторную проверку подлинности для всего доступа с недоверенных устройств. Это можно сделать на любом частном устройстве, которое вы регулярно используете.

Поделиться через