Condividi tramite

ASP.NET MVC 5 app con autenticazione tramite SMS e email Two-Factor

  • 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 ASP.NET MVC 5 sicura 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

Inizia installando ed eseguendo Visual Studio Express 2013 o versioni successive per il Web.

Nota

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

  1. Creare un nuovo progetto Web ASP.NET e selezionare il modello MVC. Web Form 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. L'autenticazione predefinita, Account utente individuali, è evidenziata.
  2. Lasciare l'impostazione di autenticazione predefinita come Account utente individuali. Se si vuole ospitare l'app in Azure, lasciare selezionata la casella di controllo. Più avanti nell'esercitazione verrà distribuita in Azure. È possibile aprire un account Azure gratuitamente.
  3. Impostare il progetto per usare 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 un account 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

    Namespace:
    ASPSMSX2

  3. Individuare le credenziali utente del provider SMS

    Twilio:
    Nella scheda Dashboard del tuo account Twilio, copia il SID dell'account e il token di autenticazione .

    ASPSMS:
    Dalle impostazioni dell'account, naviga a Userkey e copialo insieme alla tua Passwordauto-definita.

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

  4. Specificare SenderID/Originator

    Twilio:
    Dalla scheda Numeri, copiare il numero di telefono Twilio.

    ASPSMS:
    All'interno del menu Sblocca Mittenti, sbloccare uno o più mittenti o scegliere un mittente alfanumerico (non supportato da tutte le reti).

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

  5. Trasferire le credenziali del provider SMS nell'applicazione

    Rendere disponibili le credenziali e il numero di telefono del mittente per l'app. Per mantenere le cose semplici, questi valori verranno archiviati nel file web.config. Quando si esegue la distribuzione in Azure, è possibile archiviare i valori in modo sicuro nella sezione impostazioni dell'app della scheda configurazione 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>

    Avvertimento

    Sicurezza: non archiviare mai i 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 classe SmsService nel file App_Start\IdentityConfig.cs.

    A seconda del provider SMS usato, attivare la sezione Twilio o la sezione 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. Aggiorna la vista Razor Views\Manage\Index.cshtml: (nota: non rimuovere solo i commenti nel codice esistente, utilizza 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 metodi di azione EnableTwoFactorAuthentication 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 sul tuo ID utente, che attiva il metodo di azione Index nel controller Manage.
    Screenshot che mostra la home page dell'app A S P dot NET. È evidenziato un esempio di USER I D.

  11. Fare clic su Aggiungi.
    Screenshot che mostra la pagina Impostazioni dell'account dell'app ASP.NET. Nessun pulsante Aggiungi accanto alla sezione Numero di telefono è evidenziato.

  12. Il metodo di azione AddPhoneNumber 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 dell'app ASP.NET

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

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

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 navigazione.

Screenshot che mostra la pagina iniziale dell'app ASP.NET. È evidenziato un esempio di ID UTENTE.

Fare clic su Enable 2FA (Abilita 2FA).

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

Disconnettiti, poi accedi di nuovo. Se hai abilitato l'email (vedere il mio tutorial precedente), puoi selezionare l'SMS o l'email per l'autenticazione a due fattori.

Screenshot che mostra la pagina dell'app A S P dot NET Send Verification Code (Invia codice di verifica). È selezionato un menu a discesa che mostra il codice telefonico e il codice di posta elettronica.

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

Screenshot che mostra la pagina di verifica dell'app ASP.NET per 2FA. Sotto un codice di esempio, è evidenziata una casella di controllo con Memorizza questo browser.

Facendo clic sulla casella di controllo Memorizza questo browser, sarai esonerato dall'uso di 2FA (autenticazione a due fattori) per accedere quando utilizzi il browser e il dispositivo in cui hai selezionato la casella. Finché gli utenti malintenzionati non possono accedere al tuo dispositivo, abilitare l'autenticazione a due fattori (2FA) e fare clic su Ricorda questo browser ti fornirà un accesso semplificato tramite password, mantenendo comunque una protezione 2FA robusta per tutti gli accessi da dispositivi non attendibili. È possibile eseguire questa operazione su qualsiasi dispositivo privato usato regolarmente.

Questa esercitazione offre un'introduzione rapida all'abilitazione di 2FA in una nuova app MVC ASP.NET. La mia esercitazione sull'autenticazione a due fattori tramite SMS e email con ASP.NET Identity illustra in dettaglio il codice sottostante l'esempio fornito.

Risorse aggiuntive