Skapa en ASP.NET Web Forms-app med SMS Two-Factor-autentisering (C#)

Artikel
01/06/2025

Den här självstudien visar hur du skapar en ASP.NET Web Forms-app med Two-Factor-autentisering. Den här självstudien har utformats för att komplettera självstudien Skapa en säker ASP.NET Web Forms-app med användarregistrering, e-postbekräftelse och lösenordsåterställning. Dessutom baserades den här självstudien på Rick Andersons MVC-självstudie.

Introduktion

Den här självstudien vägleder dig genom de steg som krävs för att skapa ett ASP.NET Web Forms-program som stöder Two-Factor-autentisering med Visual Studio. Two-Factor autentisering är ett extra användarautentiseringssteg. Det här extra steget genererar ett unikt personligt identifieringsnummer (PIN) under inloggningen. PIN-koden skickas ofta till användaren som ett e-postmeddelande eller SMS. Användaren av din app anger sedan PIN-koden som ett extra autentiseringsmått vid inloggning.

Handledningsuppgifter och information:

Skapa en ASP.NET Web Forms-app
konfigurera SMS och Two-Factor-autentisering
Aktivera Two-Factor-autentisering för registrerad användare
ytterligare resurser

Skapa en ASP.NET webbformulärapp

Börja med att installera och köra Visual Studio Express 2013 för Web eller Visual Studio 2013. Installera även Visual Studio 2013 Update 3 eller senare. Du måste också skapa ett Twilio- konto enligt beskrivningen nedan.

Notera

Viktigt: Du måste installera Visual Studio 2013 Update 3 eller senare för att slutföra den här självstudien.

Skapa ett nytt projekt (File –>New Project) och välj mallen ASP.NET Web Application tillsammans med .NET Framework version 4.5.2 från dialogrutan New Project.
I dialogrutan New ASP.NET Project väljer du mallen Web Forms. Låt standardautentiseringen vara enskilda användarkonton. Klicka sedan på OK för att skapa det nya projektet.
Aktivera Secure Sockets Layer (SSL) för projektet. Följ stegen som är tillgängliga i avsnittet Aktivera SSL för projektet i självstudieserien Komma igång med webbformulär.
I Visual Studio öppnar du Package Manager Console (Tools –>NuGet Package Manger –>Package Manager Console) och anger följande kommando:
Install-Package Twilio

Konfigurera SMS- och Two-Factor-autentisering

I den här självstudien används Twilio, men du kan använda valfri SMS-provider.

Skapa ett Twilio-konto.
På fliken Instrumentpanel i ditt Twilio-konto kopierar du KONTO-SID- och autentiseringstoken. Du lägger till dem i appen senare.
På fliken Nummer kopierar du även ditt Twilio-telefonnummer.
Gör Twilio Account SID, Auth Token och telefonnummer tillgängligt för appen. För att hålla det enkelt lagrar du dessa värden i filen web.config. När du distribuerar till Azure kan du lagra värdena på ett säkert sätt i avsnittet appInställningar på fliken Konfigurera webbplats. När du lägger till telefonnumret använder du bara nummer.
Observera att du också kan lägga till SendGrid-autentiseringsuppgifter. SendGrid är en e-postaviseringstjänst. Mer information om hur du aktiverar SendGrid finns i avsnittet "Hook Up SendGrid" i självstudien Create a Secure ASP.NET Web Forms App with user registration, email confirmation and password reset (Koppla upp SendGrid) i självstudien Create a Secure ASP.NET Web Forms App with user registration, email confirmation and password reset ( Skapa en säker ASP.NET Web Forms-app med användarregistrering, bekräftelse av e-post och återställning av lösenord).
```
</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>
```
Varning

Säkerhet – Lagra aldrig känsliga data i källkoden. I det här exemplet lagras kontot och autentiseringsuppgifterna i avsnittet appInställningar i Web.config-filen. I Azure kan du lagra dessa värden på ett säkert sätt på fliken Konfigurera i Azure-portalen. Relaterad information finns i Rick Andersons avsnitt med titeln Best practices for deploying passwords and other sensitive data to ASP.NET and Azure( Bästa praxis för att distribuera lösenord och andra känsliga data till ASP.NET och Azure.

Konfigurera klassen SmsService i filen App_Start\IdentityConfig.cs genom att göra följande ändringar markerade i gult:

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

Lägg till följande using-instruktioner i början av IdentityConfig.cs-filen:

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

Uppdatera filen konto/Manage.aspx genom att ta bort raderna markerade i gult:

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

I Page_Load-hanteraren för Manage.aspx.cs kod-bakom, avkommentera raden markerad i gult så att den visas på följande sätt:

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

Uppdatera Page_Load-hanteraren genom att lägga till följande kod markerad i gult i koden för -kontot/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();
    }
}

Genom att göra kodändringen ovan återställs inte listrutan "Providers" som innehåller autentiseringsalternativen till det första värdet. Detta gör att användaren kan välja alla alternativ som ska användas vid autentisering, inte bara den första.

I Solution Explorerhögerklickar du på Default.aspx och väljer Ange som startsida.
Genom att testa appen skapar du först appen (Ctrl+Skift+B) och kör sedan appen (F5) och väljer antingen Registrera för att skapa ett nytt användarkonto eller välj Logga in om användarkontot redan har registrerats.
När du (som användare) har loggat in klickar du på användar-ID (e-postadress) i navigeringsfältet för att visa sidan Hantera konto (Manage.aspx).
Klicka på Lägg till bredvid telefonnummer på sidan Hantera konto.
Lägg till det telefonnummer där du (som användare) vill ta emot SMS (textmeddelanden) och klicka på knappen Skicka.

Nu använder appen autentiseringsuppgifterna från Web.config för att kontakta Twilio. Ett SMS (sms) skickas till den telefon som är associerad med användarkontot. Du kan kontrollera att Twilio-meddelandet skickades genom att visa Twilio-instrumentpanelen.
Om några sekunder får telefonen som är associerad med användarkontot ett sms som innehåller verifieringskoden. Ange verifieringskoden och tryck på Skicka.

Aktivera Two-Factor-autentisering för en registrerad användare

Nu har du aktiverat tvåfaktorautentisering för din app. För att en användare ska kunna använda tvåfaktorautentisering kan de helt enkelt ändra sina inställningar med hjälp av användargränssnittet.

Som användare av din app kan du aktivera tvåfaktorautentisering för ditt specifika konto genom att klicka på användar-ID :t (e-postalias) i navigeringsfältet för att visa sidan Hantera konto. Klicka sedan på länken Aktivera för att aktivera tvåfaktorautentisering för kontot.
Logga ut och logga sedan in igen. Om du har aktiverat e-post kan du välja antingen SMS eller e-post för tvåfaktorautentisering. Om du inte har aktiverat e-post kan du läsa självstudien Skapa en säker ASP.NET webbformulärapp med användarregistrering, e-postbekräftelse och återställning av lösenord.
Sidan Two-Factor-autentisering visas där du kan ange koden (från SMS eller e-post).
Om du klickar på kryssrutan Kom ihåg den här webbläsaren undantas du från att behöva använda tvåfaktorautentisering för att logga in när du använder webbläsaren och enheten där du har markerat kryssrutan. Så länge illasinnade användare inte kan få åtkomst till din enhet, aktivera tvåfaktorautentisering och klicka på Kom ihåg den här webbläsaren ger dig bekvämt lösenordsåtkomst i ett steg, samtidigt som du behåller ett starkt tvåfaktorsautentiseringsskydd för all åtkomst från icke-betrodda enheter. Du kan göra detta på alla privata enheter som du använder regelbundet.

Dela via