Vytvoření aplikace webových formulářů ASP.NET s dvoufaktorovým ověřováním prostřednictvím SMS (C#)

Článek
06/16/2023

Stažení aplikace ASP.NET Web Forms s ověřováním Email a SMS Two-Factor

V tomto kurzu se dozvíte, jak vytvořit aplikaci ASP.NET Web Forms s ověřováním Two-Factor. Tento kurz byl navržen tak, aby doplňoval kurz s názvem Vytvoření zabezpečené aplikace ASP.NET Web Forms s registrací uživatelů, potvrzením e-mailu a resetováním hesla. Kromě toho byl tento kurz založený na kurzu MVC Ricka Andersona.

Úvod

Tento kurz vás provede kroky potřebnými k vytvoření ASP.NET Web Forms aplikace, která podporuje ověřování Two-Factor pomocí sady Visual Studio. Two-Factor Ověřování je dodatečným krokem ověření uživatele. Tento dodatečný krok při přihlašování vygeneruje jedinečné osobní identifikační číslo (PIN). PIN kód se uživateli obvykle odesílá jako e-mail nebo zpráva SMS. Uživatel vaší aplikace pak zadá PIN kód jako další ověřovací opatření při přihlašování.

Úlohy a informace v kurzu:

Vytvoření aplikace ASP.NET Web Forms
Nastavení ověřování sms a Two-Factor
Povolení ověřování Two-Factor pro registrovaného uživatele
Další zdroje informací

Vytvoření aplikace ASP.NET Web Forms

Začněte instalací a spuštěním Visual Studio Express 2013 pro web nebo Visual Studio 2013. Nainstalujte Visual Studio 2013 také aktualizaci Update 3 nebo novější. Budete také muset vytvořit účet Twilio , jak je vysvětleno níže.

Poznámka

Důležité: K dokončení tohoto kurzu musíte nainstalovat aktualizaci Visual Studio 2013 Update 3 nebo vyšší.

Vytvořte nový projekt (Soubor ->Nový projekt) a v dialogovém okně Nový projekt vyberte šablonu ASP.NET Webová aplikace spolu s rozhraním .NET Framework verze 4.5.2.
V dialogovém okně Nový projekt ASP.NET vyberte šablonu Web Forms. Ponechte výchozí ověřování jako Individuální uživatelské účty. Potom kliknutím na OK vytvořte nový projekt.
Povolte pro projekt protokol SSL (Secure Sockets Layer). Postupujte podle kroků dostupných v části Povolení SSL pro projektv sérii kurzů Začínáme s Web Forms.
V sadě Visual Studio otevřete konzolu Správce balíčků (Tools ->NuGet Package Manager ->Konzola Správce balíčků) a zadejte následující příkaz:
Install-Package Twilio

Nastavení ověřování sms a Two-Factor

V tomto kurzu se používá Twilio, ale můžete použít libovolného poskytovatele serveru SMS.

Vytvořte účet Twilio .
Na kartě Řídicí panel účtu Twilio zkopírujte SID účtu a ověřovací token. Přidáte je do aplikace později.
Na kartě Čísla zkopírujte také své telefonní číslo twilio.
Zpřístupněte aplikaci SID účtu Twilio, ověřovací token a telefonní číslo . Aby to zůstalo jednoduché, uložíte tyto hodnoty do souboruweb.config . Když nasadíte do Azure, můžete hodnoty bezpečně uložit v části appSettings na kartě konfigurace webu. Při přidávání telefonního čísla používejte jenom čísla.
Všimněte si, že můžete také přidat přihlašovací údaje SendGrid. SendGrid je služba e-mailových oznámení. Podrobnosti o povolení služby SendGrid najdete v části "Hook Up SendGrid" kurzu s názvem Vytvoření zabezpečené aplikace ASP.NET Web Forms s registrací uživatele, potvrzením e-mailu a resetováním hesla.
```
</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>
```
Upozornění

Zabezpečení – Nikdy neukládejte citlivá data ve zdrojovém kódu. V tomto příkladu jsou účet a přihlašovací údaje uložené v části appSettings souboruWeb.config . V Azure můžete tyto hodnoty bezpečně uložit na kartě Konfigurace v Azure Portal. Související informace najdete v tématu Ricka Andersona s názvem Osvědčené postupy pro nasazování hesel a dalších citlivých dat do ASP.NET a Azure.

SmsService Nakonfigurujte třídu v souboru App_Start\IdentityConfig.cs provedením následujících změn zvýrazněných žlutou barvou:

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);
    }
}

