Delen via

ASP.NET MVC 5-app met sms en e-mail Two-Factor authenticatie

  • Artikel

door Rick Anderson

In deze zelfstudie leert u hoe u een ASP.NET MVC 5-web-app bouwt met Two-Factor-verificatie. U moet Een beveiligde ASP.NET MVC 5-web-app maken met aanmelden, e-mailbevestiging en wachtwoordherstel voordat u doorgaat. U kunt de voltooide toepassing hierdownloaden. De download bevat helpers voor foutopsporing waarmee u e-mailbevestiging en sms kunt testen zonder een e-mail- of SMS-provider in te stellen.

Deze handleiding is geschreven door Rick Anderson (Twitter: @RickAndMSFT).

Een ASP.NET MVC-app maken

Begin met het installeren en uitvoeren van Visual Studio Express 2013 voor Web of hoger.

Notitie

Waarschuwing: u moet Een beveiligde ASP.NET MVC 5-web-app maken met aanmelding, bevestiging van e-mail en wachtwoordherstel voordat u doorgaat. U moet Visual Studio 2013 Update 3 of hoger installeren om deze zelfstudie te voltooien.

  1. Maak een nieuw ASP.NET-webproject en selecteer de MVC-sjabloon. Web Forms ondersteunt ook ASP.NET Identity, zodat u vergelijkbare stappen in een webformulier-app kunt volgen.
    Schermopname van het venster New A S P DOT NET Project. De standaardverificatie, afzonderlijke gebruikersaccounts, is gemarkeerd.
  2. Laat de standaardverificatie staan als afzonderlijke gebruikersaccounts. Als u de app in Azure wilt hosten, laat u het selectievakje ingeschakeld. Verderop in de zelfstudie implementeren we in Azure. U kunt gratis een Azure-account openen.
  3. Stel het project in om SSL-te gebruiken.

SMS instellen voor tweeledige verificatie

Deze zelfstudie bevat instructies voor het gebruik van Twilio of ASPSMS, maar u kunt elke andere SMS-provider gebruiken.

  1. Een gebruikersaccount maken met een SMS-provider

    Maak een Twilio- of een ASPSMS--account.

  2. Aanvullende pakketten installeren of serviceverwijzingen toevoegen

    Twilio:
    Voer in de Package Manager-console de volgende opdracht in:
    Install-Package Twilio

    ASPSMS:
    De volgende servicereferentie moet worden toegevoegd:

    Schermopname van het venster Servicereferentie toevoegen. De invoerbalken adres en naamruimte zijn gemarkeerd.

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

    Namespace:
    ASPSMSX2

  3. Het achterhalen van gebruikersgegevens van de sms-provider

We raden u aan de veiligste veilige verificatieoptie te gebruiken. Zie voor .NET-apps die zijn geïmplementeerd in Azure:

Azure Key Vault en .NET Aspire bieden de veiligste manier om geheimen op te slaan en op te halen. Azure Key Vault is een cloudservice waarmee versleutelingssleutels en geheimen, zoals certificaten, verbindingsreeksen en wachtwoorden, worden beschermd. Zie voor .NET Aspire Beveiligde communicatie tussen hosting en clientintegraties.

Vermijd het gebruik van de Resource Owner Password Credentials Grant omdat het:

  • Stelt het wachtwoord van de gebruiker beschikbaar voor de client.
  • Is een aanzienlijk beveiligingsrisico.
  • Mag alleen worden gebruikt wanneer andere verificatiestromen niet mogelijk zijn.

Wanneer de app wordt geïmplementeerd op een testserver, kan een omgevingsvariabele worden gebruikt om de verbindingsreeks in te stellen op een testdatabaseserver. Omgevingsvariabelen worden over het algemeen opgeslagen in niet-versleutelde tekst. Als de machine of het proces is aangetast, kunnen omgevingsvariabelen worden geopend door niet-vertrouwde partijen. Wij raden af om omgevingsvariabelen te gebruiken om een productieverbindingsreeks op te slaan, omdat dit niet de veiligste benadering is.

Richtlijnen voor configuratiegegevens:

  • Sla nooit wachtwoorden of andere gevoelige gegevens op in configuratieprovidercode of in configuratiebestanden met tekst zonder opmaak.
  • Gebruik geen productiegeheimen in ontwikkel- of testomgevingen.
  • Geef geheimen buiten het project op, zodat ze niet per ongeluk kunnen worden doorgevoerd in een opslagplaats met broncode.

Twilio:
Kopieer op het tabblad Dashboard van uw Twilio-account de account-SID- en verificatietoken.

ASPSMS:
Navigeer vanuit uw accountinstellingen naar Userkey en kopieer deze samen met uw zelf gedefinieerde Wachtwoord.

Deze waarden worden later opgeslagen in het bestand web.config in de sleutels "SMSAccountIdentification" en "SMSAccountPassword". 4. SenderID/Originator opgeven

