Condividi tramite

App ASP.NET MVC 5 con autenticazione a due fattori tramite SMS e posta elettronica

  • Articolo

di Rick Anderson

Questa esercitazione illustra come creare un'app Web ASP.NET MVC 5 con autenticazione Two-Factor. È necessario completare Creare un'app Web MVC 5 sicura ASP.NET con accesso, conferma tramite posta elettronica e reimpostazione della password prima di procedere. È possibile scaricare l'applicazione completata qui. Il download contiene helper di debug che consentono di testare la conferma tramite posta elettronica e l'SMS senza configurare un provider di posta elettronica o SMS.

Questa esercitazione è stata scritta da Rick Anderson ( Twitter: @RickAndMSFT ).

Creare un'app MVC ASP.NET

Per iniziare, installare ed eseguire Visual Studio Express 2013 per Web o versione successiva.

Nota

Avviso: è necessario completare Creare un'app Web MVC 5 sicura ASP.NET con accesso, conferma tramite posta elettronica e reimpostazione della password prima di procedere. Per completare questa esercitazione, è necessario installare Visual Studio 2013 Update 3 o versione successiva.

  1. Creare un nuovo progetto Web ASP.NET e selezionare il modello MVC. Web Forms supporta anche ASP.NET Identity, quindi è possibile seguire passaggi simili in un'app Web form.
    Screenshot che mostra la finestra New A S P dot NET Project (Nuovo progetto P punto NET). L'autenticazione predefinita, Account utente singolo, è evidenziata.
  2. Lasciare l'autenticazione predefinita come Account utente singolo. Se si vuole ospitare l'app in Azure, lasciare selezionata la casella di controllo. Più avanti nell'esercitazione verrà distribuita in Azure. È possibile aprire gratuitamente un account Azure.
  3. Impostare il progetto per l'uso di SSL.

Configurare SMS per l'autenticazione a due fattori

Questa esercitazione fornisce istruzioni per l'uso di Twilio o ASPSMS, ma è possibile usare qualsiasi altro provider SMS.

  1. Creazione di un account utente con un provider SMS

    Creare un account Twilio o ASPSMS .

  2. Installazione di pacchetti aggiuntivi o aggiunta di riferimenti al servizio

    Twilio:
    Nella Console di Gestione pacchetti immettere il comando seguente:
    Install-Package Twilio

    ASPSMS:
    È necessario aggiungere il riferimento al servizio seguente:

    Screenshot che mostra la finestra Aggiungi riferimento al servizio. Le barre di input Address e Namespace sono evidenziate.

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

    Spazio dei nomi:
    ASPSMSX2

  3. Capire le credenziali utente del provider SMS

    Twilio:
    Nella scheda Dashboard dell'account Twilio copiare il SID account e il token di autenticazione.

    ASPSMS:
    Dalle impostazioni dell'account passare a Userkey e copiarlo insieme alla password self-defined.

    Questi valori verranno archiviati successivamente nel file web.config all'interno delle chiavi "SMSAccountIdentification" e "SMSAccountPassword" .

  4. Specifica di SenderID/Originator

    Twilio:
    Nella scheda Numeri copiare il numero di telefono twilio.

    ASPSMS:
    Nel menu Sblocca originatori sbloccare uno o più originatori o scegliere un originatore alfanumerico (non supportato da tutte le reti).

    Questo valore verrà archiviato successivamente nel file web.config all'interno della chiave "SMSAccountFrom" .

  5. Trasferimento delle credenziali del provider SMS nell'app

    Rendere disponibili le credenziali e il numero di telefono del mittente per l'app. Per semplificare l'archiviazione di questi valori nel file web.config . Quando si esegue la distribuzione in Azure, è possibile archiviare i valori in modo sicuro nella sezione impostazioni dell'app nella scheda configura del sito Web.

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

    Avviso

    Sicurezza: non archiviare mai dati sensibili nel codice sorgente. L'account e le credenziali vengono aggiunti al codice precedente per semplificare l'esempio. Vedere Procedure consigliate per la distribuzione di password e altri dati sensibili in ASP.NET e Azure.

  6. Implementazione del trasferimento dei dati al provider SMS

    Configurare la SmsService classe nel file App_Start\IdentityConfig.cs .

    A seconda del provider SMS usato, attivare la sezione Twilio o 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. Aggiornare la visualizzazione Razor Views\Manage\Index.cshtml : (nota: non rimuovere solo i commenti nel codice di uscita, usare il codice seguente).

    @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. Verificare che i EnableTwoFactorAuthentication metodi di azione e DisableTwoFactorAuthentication in ManageController abbiano l'attributo[ValidateAntiForgeryToken] :

    //
