Freigeben über

ASP.NET MVC 5-App mit zweistufiger Authentifizierung per SMS und E-Mail

  • Artikel

von Rick Anderson

In diesem Tutorial wird das Erstellen einer ASP.NET MVC 5-Web-App mit zweistufiger Authentifizierung gezeigt. Sie sollten Erstellen einer sicheren ASP.NET MVC 5 Web-App mit Anmeldung, E-Mail-Bestätigung und Zurücksetzen des Kennworts abschließen, bevor Sie fortfahren. Sie können die fertige Anwendung hier herunterladen. Der Download enthält Hilfsprogramme für das Debuggen, mit denen Sie die E-Mail-Bestätigung und SMS testen können, ohne einen E-Mail- oder SMS-Anbieter einzurichten.

Dieses Tutorial wurde von Rick Anderson ( Twitter: @RickAndMSFT ) geschrieben.

Erstellen einer ASP.NET MVC 5-App

Beginnen Sie mit der Installation und führen Sie Visual Studio Express 2013 für Web oder höher aus.

Hinweis

Warnung: Sie sollten Erstellen einer sicheren ASP.NET MVC 5 Web-App mit Anmeldung, E-Mail-Bestätigung und Zurücksetzen des Kennworts abschließen, bevor Sie fortfahren. Sie müssen Visual Studio 2013 Update 3 oder höher installieren, um dieses Tutorial abzuschließen.

  1. Erstellen Sie ein neues ASP.NET-Webprojekt, und wählen Sie die MVC-Vorlage aus. Web Forms unterstützt auch die ASP.NET-Identität, sodass Sie ähnliche Schritte in einer Webformular-App ausführen können.
    Screenshot, der das Fenster
  2. Belassen Sie die Standardauthentifizierung bei Individuelle Benutzerkonten. Wenn Sie die App in Azure hosten möchten, lassen Sie das Kontrollkästchen aktiviert. Im weiteren Verlauf des Tutorials werden wir die Bereitstellung in Azure vornehmen. Sie können ein Azure-Konto kostenlos eröffnen.
  3. Legen Sie fest, dass das Projekt SSL verwenden soll.

Einrichten von SMS für zweistufige Authentifizierung

Dieses Tutorial enthält Anweisungen zur Verwendung von Twilio oder ASPSMS, aber Sie können auch jeden anderen SMS-Anbieter verwenden.

  1. Erstellen eines Benutzerkontos bei einem SMS-Anbieter

    Erstellen Sie ein Twilio-- oder ein ASPSMS--Konto.

  2. Installieren zusätzlicher Pakete oder Hinzufügen von Dienst-Referenzen

    Twilio:
    Geben Sie in der Paket-Manager-Konsole den folgenden Befehl ein:
    Install-Package Twilio

    ASPSMS:
    Die folgende Dienst-Referenz muss hinzugefügt werden:

    Screenshot, der das Fenster Dienst-Referenz hinzufügen zeigt. Die Adress- und Namespace-Eingabeleisten sind hervorgehoben.

    Adresse:
    https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

    Namespace:
    ASPSMSX2

  3. Ermittlung der Anmeldeinformationen für SMS-Anbieter Benutzer

Es wird empfohlen, die sicherste Authentifizierungsoption zu verwenden. Informationen zu .NET-Apps, die in Azure bereitgestellt werden, finden Sie unter:

Azure Key Vault und .NET Aspire bieten die sicherste Möglichkeit zum Speichern und Abrufen von Geheimschlüsseln. Der Azure Key Vault-Clouddienst schützt Verschlüsselungsschlüssel und Geheimnisse (wie Zertifikate, Verbindungszeichenfolgen und Kennwörter). Informationen zu .NET Aspire finden Sie unter sichere Kommunikation zwischen Hosting- und Clientintegrationen.