Twilio:
Kopieer uw Twilio-telefoonnummer van het tabblad Nummers.

ASPSMS:
In het Ontgrendelen Origineers-menu, ontgrendel één of meer Origineers of kies een alfanumerieke Origineer (niet ondersteund door alle netwerken).

Deze waarde wordt later opgeslagen in het web.config bestand in de sleutel "SMSAccountFrom". 5. Referenties van sms-provider overzetten naar app

Maak de referenties en het telefoonnummer van de afzender beschikbaar voor de app. Om het eenvoudig te houden, slaan we deze waarden op in het bestand web.config. Wanneer we in Azure implementeren, kunnen we de waarden veilig opslaan in de sectie app-instellingen op het tabblad Configureren van de website.

[!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. implementatie van gegevensoverdracht naar sms-provider

    Configureer de klasse SmsService in het bestand App_Start\IdentityConfig.cs.

    Afhankelijk van de gebruikte SMS-provider activeert u de Twilio- of de sectie 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
    }
}

  2. Werk de Views\Manage\Index.cshtml Razor view bij: (let op: verwijder niet alleen de opmerkingen in de afsluitcode, gebruik de onderstaande 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. Controleer of de EnableTwoFactorAuthentication- en DisableTwoFactorAuthentication-actiemethoden in de ManageController het kenmerk[ValidateAntiForgeryToken] hebben:

    //
// 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. Voer de app uit en meld u aan met het account dat u eerder hebt geregistreerd.

  5. Klik op uw gebruikers-id, waarmee de Index actiemethode in Manage controller wordt geactiveerd.
    Schermopname van de startpagina van de A S P P NET-app. Een voorbeeldgebruiker-ID is gemarkeerd.

  6. Klik op Toevoegen.
    Schermopname van de pagina Accountinstellingen van de A S P P DOT NET-app. Geen toevoegen naast de sectie Telefoonnummer is gemarkeerd.

  7. De actiemethode AddPhoneNumber geeft een dialoogvenster weer om een telefoonnummer in te voeren dat sms-berichten kan ontvangen.

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

    Schermopname van de pagina A S P DOT NET-app Telefoonnummer toevoegen. Er wordt een voorbeeldtelefoonnummer ingevuld met een knop Verificatiecode verzenden eronder.

  8. Over een paar seconden krijgt u een sms-bericht met de verificatiecode. Voer het in en druk op Verzenden.
    Schermopname van de ASP.NET-pagina Telefoonnummer Toevoegen, met een invoerbalk waarin een voorbeeldverificatiecode staat, en een knop Verzenden direct eronder.

  9. In de weergave Beheren ziet u dat uw telefoonnummer is toegevoegd.

Tweeledige verificatie inschakelen

In de door de sjabloon gegenereerde app moet u de gebruikersinterface gebruiken om tweeledige verificatie (2FA) in te schakelen. Als u 2FA wilt inschakelen, klikt u op uw gebruikers-id (e-mailalias) in de navigatiebalk.

Schermopname van de startpagina van de A S P P NET-app. Er is een voorbeeld van een USER I D gemarkeerd.

Klik op 2FA inschakelen.

Schermopname van de pagina Accountinstellingen van de A S P DOT NET-app. Two-Factor Verificatie: Uitgeschakeld met een gemarkeerde sectie

Afmelden en vervolgens weer aanmelden. Als u e-mail hebt ingeschakeld (zie mijn vorige zelfstudie), kunt u de sms of e-mail voor 2FA selecteren.

Schermopname van de pagina A S P P NET-app Verificatiecode verzenden. Er is een vervolgkeuzelijst met Telefooncode en E-mailcode geselecteerd.

De pagina Code verifiëren wordt weergegeven waar u de code kunt invoeren (via sms of e-mail).

Schermopname die de A S P punt NET-app Verificatiepagina voor twee-factor-authenticatie (2FA) toont. Onder een voorbeeldcode is een selectievakje met Deze browser onthouden gemarkeerd.

Als u het selectievakje Deze browser onthouden aanvinkt, hoeft u geen 2FA te gebruiken om in te loggen wanneer u de browser en het apparaat gebruikt waarop u het selectievakje hebt aangevinkt. Zolang kwaadwillende gebruikers geen toegang tot uw apparaat kunnen krijgen, 2FA inschakelen en klikken op de Deze browser onthouden u handige wachtwoordtoegang met één stap biedt, terwijl u nog steeds sterke 2FA-beveiliging behoudt voor alle toegang vanaf niet-vertrouwde apparaten. U kunt dit doen op elk privéapparaat dat u regelmatig gebruikt.

Deze zelfstudie biedt een korte inleiding tot het inschakelen van 2FA voor een nieuwe ASP.NET MVC-app. In mijn zelfstudie Tweeledige verificatie met sms en e-mail met ASP.NET Identity in detail wordt beschreven wat de code achter het voorbeeld is.

Aanvullende informatiebronnen