Создание веб-приложения на Web Forms ASP.NET с аутентификацией через SMS Two-Factor (C#)

Статья
01/06/2025

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

Знакомство

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

Задачи и сведения руководства:

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

Создание приложения веб-форм ASP.NET

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

Заметка

Важно: Чтобы завершить работу с этим руководством, необходимо установить Visual Studio 2013 Update 3 или более поздней версии.

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

Настройка SMS и Two-Factor аутентификации

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

Создайте учетную запись Twilio.
На вкладке панели мониторинга учетной записи Twilio скопируйте идентификатор безопасности учетной записи и маркер проверки подлинности . вы добавите их в приложение позже.
На вкладке Номера скопируйте номер телефона Twilio .
Сделайтеидентификатора безопасности учетной записи Twi lio, маркер проверки подлинности и номер телефона для приложения. Чтобы упростить задачу, вы будете хранить эти значения в файле 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);
        }
    }
}

В коде, относящемся к аккаунтуTwoFactorAuthenticationSignIn.aspx.cs, обновите обработчик , добавив следующий код, выделенный желтым цветом:
```
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 веб-форм с помощью регистрации пользователей, подтверждения электронной почты и сброса пароля.
Страница проверки подлинности Two-Factor отображается, где можно ввести код (из SMS или электронной почты).
Установив флажок Помните этот браузер, вы избавитесь от необходимости использовать двухфакторную аутентификацию при входе в систему с браузера и устройства, где установлен этот флажок. Если вредоносные пользователи не могут получить доступ к устройству, включите двухфакторную проверку подлинности и щелкните Помните, что этот браузер обеспечит удобный доступ к паролям одного шага, сохраняя надежную двухфакторную защиту проверки подлинности для всех доступа с ненадежных устройств. Это можно сделать на любом частном устройстве, которое вы регулярно используете.

Дополнительные ресурсы

Двухфакторная аутентификация с использованием SMS и электронной почты в ASP.NET Identity
ссылки на рекомендуемые ресурсы ASP.NET Identity
развертывание безопасного приложения веб-форм ASP.NET с членством, OAuth и базой данных SQL на веб-сайте Azure
серия руководств по веб-формам ASP.NET. Добавление поставщика OAuth 2.0
Руководство по серии веб-форм ASP.NET . Включение SSL для проекта.
Подтверждение учетной записи и восстановление паролей с ASP.NET удостоверением
Создание приложения в Facebook и подключение приложения к проекту

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

Создание веб-приложения на Web Forms ASP.NET с аутентификацией через SMS Two-Factor (C#)

Знакомство

Задачи и сведения руководства:

Создание приложения веб-форм ASP.NET

Настройка SMS и Two-Factor аутентификации

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

Дополнительные ресурсы

Обратная связь

Дополнительные ресурсы