Vermeiden Sie die Vergabe von Anmeldeinformationen für das Kennwort des Besitzers von Ressourcen, da dies:

  • Macht das Benutzerkennwort für den Client sichtbar.
  • Stellt ein erhebliches Sicherheitsrisiko dar.
  • Sollte nur verwendet werden, wenn andere Authentifizierungsflows nicht möglich sind.

Wenn die App auf einem Testserver bereitgestellt wird, kann eine Umgebungsvariable verwendet werden, um die Verbindungszeichenfolge auf einen echten Testdatenbankserver festzulegen. Umgebungsvariablen werden im Allgemeinen in unverschlüsseltem Nur-Text gespeichert. Wenn der Computer oder Prozess kompromittiert ist, können nicht vertrauenswürdige Parteien auf die Umgebungsvariablen zugreifen. Wir raten davon ab, Umgebungsvariablen zum Speichern einer Produktions-Verbindungszeichenfolge zu verwenden, da dies nicht der sicherste Ansatz ist.

Richtlinien für Konfigurationsdaten:

  • Speichern Sie nie Kennwörter oder andere vertrauliche Daten im Konfigurationsanbietercode oder in Nur-Text-Konfigurationsdateien.
  • Verwenden Sie keine Produktionsgeheimnisse in Entwicklungs- oder Testumgebungen.
  • Geben Sie Geheimnisse außerhalb des Projekts an, damit sie nicht versehentlich in ein Quellcoderepository übernommen werden können.

Twilio:
Kopieren Sie auf der Registerkarte Dashboard Ihres Twilio-Kontos die Konto-SID und das Authentifizierungstoken.

ASPSMS:
Navigieren Sie in Ihren Kontoeinstellungen zu Benutzerkennwort und kopieren Sie es zusammen mit Ihrem selbst festgelegten Kennwort.

Wir speichern diese Werte später in der web.config-Datei in den Schlüsseln "SMSAccountIdentification" und "SMSAccountPassword". 4. Festlegen von SenderID/Absender

Twilio:
Kopieren Sie auf der Registerkarte Nummern Ihre Twilio-Telefonnummer.

ASPSMS:
Im Menü Absender freischalten schalten Sie einen oder mehrere Absender frei oder wählen einen alphanumerischen Absender (wird nicht von allen Netzwerken unterstützt).

Wir speichern diesen Wert später in der web.config-Datei im Schlüssel "SMSAccountFrom". 5. Übertragen von Zugangsdaten des SMS-Anbieters in die App

Stellen Sie der App die Anmeldeinformationen und die Absenderrufnummer zur Verfügung. Der Einfachheit halber speichern wir diese Werte in der Datei web.config. Bei der Bereitstellung in Azure können wir die Werte sicher im Abschnitt App-Einstellungen auf der Registerkarte "Konfigurieren" der Website speichern.

[!code-xml[Main](aspnet-mvc-5-app-with-sms-and-email-two-factor-authentication/samples/sample1.xml?highlight=8-10)]

> [!WARNING]
> Security - Never store sensitive data in your source code. The account and credentials are added to the code above to keep the sample simple. See [Best practices for deploying passwords and other sensitive data to ASP.NET and Azure](../../../identity/overview/features-api/best-practices-for-deploying-passwords-and-other-sensitive-data-to-aspnet-and-azure.md).

  1. Implementierung der Datenübertragung an SMS-Anbieter

    Konfigurieren Sie die SmsService-Klasse in der Datei App_Start\IdentityConfig.cs.

    Je nach verwendetem SMS-Anbieter aktivieren Sie entweder den Twilio oder den ASPSMS Abschnitt:

    public class SmsService : IIdentityMessageService
{
    public Task SendAsync(IdentityMessage message)
    {
        // Twilio Begin
        //var accountSid = ConfigurationManager.AppSettings["SMSAccountIdentification"];
        //var authToken = ConfigurationManager.AppSettings["SMSAccountPassword"];
        //var fromNumber = ConfigurationManager.AppSettings["SMSAccountFrom"];

        //TwilioClient.Init(accountSid, authToken);

        //MessageResource result = MessageResource.Create(
            //new PhoneNumber(message.Destination),
            //from: new PhoneNumber(fromNumber),
           //body: message.Body
        //);

        ////Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
         //Trace.TraceInformation(result.Status.ToString());
        ////Twilio doesn't currently have an async API, so return success.
         //return Task.FromResult(0);    
        // Twilio End

        // ASPSMS Begin 
        // var soapSms = new MvcPWx.ASPSMSX2.ASPSMSX2SoapClient("ASPSMSX2Soap");
        // soapSms.SendSimpleTextSMS(
        //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountIdentification"],
        //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountPassword"],
        //   message.Destination,
        //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountFrom"],
        //   message.Body);
        // soapSms.Close();
        // return Task.FromResult(0);
        // ASPSMS End
    }
}

  2. Aktualisieren Sie die Views\Manage\Index.cshtml Razor-Ansicht: (Hinweis: Entfernen Sie nicht einfach die Kommentare im bestehenden Code, sondern verwenden Sie den folgenden Code).

    @model MvcPWy.Models.IndexViewModel
