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

È consigliabile usare l'opzione di autenticazione sicura più sicura. Per le app .NET distribuite in Azure, vedere:

Azure Key Vault e .NET Aspirare offrono il modo più sicuro per archiviare e recuperare i segreti. Azure Key Vault è un servizio cloud che protegge le chiavi di crittografia e i segreti, ad esempio certificati, stringhe di connessione e password. Per .NET Aspire, vedere Comunicazione sicura tra le integrazioni di hosting e client.

Evitare l'autorizzazione con credenziali di password del proprietario della risorsa perché:

  • Espone la password dell'utente al client.
  • È un rischio significativo per la sicurezza.
  • Deve essere usato solo quando altri flussi di autenticazione non sono possibili.

Quando l'app viene distribuita in un server di test, è possibile usare una variabile di ambiente per impostare la stringa di connessione su un server di database di test. Le variabili di ambiente vengono in genere archiviate in testo normale e non crittografato. Se il computer o il processo è compromesso, è possibile accedere alle variabili di ambiente da parti non attendibili. Si sconsiglia di utilizzare le variabili di ambiente per archiviare una stringa di connessione di produzione, in quanto non è l'approccio più sicuro.

Linee guida per i dati di configurazione:

  • Non archiviare mai password o altri dati sensibili nel codice del provider di configurazione o nei file di configurazione di testo normale.
  • Non usare segreti di produzione in ambienti di sviluppo o test.
  • Specificare informazioni riservate fuori dal progetto in modo che non possano essere accidentalmente sottoposte a commit in un repository di codice sorgente.

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. Trasferimento delle credenziali del provider SMS nell'app

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.

[!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. 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
    }
}

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

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

  4. Eseguire l'app e accedere con l'account registrato in precedenza.

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

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

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

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

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