// 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. Eseguire l'app e accedere con l'account registrato in precedenza.

  10. Fare clic sull'ID utente, che attiva il Index metodo di azione nel Manage controller.
    Screenshot che mostra la home page dell'app A P dot NET. È evidenziata un'opzione USER I D di esempio.

  11. Fare clic su Aggiungi.
    Screenshot che mostra la pagina Impostazioni account dell'app A P dot NET. Nessuna Aggiungi accanto alla sezione Numero di telefono è evidenziata.

  12. Il AddPhoneNumber metodo di azione visualizza una finestra di dialogo per immettere un numero di telefono in grado di ricevere messaggi SMS.

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

    Screenshot che mostra la pagina Aggiungi numero di telefono dell'app A P dot NET. Un numero di telefono di esempio viene compilato con un pulsante Invia codice di verifica sotto di esso.

  13. In pochi secondi si riceverà un sms con il codice di verifica. Immetterlo e premere Invia.
    Screenshot della pagina Aggiungi numero di telefono dell'app A P dot NET che mostra una barra di input compilata con un codice di verifica di esempio e un pulsante Invia sotto di esso.

  14. La visualizzazione Gestisci mostra che è stato aggiunto il numero di telefono.

Abilitare l'autenticazione a due fattori

Nell'app generata dal modello è necessario usare l'interfaccia utente per abilitare l'autenticazione a due fattori (2FA). Per abilitare 2FA, fare clic sull'ID utente (alias di posta elettronica) nella barra di spostamento.

Screenshot che mostra la home page dell'app A P dot NET. È evidenziato un esempio di USER I D.

Fare clic su Abilita 2FA.

Screenshot che mostra la pagina Impostazioni account dell'app A P dot NET. Two-Factor l'autenticazione: disabilitata con una sezione Abilita collegamento è evidenziata.

Disconnettersi, quindi accedere di nuovo. Se è stata abilitata la posta elettronica (vedere l'esercitazione precedente), è possibile selezionare l'SMS o il messaggio di posta elettronica per 2FA.

Screenshot che mostra la pagina A S P dot NET App Send Verification Code (Invia codice di verifica). Menu a discesa che mostra Il codice telefonico e Email Codice è selezionato.

Viene visualizzata la pagina Verifica codice in cui è possibile immettere il codice (da SMS o posta elettronica).

Screenshot che mostra la pagina Verifica app A S P dot NET per 2 FA. Sotto un codice di esempio, è evidenziata una casella di controllo con Ricorda questo browser.

Facendo clic sulla casella di controllo Memorizza questo browser , non sarà necessario usare 2FA per accedere quando si usa il browser e il dispositivo in cui è stata selezionata la casella. Se gli utenti malintenzionati non possono ottenere l'accesso al dispositivo, l'abilitazione di 2FA e facendo clic su Memorizza questo browser ti fornirà un comodo accesso con password in un passaggio, mantenendo comunque una protezione avanzata 2FA per tutti gli accessi da dispositivi non attendibili. È possibile eseguire questa operazione su qualsiasi dispositivo privato che usi regolarmente.

Questa esercitazione offre un'introduzione rapida all'abilitazione di 2FA in una nuova app MVC ASP.NET. L'esercitazione Sull'autenticazione a due fattori con SMS e posta elettronica con ASP.NET Identity illustra in dettaglio il codice sottostante l'esempio.

Risorse aggiuntive