Erstellen einer ASP.NET Web Forms-Anwendung mit zweistufiger Authentifizierung per SMS (C#)

Artikel
06/16/2023

Herunterladen ASP.NET Web Forms App mit Email- und SMS-Two-Factor-Authentifizierung

In diesem Tutorial erfahren Sie, wie Sie eine ASP.NET Web Forms-App mit Two-Factor-Authentifizierung erstellen. Dieses Tutorial wurde entwickelt, um das Tutorial Erstellen einer sicheren ASP.NET Web Forms-App mit Benutzerregistrierung, E-Mail-Bestätigung und Kennwortzurücksetzung zu ergänzen. Darüber hinaus basiert dieses Tutorial auf dem MVC-Tutorial von Rick Anderson.

Einführung

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

Tutorialaufgaben und -informationen:

Erstellen einer ASP.NET Web Forms-App
Einrichten der SMS- und Two-Factor authentifizierung
Aktivieren Two-Factor Authentifizierung für registrierte Benutzer
Weitere Ressourcen

Erstellen einer ASP.NET Web Forms-App

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

Hinweis

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

Erstellen Sie ein neues Projekt (Datei –>Neues Projekt), und wählen Sie im Dialogfeld Neues Projekt die Vorlage ASP.NET Webanwendung zusammen mit der .NET Framework Version 4.5.2 aus.
Wählen Sie im Dialogfeld Neues ASP.NET Projekt die vorlage Web Forms aus. Behalten Sie die Standardauthentifizierung als Individuelle Benutzerkonten bei. Klicken Sie dann auf OK , um das neue Projekt zu erstellen.
Aktivieren Sie Secure Sockets Layer (SSL) für das Projekt. Führen Sie die Schritte aus, die im Abschnitt Aktivieren von SSL für das Projekt der Tutorialreihe Erste Schritte mit Web Forms verfügbar sind.
Öffnen Sie in Visual Studio die Paket-Manager-Konsole (Tools ->NuGet Package Manager-Konsole>), und geben Sie den folgenden Befehl ein:
Install-Package Twilio

Einrichten der SMS- und Two-Factor authentifizierung

In diesem Tutorial wird Twilio verwendet, Sie können jedoch einen beliebigen SMS-Anbieter verwenden.

Erstellen Sie ein Twilio-Konto .
Kopieren Sie auf der Registerkarte Dashboard Ihres Twilio-Kontos die Konto-SID und das Authentifizierungstoken. Sie fügen sie später Ihrer App hinzu.
Kopieren Sie auf der Registerkarte Nummern auch Ihre Twilio-Telefonnummer.
Stellen Sie die Twilio-Konto-SID, das Authentifizierungstoken und die Telefonnummer für die App zur Verfügung. Um die Dinge einfach zu halten, speichern Sie diese Werte in der web.config-Datei . Wenn Sie die Bereitstellung in Azure durchführen, können Sie die Werte sicher im Abschnitt appSettings auf der Registerkarte "Website konfigurieren" speichern. Verwenden Sie beim Hinzufügen der Telefonnummer nur Nummern.
Beachten Sie, dass Sie auch SendGrid-Anmeldeinformationen hinzufügen können. SendGrid ist ein E-Mail-Benachrichtigungsdienst. Ausführliche Informationen zum Aktivieren von SendGrid finden Sie im Abschnitt "Hook Up SendGrid" des Tutorials 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 vertrauliche Daten niemals in Ihrem Quellcode. In diesem Beispiel werden das Konto und die Anmeldeinformationen im Abschnitt appSettings der Web.config-Datei gespeichert. In 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 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 am Anfang der Datei IdentityConfig.cs die folgenden using Anweisungen hinzu:

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

Aktualisieren Sie die Datei Account/Manage.aspx , indem Sie die 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>

Heben Sie im Page_Load Handler des Codebehinds Manage.aspx.cs die Auskommentierung der gelb hervorgehobenen Codezeile auf, sodass sie wie folgt angezeigt wird:

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 Codebehind von Account/TwoFactorAuthenticationSignIn.aspx.cs den Page_Load Handler, indem Sie den folgenden gelb hervorgehobenen 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 obige Codeänderung wird die DropDownList "Anbieter", die die Authentifizierungsoptionen enthält, nicht auf den ersten Wert zurückgesetzt. Dadurch kann der Benutzer erfolgreich alle Optionen auswählen, die bei der Authentifizierung verwendet werden sollen, nicht nur die erste.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf Default.aspx, und wählen Sie Als Startseite festlegen aus.
Wenn Sie Ihre App testen, erstellen Sie zuerst die App (STRG+UMSCHALT+B), führen Sie dann die App (F5) aus, und wählen Sie entweder Registrieren aus, um ein neues Benutzerkonto zu erstellen, oder Anmelden aus, wenn das Benutzerkonto bereits registriert wurde.
Nachdem Sie sich (als Benutzer) angemeldet haben, klicken Sie auf die Benutzer-ID (E-Mail-Adresse) in der Navigationsleiste, um die Seite Konto verwalten (Verwalten.aspx) anzuzeigen.
Klicken Sie auf der Seite Konto verwalten neben Telefonnummer auf Hinzufügen.
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 diesem Punkt verwendet die App die Anmeldeinformationen aus dem Web.config , um Twilio zu kontaktieren. Eine SMS-Nachricht (SMS) wird an das Telefon gesendet, das dem Benutzerkonto zugeordnet ist. Sie können überprüfen, ob die Twilio-Nachricht gesendet wurde, indem Sie die Twilio-Dashboard anzeigen.
In wenigen Sekunden erhält das dem Benutzerkonto zugeordnete Telefon eine SMS mit dem Überprüfungscode. Geben Sie den Überprüfungscode ein, und drücken 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 verwenden kann, kann er einfach seine Einstellungen über die 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-Mail aktiviert haben, können Sie entweder SMS oder E-Mail für die zweistufige Authentifizierung auswählen. Wenn Sie E-Mail nicht aktiviert haben, lesen Sie das Tutorial Erstellen einer sicheren ASP.NET Web Forms-App mit Benutzerregistrierung, Email Bestätigung und Kennwortzurücksetzung.
Die Seite Two-Factor-Authentifizierung wird angezeigt, auf der Sie den Code (per SMS oder E-Mail) eingeben können.
Wenn Sie auf das Kontrollkästchen Diesen Browser speichern klicken, müssen Sie nicht die zweistufige Authentifizierung verwenden, um sich anzumelden, wenn Sie den Browser und das Gerät verwenden, auf dem Sie das Kontrollkästchen aktiviert haben. Solange böswillige Benutzer keinen Zugriff auf Ihr Gerät erhalten können, erhalten Sie durch Aktivieren der zweistufigen Authentifizierung und Klicken auf den Browser merken einen bequemen Ein-Schritt-Kennwortzugriff, während sie weiterhin einen starken zweistufigen Authentifizierungsschutz für alle Zugriffe von nicht vertrauenswürdigen Geräten beibehalten. Sie können dies auf jedem privaten Gerät tun, das Sie regelmäßig verwenden.

Freigeben über