@{
   ViewBag.Title = "Manage";
}
<h2>@ViewBag.Title.</h2>
<p class="text-success">@ViewBag.StatusMessage</p>
<div>
   <h4>Change your account settings</h4>
   <hr />
   <dl class="dl-horizontal">
      <dt>Password:</dt>
      <dd>
         [
         @if (Model.HasPassword)
         {
            @Html.ActionLink("Change your password", "ChangePassword")
         }
         else
         {
            @Html.ActionLink("Create", "SetPassword")
         }
         ]
      </dd>
      <dt>External Logins:</dt>
      <dd>
         @Model.Logins.Count [
         @Html.ActionLink("Manage", "ManageLogins") ]
      </dd>
        <dt>Phone Number:</dt>
      <dd>
         @(Model.PhoneNumber ?? "None") [
         @if (Model.PhoneNumber != null)
         {
            @Html.ActionLink("Change", "AddPhoneNumber")
            @: &nbsp;|&nbsp;
            @Html.ActionLink("Remove", "RemovePhoneNumber")
         }
         else
         {
            @Html.ActionLink("Add", "AddPhoneNumber")
         }
         ]
      </dd>
      <dt>Two-Factor Authentication:</dt> 
      <dd>
         @if (Model.TwoFactor)
         {
            using (Html.BeginForm("DisableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
               @Html.AntiForgeryToken()
               <text>Enabled
                  <input type="submit" value="Disable" class="btn btn-link" />
               </text>
            }
         }
         else
         {
            using (Html.BeginForm("EnableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
               @Html.AntiForgeryToken()
               <text>Disabled
                  <input type="submit" value="Enable" class="btn btn-link" />
               </text>
            }
         }
      </dd>
   </dl>
</div>

  3. Stellen Sie sicher, dass die EnableTwoFactorAuthentication und DisableTwoFactorAuthentication Aktionsmethoden in der ManageController das Attribut [ValidateAntiForgeryToken] haben:

    //
// POST: /Manage/EnableTwoFactorAuthentication
[HttpPost,ValidateAntiForgeryToken]
public async Task<ActionResult> EnableTwoFactorAuthentication()
{
    await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), true);
    var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
    if (user != null)
    {
        await SignInAsync(user, isPersistent: false);
    }
    return RedirectToAction("Index", "Manage");
}
//
// POST: /Manage/DisableTwoFactorAuthentication
[HttpPost, ValidateAntiForgeryToken]
public async Task<ActionResult> DisableTwoFactorAuthentication()
{
    await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), false);
    var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
    if (user != null)
    {
        await SignInAsync(user, isPersistent: false);
    }
    return RedirectToAction("Index", "Manage");
}

  4. Führen Sie die App aus, und melden Sie sich mit dem Konto an, das Sie zuvor registriert haben.

  5. Klicken Sie auf Ihre Benutzer-ID, wodurch die Index Aktionsmethode im Manage Controller aktiviert wird.
    Screenshot der ASP.NET-App-Startseite. Eine Beispiel-Benutzer-ID ist hervorgehoben.

  6. Klicken Sie auf Hinzufügen.
    Screenshot, der die Seite ASP.NET-App Kontoeinstellungen zeigt. Keine Hinzufügen neben dem Abschnitt Telefonnummer ist hervorgehoben.

  7. Die AddPhoneNumber-Aktionsmethode zeigt ein Dialogfeld an, um eine Telefonnummer einzugeben, die SMS-Nachrichten empfangen kann.

    // GET: /Account/AddPhoneNumber
