Freigeben über

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

  • Artikel

von Rick Anderson

In diesem Tutorial erfahren Sie, wie Sie eine ASP.NET MVC 5-Web-App mit Two-Factor-Authentifizierung erstellen. Sie sollten Erstellen einer sicheren ASP.NET MVC 5-Web-App mit Anmeldung, E-Mail-Bestätigung und Kennwortzurücksetzung abschließen, bevor Sie fortfahren. Sie können die fertige Anwendung hier herunterladen. Der Download enthält Hilfsprogramme zum 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-App

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

Hinweis

Warnung: Sie sollten Erstellen einer sicheren ASP.NET MVC 5-Web-App mit Anmeldung, E-Mail-Bestätigung und Kennwortzurücksetzung 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 ASP.NET Identity, sodass Sie ähnliche Schritte in einer Web Forms-App ausführen können.
    Screenshot: Fenster
  2. Übernehmen Sie die Standardauthentifizierung als Individuelle Benutzerkonten. Wenn Sie die App in Azure hosten möchten, lassen Sie das Kontrollkästchen aktiviert. Später im Tutorial werden wir in Azure bereitstellen. Sie können kostenlos ein Azure-Konto eröffnen.
  3. Legen Sie das Projekt so fest, dass SSL verwendet wird.

Einrichten von SMS für die zweistufige Authentifizierung

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

  1. Erstellen eines Benutzerkontos mit einem SMS-Anbieter

    Erstellen Sie ein Twilio - oder ASPSMS-Konto .

  2. Installieren zusätzlicher Pakete oder Hinzufügen von Dienstverweisen

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

    ASPSMS:
    Der folgende Dienstverweis muss hinzugefügt werden:

    Screenshot: Fenster

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

    Namespace:
    ASPSMSX2

  3. Ermitteln der Benutzeranmeldeinformationen des SMS-Anbieters

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

    ASPSMS:
    Navigieren Sie in Ihren Kontoeinstellungen zu Userkey , und kopieren Sie ihn zusammen mit Ihrem selbst definierten Kennwort.

    Diese Werte werden später in der web.config-Datei in den Schlüsseln "SMSAccountIdentification" und "SMSAccountPassword" gespeichert.

  4. Angeben von SenderID/Originator

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

    ASPSMS:
    Entsperren Sie im Menü Entsperren von Originators einen oder mehrere Originators, oder wählen Sie einen alphanumerischen Absender aus (nicht von allen Netzwerken unterstützt).

    Dieser Wert wird später in der web.config-Datei im Schlüssel "SMSAccountFrom" gespeichert.

  5. Übertragen von Anmeldeinformationen des SMS-Anbieters in die App

    Stellen Sie die Anmeldeinformationen und die Telefonnummer des Absenders für die App zur Verfügung. Um die Dinge einfach zu halten, speichern wir diese Werte in der web.config-Datei . Bei der Bereitstellung in Azure können wir die Werte sicher im Abschnitt App-Einstellungen auf der Registerkarte "Website konfigurieren" speichern.

    </connectionStrings>
   <appSettings>
      <add key="webpages:Version" value="3.0.0.0" />
      <!-- Markup removed for clarity. -->
      <!-- SendGrid-->
      <add key="mailAccount" value="account" />
      <add key="mailPassword" value="password" />
      <add key="SMSAccountIdentification" value="My Identification" />
      <add key="SMSAccountPassword" value="My Password" />
      <add key="SMSAccountFrom" value="+12065551234" />
   </appSettings>
  <system.web>

    Warnung

    Sicherheit: Speichern Sie vertrauliche Daten niemals in Ihrem Quellcode. Das Konto und die Anmeldeinformationen werden dem obigen Code hinzugefügt, um das Beispiel einfach zu halten. Weitere Informationen finden Sie unter Bewährte Methoden für die Bereitstellung von Kennwörtern und anderen vertraulichen Daten in ASP.NET und Azure.

  6. Implementierung der Datenübertragung an den SMS-Anbieter

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

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

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

  7. Aktualisieren Sie die Razor-Ansicht Views\Manage\Index.cshtml : (Hinweis: Entfernen Sie nicht einfach die Kommentare im beendenden Code, 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>

  8. Überprüfen Sie, ob die EnableTwoFactorAuthentication Aktionsmethoden und DisableTwoFactorAuthentication im ManageController -Element das Attribut [ValidateAntiForgeryToken] aufweisen:

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

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

  10. Klicken Sie auf Ihre Benutzer-ID, wodurch die Index Aktionsmethode im Manage Controller aktiviert wird.
    Screenshot: Startseite der A S P dot NET-App Ein Beispielbenutzer-ID ist hervorgehoben.

  11. Klicken Sie auf Hinzufügen.
    Screenshot: Seite

  12. Die AddPhoneNumber Aktionsmethode zeigt ein Dialogfeld zum Eingeben einer Telefonnummer an, die SMS-Nachrichten empfangen kann.

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

    Screenshot: Seite

  13. In wenigen Sekunden erhalten Sie eine SMS mit dem Überprüfungscode. Geben Sie es ein, und drücken Sie Senden.
    Screenshot der Seite

  14. Die Ansicht Verwalten zeigt, dass Ihre Telefonnummer hinzugefügt wurde.

Aktivieren Sie die zweistufige Authentifizierung.

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

Screenshot: Startseite der A S P dot NET-App Ein Beispiel für USER ID ist hervorgehoben.

Klicken Sie auf 2FA aktivieren.

Screenshot: Seite

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

Screenshot: Seite

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

Screenshot: Seite

Wenn Sie auf das Kontrollkästchen Diesen Browser speichern klicken, müssen Sie nicht mehr 2FA 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 von 2FA und Klicken auf "Diesen Browser speichern " einen bequemen Kennwortzugriff in einem Schritt, während sie weiterhin einen starken 2FA-Schutz 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.

Dieses Tutorial bietet eine kurze Einführung in die Aktivierung von 2FA für eine neue ASP.NET MVC-App. In meinem Tutorial Zweistufige Authentifizierung mit SMS und E-Mail mit ASP.NET Identity wird der Code hinter dem Beispiel ausführlich erläutert.

Zusätzliche Ressourcen