Na začátek souboru IdentityConfig.cs přidejte následující using příkazy:

using Twilio;
using System.Net;
using System.Configuration;
using System.Diagnostics;

Aktualizujte soubor Account/Manage.aspx odebráním žlutých řádků:

<%@ 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>

V obslužné rutině Page_Load kódu Manage.aspx.cs na pozadí zrušte komentář u řádku kódu zvýrazněného žlutě, aby se zobrazil takto:

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);
        }
    }
}

V kódu account/TwoFactorAuthenticationSignIn.aspx.cs aktualizujte obslužnou rutinu Page_Load přidáním následujícího kódu zvýrazněného žlutě:

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();
    }
}

Provedením výše uvedené změny kódu nebude rozevírací seznam "Providers" obsahující možnosti ověřování resetován na první hodnotu. To uživateli umožní úspěšně vybrat všechny možnosti, které se mají použít při ověřování, nejen první.

V Průzkumník řešení klikněte pravým tlačítkem na Default.aspx a vyberte Nastavit jako úvodní stránku.
Testováním aplikace nejprve sestavte aplikaci (Ctrl+Shift+B) a pak aplikaci spusťte (F5) a buď vyberte Zaregistrovat a vytvořte nový uživatelský účet, nebo vyberte Přihlásit se , pokud už je uživatelský účet zaregistrovaný.
Jakmile se (jako uživatel) přihlásíte, kliknutím na ID uživatele (e-mailovou adresu) na navigačním panelu zobrazíte stránku Spravovat účet (Manage.aspx).
Klikněte na Přidat vedle položky Telefonní číslo na stránce Spravovat účet .
Přidejte telefonní číslo, na které chcete (jako uživatel) přijímat SMS zprávy (textové zprávy), a klikněte na tlačítko Odeslat .

V tomto okamžiku aplikace použije přihlašovací údaje z Web.config ke kontaktování Twilia. Na telefon přidružený k uživatelskému účtu se odešle SMS zpráva (textová zpráva). Odeslání zprávy twilio můžete ověřit zobrazením řídicího panelu Twilio.
Za několik sekund dostane telefon přidružený k uživatelskému účtu textovou zprávu s ověřovacím kódem. Zadejte ověřovací kód a stiskněte Odeslat.

Povolení ověřování Two-Factor pro registrovaného uživatele

V tomto okamžiku jste pro svou aplikaci povolili dvojúrovňové ověřování. Aby mohl uživatel používat dvojúrovňové ověřování, může jednoduše změnit nastavení pomocí uživatelského rozhraní.

Jako uživatel aplikace můžete povolit dvojúrovňové ověřování pro váš konkrétní účet tak, že na navigačním panelu kliknete na ID uživatele (e-mailový alias) a zobrazí se stránka Spravovat účet . Potom klikněte na odkaz Povolit a povolte pro účet dvojúrovňové ověřování.
Odhlaste se a pak se znovu přihlaste. Pokud jste povolili e-mail, můžete pro dvojúrovňové ověřování vybrat SMS nebo e-mail. Pokud jste nepovolili e-mail, podívejte se na kurz Vytvoření zabezpečené ASP.NET Web Forms aplikace s registrací uživatelů Email Potvrzení a Resetování hesla.
Zobrazí se stránka ověřování Two-Factor, kde můžete zadat kód (z SMS nebo e-mailu).
Když kliknete na zaškrtávací políčko Zapamatovat tento prohlížeč , nebudete muset k přihlášení použít dvojúrovňové ověřování, pokud používáte prohlížeč a zařízení, kde jste políčko zaškrtnuli. Pokud uživatelé se zlými úmysly nebudou moct získat přístup k vašemu zařízení, povolením dvojúrovňového ověřování a kliknutím na Pamatovat si tento prohlížeč získáte pohodlný přístup pomocí hesla v jednom kroku a přitom si zachováte silnou ochranu dvojúrovňového ověřování pro veškerý přístup z nedůvěryhodných zařízení. Můžete to udělat na jakémkoli privátním zařízení, které pravidelně používáte.

Sdílet prostřednictvím