public ActionResult AddPhoneNumber()
{
   return View();
}

    Screenshot: Seite „Telefonnummer hinzufügen“ der ASP.NET-App mit eingegebener Beispieltelefonnummer und Schaltfläche „Bestätigungscode senden“ darunter

  8. In einigen Sekunden erhalten Sie eine SMS mit dem Bestätigungscode. Geben Sie sie ein und drücken Sie Senden.
    Screenshot: Eingabeleiste auf der Seite „Telefonnummer hinzufügen“ der ASP.NET-App mit eingegebenem Bestätigungscode und Schaltfläche zum Senden darunter

  9. Die Verwaltungsansicht zeigt, dass Ihre Telefonnummer hinzugefügt wurde.

Aktivieren der zweistufigen Authentifizierung

In der mit der Vorlage generierten App müssen Sie die Benutzeroberfläche verwenden, um die Zwei-Faktor-Authentifizierung (2FA) zu aktivieren. Um 2FA zu aktivieren, klicken Sie in der Navigationsleiste auf Ihre Benutzer-ID (E-Mail-Alias).

Screenshot, der den Bildschirm der ASP.NET-App Startseite zeigt. Ein Beispiel für eine BENUTZER-ID ist hervorgehoben.

Klicken Sie auf „2FA aktivieren“.

Screenshot, der die Seite mit den Kontoeinstellungen der ASP.NET-App zeigt. Zwei-Faktoren-Authentifizierung: Deaktiviert mit einem Link zum Aktivieren ist hervorgehoben.

Melden Sie sich ab und dann wieder an. Wenn Sie E-Mail aktiviert haben (siehe mein vorheriges Tutorial), können Sie SMS oder E-Mail für 2FA auswählen.

Screenshot, der die Seite ASP.NET-App Verifizierungscode senden zeigt. Ein Dropdown-Menü mit Telefon-Code und E-Mail-Code ist ausgewählt.

Die Seite „Code überprüfen“, auf der Sie den Code eingeben können (von SMS oder E-Mail), wird angezeigt.

Screenshot, der die Seite ASP.NET-App Verifizieren für 2FA zeigt. Unter einem Beispielcode ist ein Kontrollkästchen mit Diesen Browser merken hervorgehoben.

Wenn Sie auf das Kontrollkästchen Diesen Browser merken klicken, müssen Sie sich nicht mit 2FA anmelden, wenn Sie den Browser und das Gerät verwenden, bei dem Sie das Kontrollkästchen markiert haben. Solange sich schädliche Benutzer keinen Zugang zu Ihrem Gerät verschaffen können, ermöglicht Ihnen die Aktivierung von 2FA und das Anklicken des Kästchens Diesen Browser merken einen bequemen Zugriff auf das Kennwort in einem Schritt, während der starke 2FA-Schutz für alle Zugriffe von nicht vertrauenswürdigen Geräten erhalten bleibt. Sie können diese Einstellung auf jedem privaten Gerät vornehmen, das Sie regelmäßig verwenden.

Dieses Tutorial bietet eine kurze Einführung in die Aktivierung von 2FA für eine neue ASP.NET MVC-App. Mein Tutorial Zwei-Faktor-Authentifizierung mit SMS und E-Mail unter Verwendung von ASP.NET Identity bietet eine detaillierte Erklärung des Quellcodes im Beispiel.

Weitere Ressourcen