Erstellen einer ASP.NET Web Forms-App mit SMS-Two-Factor-Authentifizierung (C#)

Artikel
01/09/2025

Dieses Tutorial zeigt Ihnen, wie Sie eine ASP.NET Web Forms-App mit Two-Factor-Authentifizierung erstellen. Dieses Tutorial wurde erstellt, um das Tutorial Erstellen einer sicheren ASP.NET Web Forms-App mit Benutzerregistrierung, E-Mail-Bestätigung und Zurücksetzen des Kennworts zu ergänzen. Darüber hinaus basiert dieses Tutorial auf dem MVC-Tutorial von Rick Anderson.

Einleitung

Dieses Tutorial führt Sie durch die erforderlichen Schritte zum Erstellen einer ASP.NET Web Forms-Anwendung, die die Authentifizierung durch Two-Factor mit Visual Studio unterstützt. Die Zwei-Faktor-Authentifizierung ist ein zusätzlicher Schritt zur Authentifizierung des Benutzers. Dieser zusätzliche Schritt generiert während der Anmeldung eine eindeutige persönliche Identifikationsnummer (PIN). Die PIN wird häufig als E-Mail- oder SMS-Nachricht an den Benutzer gesendet. Der Benutzer Ihrer App gibt dann bei der Anmeldung die PIN als zusätzliche Authentifizierungsmaßnahme ein.

Aufgaben und Informationen des Tutorials:

Erstellen einer ASP.NET Web Forms-App
Einrichtung von SMS und Zwei-Faktor-Authentifizierung
Zwei-Faktor-Authentifizierung für registrierte Benutzer aktivieren
Zusätzliche Ressourcen

Erstellen einer ASP.NET Web Forms App

Beginnen Sie mit der Installation und führen Sie Visual Studio Express 2013 für Web oder Visual Studio 2013 aus. Installieren Sie auch Visual Studio 2013 Update 3 oder höher. Außerdem müssen Sie ein Twilio Konto erstellen, wie unten erläutert.

Anmerkung

Wichtig: Sie müssen Visual Studio 2013 Update 3 oder höher installieren, um dieses Lernprogramm abzuschließen.

Erstellen Sie ein neues Projekt (File ->New Project), und wählen Sie im Dialogfeld Neues Projekt die Vorlage ASP.NET-Webanwendung sowie die .NET-Framework Version 4.5.2 aus.
Wählen Sie im Dialogfeld Neues ASP.NET-Projekt die Vorlage Web Forms aus. Belassen Sie die Standardauthentifizierung bei Individuelle Benutzerkonten. Klicken Sie dann auf OK, um das neue Projekt zu erstellen.
Aktivieren Sie Secure Sockets Layer (SSL) für das Projekt. Befolgen Sie die Schritte im Abschnitt SSL für das Projekt aktivieren in der Tutorial-Serie Einführung in Web Forms.
Öffnen Sie in Visual Studio die Package Manager Console (Tools ->NuGet Package Manger ->Package Manager Console), und geben Sie den folgenden Befehl ein:
Install-Package Twilio

Einrichtung von SMS und Zwei-Faktor-Authentifizierung

In diesem Lernprogramm wird Twilio verwendet, Aber Sie können jeden SMS-Anbieter verwenden.

Erstellen Sie ein Twilio Konto.
Kopieren Sie auf der Registerkarte Dashboard Ihres Twilio-Kontos die Konto-SID und den Authentifizierungs-Token. Sie werden diese später zu Ihrer App hinzufügen.
Kopieren Sie auf der Registerkarte Nummern auch Ihre Twilio-Telefonnummer.
Machen Sie die Twilio-Konto-SID, Auth-Token und Telefonnummer für die App verfügbar. Um die Dinge einfach zu halten, speichern Sie diese Werte in der web.config Datei. Wenn Sie eine Bereitstellung in Azure ausführen, können Sie die Werte sicher im Abschnitt "appSettings" auf dem Tab "Website-Konfiguration" speichern. Verwenden Sie beim Hinzufügen der Telefonnummer nur Ziffern.
Beachten Sie, dass Sie auch SendGrid-Anmeldeinformationen hinzufügen können. SendGrid ist ein E-Mail-Benachrichtigungsdienst. Ausführliche Informationen darüber, wie man SendGrid einbindet, finden Sie im Abschnitt "SendGrid einrichten" des Lernprogramms mit dem Titel Erstellen einer sicheren ASP.NET Web Forms App mit Benutzerregistrierung, E-Mail-Bestätigung und Kennwortzurücksetzung.
```
</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>
```
Warnung

Sicherheit – Speichern Sie niemals vertrauliche Daten in Ihrem Quellcode. In diesem Beispiel werden das Konto und die Anmeldeinformationen im abschnitt appSettings der datei Web.config gespeichert. Auf Azure können Sie diese Werte sicher auf der Registerkarte Konfigurieren im Azure-Portal speichern. Verwandte Informationen finden Sie im Thema von Rick Anderson mit dem Titel Bewährte Methoden für die Bereitstellung von Kennwörtern und anderen vertraulichen Daten in ASP.NET und Azure.

Konfigurieren Sie die SmsService Klasse in der Datei App_Start\IdentityConfig.cs, indem Sie die folgenden in Gelb hervorgehobenen Änderungen vornehmen:

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

Fügen Sie die folgenden using-Anweisungen am Anfang der IdentityConfig.cs-Datei hinzu:

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

Aktualisieren Sie die Datei Konto/Manage.aspx, indem Sie die in Gelb hervorgehobenen Zeilen entfernen:

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

In dem Page_Load-Handler der Manage.aspx.cs Code-Behind-Datei, heben Sie die Kommentierung der gelb markierten Zeile des Codes auf, sodass sie wie folgt aussieht:

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

Aktualisieren Sie im Code-Behind von Account/TwoFactorAuthenticationSignIn.aspx.cs den Page_LoadHandler, indem Sie den folgenden, gelb markierten Code hinzufügen:

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

Durch die Änderung des obigen Codes wird die DropDownList "Providers" mit den Authentifizierungsoptionen nicht auf den ersten Wert zurückgesetzt. Dadurch kann der Benutzer erfolgreich alle Optionen auswählen, die beim Authentifizieren verwendet werden sollen, nicht nur der erste.

Klicken Sie im Lösungs-Explorer mit der rechten Maustaste auf Default.aspx und wählen Sie Als Startseite festlegen.
Wenn Sie Ihre App testen, erstellen Sie zunächst die App (STRG+Umschalt+B) und führen Sie sie dann aus (F5). Wählen Sie entweder Registrieren, um ein neues Benutzerkonto zu erstellen, oder wählen Sie Anmelden, wenn das Benutzerkonto bereits registriert ist.
Nachdem Sie sich (als Benutzer) angemeldet haben, klicken Sie in der Navigationsleiste auf die Benutzer-ID (E-Mail-Adresse), um die Seite Konto verwalten (Manage.aspx) anzuzeigen.
Klicken Sie auf Hinzufügen neben Telefonnummer auf der Seite Konto verwalten.
Fügen Sie die Telefonnummer hinzu, unter der Sie (als Benutzer) SMS-Nachrichten (Textnachrichten) empfangen möchten, und klicken Sie auf die Schaltfläche Senden.

An dieser Stelle wird die App die Anmeldeinformationen aus der Web.config verwenden, um Twilio zu kontaktieren. Eine SMS-Nachricht (Sms) wird an das dem Benutzerkonto zugeordnete Telefon gesendet. Sie können überprüfen, ob die Twilio-Nachricht gesendet wurde, indem Sie das Twilio-Dashboard anzeigen.
In einigen Sekunden erhält das dem Benutzerkonto zugeordnete Telefon eine Sms mit dem Überprüfungscode. Geben Sie den Verifizierungscode ein und wählen Sie Senden.

Aktivieren Two-Factor Authentifizierung für einen registrierten Benutzer

An diesem Punkt haben Sie die zweistufige Authentifizierung für Ihre App aktiviert. Damit ein Benutzer die zweistufige Authentifizierung verwendet, kann er seine Einstellungen einfach mithilfe der Benutzeroberfläche ändern.

Als Benutzer Ihrer App können Sie die zweistufige Authentifizierung für Ihr spezifisches Konto aktivieren, indem Sie in der Navigationsleiste auf die Benutzer-ID (E-Mail-Alias) klicken, um die Seite Konto verwalten anzuzeigen. Klicken Sie dann auf den Link Aktivieren, um die zweistufige Authentifizierung für das Konto zu aktivieren.
Melden Sie sich ab, und melden Sie sich dann wieder an. Wenn Sie E-Mails aktiviert haben, können Sie sms oder E-Mail für die zweistufige Authentifizierung auswählen. Wenn Sie die E-Mail-Funktion nicht aktiviert haben, lesen Sie das Lernprogramm mit dem Titel Erstellen einer sicheren ASP.NET Web Forms App mit Benutzerregistrierung, E-Mail-Bestätigung und Kennwortzurücksetzung.
Die Two-Factor-Authentifizierungsseite wird angezeigt, auf der Sie den Code (von SMS oder E-Mail) eingeben können.
Wenn Sie auf das Kontrollkästchen Diesen Browser merken klicken, sind Sie von der Notwendigkeit befreit, sich mit der Zwei-Faktor-Authentifizierung anzumelden, wenn Sie den Browser und das Gerät verwenden, auf dem Sie das Kontrollkästchen aktiviert haben. Solange sich böswillige Benutzer keinen Zugang zu Ihrem Gerät verschaffen können, ermöglicht Ihnen die Aktivierung der Zwei-Faktor-Authentifizierung und das Anklicken des Kästchens Diesen Browser merken einen bequemen Zugriff mit einem Kennwort in einem Schritt, wobei der Schutz durch die Zwei-Faktor-Authentifizierung für alle Zugriffe von nicht vertrauenswürdigen Geräten erhalten bleibt. Sie können dies auf jedem privaten Gerät tun, das Sie regelmäßig verwenden.

Freigeben über