Een ASP.NET Web Forms-app maken met SMS-Two-Factor-verificatie (C#)

Artikel
01/06/2025

In deze zelfstudie leert u hoe u een ASP.NET Web Forms-app bouwt met Two-Factor-verificatie. Deze zelfstudie is ontworpen als aanvulling op de zelfstudie met de titel Een beveiligde ASP.NET Web Forms-app maken met gebruikersregistratie, e-mailbevestiging en wachtwoordherstel. Daarnaast is deze zelfstudie gebaseerd op de MVC-zelfstudie van Rick Anderson.

Introductie

In deze zelfstudie wordt u begeleid bij de stappen die nodig zijn voor het maken van een ASP.NET Web Forms-toepassing die ondersteuning biedt voor Two-Factor-verificatie met Visual Studio. Two-Factor verificatie is een extra verificatiestap voor gebruikers. Deze extra stap genereert een uniek persoonlijk identificatienummer (pincode) tijdens het aanmelden. De pincode wordt meestal als een e-mailbericht of sms-bericht naar de gebruiker verzonden. De gebruiker van uw app voert vervolgens de pincode in als extra verificatiemeting bij het aanmelden.

Instructietaken en informatie:

Een ASP.NET Web Forms-app maken
SMS- en Two-Factor-verificatie instellen
Two-Factor-verificatie inschakelen voor geregistreerde gebruikers
Aanvullende bronnen

Een ASP.NET Web Forms-app maken

Begin met het installeren en uitvoeren van Visual Studio Express 2013 for Web of Visual Studio 2013. Installeer ook Visual Studio 2013 Update 3 of hoger. U moet ook een Twilio--account maken, zoals hieronder wordt uitgelegd.

Notitie

Belangrijk: U moet Visual Studio 2013 Update 3 of hoger installeren om deze zelfstudie te voltooien.

Maak een nieuw project (File ->New Project) en selecteer de sjabloon ASP.NET Web Application samen met de .NET Framework-versie 4.5.2 in het dialoogvenster Nieuw project.
Selecteer in het dialoogvenster Nieuw ASP.NET Project de sjabloon Web Forms. Laat de standaardauthenticatie op afzonderlijke gebruikersaccountsstaan. Klik vervolgens op OK om het nieuwe project te maken.
Schakel Secure Sockets Layer (SSL) in voor het project. Volg de stappen die beschikbaar zijn in de SSL inschakelen voor de sectie Project van de zelfstudiehandleiding Aan de slag met webformulieren.
Open in Visual Studio de Package Manager Console (Tools ->NuGet Package Manger ->Package Manager Console) en voer de volgende opdracht in:
Install-Package Twilio

SMS- en Two-Factor-verificatie instellen

In deze zelfstudie wordt gebruikgemaakt van Twilio, maar u kunt elke SMS-provider gebruiken.

Maak een Twilio--account.
Kopieer op het tabblad dashboard van uw Twilio-account de SID van het -account en verificatietoken. U voegt deze later toe aan uw app.
Kopieer op het tabblad Nummers ook uw Twilio-telefoonnummer.
Maak de Twilio-account-SID, verificatietoken en telefoonnummer beschikbaar voor de app. Als u het eenvoudig wilt houden, slaat u deze waarden op in het web.config-bestand. Wanneer u in Azure implementeert, kunt u de waarden veilig opslaan in de sectie appSettings op het tabblad Configureren van de website. Als u het telefoonnummer toevoegt, gebruikt u alleen nummers.
U kunt ook SendGrid-referenties toevoegen. SendGrid is een e-mailmeldingsservice. Zie de sectie 'SendGrid aansluiten' in de zelfstudie getiteld 'Een beveiligde ASP.NET Web Forms-app maken met gebruikersregistratie, e-mailbevestiging en wachtwoordherstel' voor meer informatie over het inschakelen van SendGrid.
```
</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>
```
Waarschuwing

Beveiliging: sla nooit gevoelige gegevens op in uw broncode. In dit voorbeeld worden het account en de referenties opgeslagen in de sectie appSettings van het Web.config-bestand. In Azure kunt u deze waarden veilig opslaan op het tabblad Configureren in Azure Portal. Zie het onderwerp van Rick Anderson met de titel Aanbevolen procedures voor het implementeren van wachtwoorden en andere gevoelige gegevens in ASP.NET en Azurevoor verwante informatie.

Configureer de SmsService-klasse in het bestand App_Start\IdentityConfig.cs door de volgende wijzigingen geel aan te brengen:

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

Voeg de volgende using verklaringen toe aan het begin van het IdentityConfig.cs-bestand.

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

Werk het bestand Account/Manage.aspx bij door de lijnen te verwijderen die geel zijn gemarkeerd:

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

Verwijder in de Page_Load handler van de Manage.aspx.cs code-behind de commentaarregel die geel is gemarkeerd, zodat deze als volgt wordt weergegeven:

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

Werk in de code-behind van Account/TwoFactorAuthenticationSignIn.aspx.csde Page_Load handler bij door de volgende code toe te voegen die in geel is gemarkeerd:

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

Door de bovenstaande codewijziging aan te brengen, wordt de vervolgkeuzelijst Providers met de verificatieopties niet opnieuw ingesteld op de eerste waarde. Hierdoor kan de gebruiker alle opties selecteren die moeten worden gebruikt bij het verifiëren, niet alleen de eerste.

Klik in Solution Explorermet de rechtermuisknop op Default.aspx en selecteer Instellen als startpagina.
Door uw app te testen, maakt u eerst de app (Ctrl+Shift+B) en voert u de app (F5-) uit en selecteert u Registreren om een nieuw gebruikersaccount te maken of selecteert u Aanmelden als het gebruikersaccount al is geregistreerd.
Zodra u (als gebruiker) bent aangemeld, klikt u op de gebruikers-id (e-mailadres) in de navigatiebalk om de pagina Account beheren weer te geven (Manage.aspx).
Klik op toevoegen naast telefoonnummer op de pagina Account beheren.
Voeg het telefoonnummer toe waar u (als gebruiker) sms-berichten (sms-berichten) wilt ontvangen en klik op de knop Verzenden.

Op dit moment gebruikt de app de referenties van de Web.config om contact op te maken met Twilio. Er wordt een sms-bericht (sms-bericht) verzonden naar de telefoon die is gekoppeld aan het gebruikersaccount. U kunt controleren of het Twilio-bericht is verzonden door het Twilio-dashboard te bekijken.
Over een paar seconden krijgt de telefoon die is gekoppeld aan het gebruikersaccount een sms-bericht met de verificatiecode. Voer de verificatiecode in en druk op Verzenden.

Two-Factor-verificatie inschakelen voor een geregistreerde gebruiker

Op dit moment hebt u tweeledige verificatie ingeschakeld voor uw app. Gebruikers kunnen hun instellingen eenvoudig wijzigen met behulp van de gebruikersinterface om tweeledige verificatie te gebruiken.

Als gebruiker van uw app kunt u tweeledige verificatie inschakelen voor uw specifieke account door op de gebruikers-id (e-mailalias) in de navigatiebalk te klikken om de pagina Account beheren weer te geven. Klik vervolgens op de koppeling inschakelen om tweeledige verificatie in te schakelen voor het account.
Meld u af en meld u vervolgens weer aan. Als u e-mail hebt ingeschakeld, kunt u sms of e-mail selecteren voor tweeledige verificatie. Als u geen e-mail hebt ingeschakeld, raadpleegt u de tutorial met de titel Create a Secure ASP.NET Web Forms App with User Registration, Email Confirmation and Password Reset.
De pagina Two-Factor Verificatie wordt weergegeven waar u de code kunt invoeren (via sms of e-mail).
Door te klikken op het selectievakje Deze browser onthouden hoeft u geen twee-factor-authenticatie meer te gebruiken om in te loggen wanneer u de browser en het apparaat gebruikt waarop u het vakje hebt ingeschakeld. Zolang kwaadwillende gebruikers geen toegang tot uw apparaat kunnen krijgen, kunt u tweestapsverificatie inschakelen en op de Deze browser onthouden klikken, wat u handige eenstapswachtwoordtoegang geeft. Tegelijkertijd behoudt u sterke tweestapsverificatiebescherming voor alle toegang vanaf niet-vertrouwde apparaten. U kunt dit doen op elk privéapparaat dat u regelmatig gebruikt.

Delen via

Een ASP.NET Web Forms-app maken met SMS-Two-Factor-verificatie (C#)

Introductie

Instructietaken en informatie:

Een ASP.NET Web Forms-app maken

SMS- en Two-Factor-verificatie instellen

Two-Factor-verificatie inschakelen voor een geregistreerde gebruiker

Aanvullende informatiebronnen

Feedback

Aanvullende resources