Creare un'app ASP.NET Web Forms con l'autenticazione SMS Two-Factor (C#)

Articolo
01/06/2025

Questa esercitazione illustra come creare un'app Web Form ASP.NET con autenticazione Two-Factor. Questa esercitazione è stata progettata per integrare l'esercitazione intitolata Creare un'app Web Form sicura ASP.NET con registrazione utente, conferma tramite posta elettronica e reimpostazione della password. Inoltre, questa esercitazione è basata sull'esercitazione MVC di Rick Anderson.

Introduzione

Questa esercitazione illustra i passaggi necessari per creare un'applicazione Web Form ASP.NET che supporta l'autenticazione Two-Factor con Visual Studio. Two-Factor L'autenticazione è un passaggio aggiuntivo per l'autenticazione dell'utente. Questo passaggio aggiuntivo genera un numero di identificazione personale univoco (PIN) durante l'accesso. Il PIN viene in genere inviato all'utente come messaggio di posta elettronica o SMS. L'utente dell'app immette quindi il PIN come misura di autenticazione aggiuntiva durante l'accesso.

Attività e informazioni del tutorial:

Creare un'app Web Forms ASP.NET
Configurare SMS e Two-Factor Autenticazione
Abilitare Two-Factor autenticazione per utente registrato
Risorse Aggiuntive

Creare un'app ASP.NET Web Forms

Per iniziare, installare ed eseguire Visual Studio Express 2013 Web o Visual Studio 2013. Installare anche Visual Studio 2013 Update 3 o versione successiva. Inoltre, sarà necessario creare un account Twilio, come illustrato di seguito.

Nota

Importante: è necessario installare Visual Studio 2013 Update 3 o versione successiva per completare questo tutorial.

Creare un nuovo progetto (File ->Nuovo progetto) e selezionare il modello ASP.NET Web Application insieme a .NET Framework versione 4.5.2 nella finestra di dialogo Nuovo progetto.
Dalla finestra di dialogo Nuovo progetto ASP.NET, selezionare il modello Web Forms. Lasciare l'autenticazione predefinita come Account utente individuali. Fare quindi clic su OK per creare il nuovo progetto.
Abilitare Secure Sockets Layer (SSL) per il progetto. Seguire i passaggi disponibili nella sezione Abilitare SSL per il Progetto della serie di esercitazioni Introduzione a Web Form.
In Visual Studio aprire console di Gestione pacchetti di ( strumenti di -gestione pacchetti NuGet -console di Gestione pacchetti ) e immettere il comando seguente:
Install-Package Twilio

Configurare SMS e autenticazione Two-Factor

Questa esercitazione usa Twilio, ma è possibile usare qualsiasi provider SMS.

Crea un account Twilio.
Nella scheda dashboard di dell'account Twilio copiare il SID account e token di autenticazione. Verranno aggiunti all'app in un secondo momento.
Nella scheda Numeri copiare anche il numero di telefono di Twilio .
Rendere il SID dell'account twilio , token di autenticazione e numero di telefono disponibile per l'app. Per semplificare, questi valori verranno archiviati nel file web.config. Quando si esegue la distribuzione in Azure, è possibile archiviare i valori in modo sicuro nella sezione appSettings della scheda di configurazione del sito Web. Inoltre, quando si aggiunge il numero di telefono, usare solo numeri.
Si noti che è anche possibile aggiungere credenziali SendGrid. SendGrid è un servizio di notifica tramite posta elettronica. Per informazioni dettagliate su come abilitare SendGrid, vedere la sezione "Hook Up SendGrid" dell'esercitazione intitolata Creare un'app Web Form sicura ASP.NET con registrazione utente, conferma e reimpostazione della password tramite posta elettronica.
```
</connectionStrings>
  <appSettings>
        
    <add key="emailServiceUserName" value="[EmailServiceAccountUserName]" />
    <add key="emailServicePassword" value="[EmailServiceAccountPassword]" />
    
    <add key="SMSSID" value="[SMSServiceAccountSID]" />
    <add key="SMSAuthToken" value="[SMSServiceAuthorizationToken]" />
    <add key="SMSPhoneNumber" value="+[SMSPhoneNumber]" />    
  </appSettings>
  <system.web>
```
Avvertimento

Sicurezza: non archiviare mai i dati sensibili nel codice sorgente. In questo esempio, l'account e le credenziali vengono archiviati nella sezione appSettings del file Web.config. In Azure è possibile archiviare questi valori in modo sicuro nella scheda Configura nel portale di Azure. Per informazioni correlate, vedere l'argomento di Rick Anderson intitolato Procedure consigliate per la distribuzione di password e altri dati sensibili in ASP.NET e Azure.

Configurare la classe SmsService nel file App_Start\IdentityConfig.cs apportando le modifiche seguenti evidenziate in giallo:

public class SmsService : IIdentityMessageService
{
    public Task SendAsync(IdentityMessage message)
    {
        var Twilio = new TwilioRestClient(
           ConfigurationManager.AppSettings["SMSSID"],
           ConfigurationManager.AppSettings["SMSAuthToken"]
        );
        var result = Twilio.SendMessage(
            ConfigurationManager.AppSettings["SMSPhoneNumber"],
           message.Destination, message.Body);

        // Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
        Trace.TraceInformation(result.Status);

        // Twilio doesn't currently have an async API, so return success.
        return Task.FromResult(0);
    }
}

Aggiungere le istruzioni using seguenti all'inizio del file IdentityConfig.cs:

using Twilio;
using System.Net;
using System.Configuration;
using System.Diagnostics;

Aggiornare il file Account/Manage.aspx rimuovendo le righe evidenziate in giallo:

<%@ Page Title="Manage Account" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Manage.aspx.cs" Inherits="WebFormsTwoFactor.Account.Manage" %>

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>

    <div>
        <asp:PlaceHolder runat="server" ID="successMessage" Visible="false" ViewStateMode="Disabled">
            <p class="text-success"><%: SuccessMessage %></p>
        </asp:PlaceHolder>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-horizontal">
                <h4>Change your account settings</h4>
                <hr />
                <dl class="dl-horizontal">
                    <dt>Password:</dt>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Change]" Visible="false" ID="ChangePassword" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Create]" Visible="false" ID="CreatePassword" runat="server" />
                    </dd>
                    <dt>External Logins:</dt>
                    <dd><%: LoginsCount %>
                        <asp:HyperLink NavigateUrl="/Account/ManageLogins" Text="[Manage]" runat="server" />

                    </dd>
                    <%--
                        Phone Numbers can used as a second factor of verification in a two-factor authentication system.
                        See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                        for details on setting up this ASP.NET application to support two-factor authentication using SMS.
                        Uncomment the following block after you have set up two-factor authentication
                    --%>

                    <dt>Phone Number:</dt>
                    <%--
                    <% if (HasPhoneNumber)
                       { %>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Add]" />
                    </dd>
                    <% }
                       else
                       { %>
                    <dd>
                        <asp:Label Text="" ID="PhoneNumber" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Change]" /> &nbsp;|&nbsp;
                        <asp:LinkButton Text="[Remove]" OnClick="RemovePhone_Click" runat="server" />
                    </dd>
                    <% } %>
                    --%>

                    <dt>Two-Factor Authentication:</dt>
                    <dd>
                        <p>
                            There are no two-factor authentication providers configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                            for details on setting up this ASP.NET application to support two-factor authentication.
                        </p>
                        <% if (TwoFactorEnabled)
                          { %> 
                        <%--
                        Enabled
                        <asp:LinkButton Text="[Disable]" runat="server" CommandArgument="false" OnClick="TwoFactorDisable_Click" />
                        --%>
                        <% }
                          else
                          { %> 
                        <%--
                        Disabled
                        <asp:LinkButton Text="[Enable]" CommandArgument="true" OnClick="TwoFactorEnable_Click" runat="server" />
                        --%>
                        <% } %>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</asp:Content>

Nel gestore Page_Load del code-behind Manage.aspx.cs, decommentare la riga di codice evidenziata in giallo in modo che appaia come segue:

protected void Page_Load()
{
    var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();

    HasPhoneNumber = String.IsNullOrEmpty(manager.GetPhoneNumber(User.Identity.GetUserId()));

    // Enable this after setting up two-factor authentientication
    PhoneNumber.Text = manager.GetPhoneNumber(User.Identity.GetUserId()) ?? String.Empty;

    TwoFactorEnabled = manager.GetTwoFactorEnabled(User.Identity.GetUserId());

    LoginsCount = manager.GetLogins(User.Identity.GetUserId()).Count;

    var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;

    if (!IsPostBack)
    {
        // Determine the sections to render
        if (HasPassword(manager))
        {
            ChangePassword.Visible = true;
        }
        else
        {
            CreatePassword.Visible = true;
            ChangePassword.Visible = false;
        }

        // Render success message
        var message = Request.QueryString["m"];
        if (message != null)
        {
            // Strip the query string from action
            Form.Action = ResolveUrl("~/Account/Manage");

            SuccessMessage =
                message == "ChangePwdSuccess" ? "Your password has been changed."
                : message == "SetPwdSuccess" ? "Your password has been set."
                : message == "RemoveLoginSuccess" ? "The account was removed."
                : message == "AddPhoneNumberSuccess" ? "Phone number has been added"
                : message == "RemovePhoneNumberSuccess" ? "Phone number was removed"
                : String.Empty;
            successMessage.Visible = !String.IsNullOrEmpty(SuccessMessage);
        }
    }
}

Nel codebehind di Account/TwoFactorAuthenticationSignIn.aspx.cs, aggiornare il gestore Page_Load aggiungendo il codice evidenziato in giallo seguente:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var userId = signinManager.GetVerifiedUserId<ApplicationUser, string>();
        if (userId == null)
        {
            Response.Redirect("/Account/Error", true);
        }
        var userFactors = manager.GetValidTwoFactorProviders(userId);
        Providers.DataSource = userFactors.Select(x => x).ToList();
        Providers.DataBind();
    }
}

Apportando la modifica del codice precedente, l'elenco a discesa "Providers" contenente le opzioni di autenticazione non verrà reimpostato sul primo valore. Ciò consentirà all'utente di selezionare correttamente tutte le opzioni da usare durante l'autenticazione, non solo il primo.

In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx e selezionare Imposta come pagina iniziale.
Per testare l'app, compila prima l'app (Ctrl+Shift+B) e poi esegui l'app (F5) e seleziona Registra per creare un nuovo account utente o seleziona Accedi se l'account utente è già stato registrato.
** Dopo aver effettuato l'accesso come utente, cliccare sull'ID utente (indirizzo di posta elettronica) nella barra di navigazione per visualizzare la pagina Gestisci account (Manage.aspx).
Fare clic su Aggiungi accanto a Numero di Telefono nella pagina Gestisci Account.
Aggiungi il numero di telefono al quale desideri ricevere messaggi SMS (messaggi di testo) come utente e fai clic sul pulsante Invia.

A questo punto, l'app userà le credenziali del Web.config per contattare Twilio. Verrà inviato un SMS (SMS) al telefono associato all'account utente. È possibile verificare che il messaggio Twilio sia stato inviato visualizzando il dashboard di Twilio.
In pochi secondi, il telefono associato all'account utente riceverà un SMS contenente il codice di verifica. Immettere il codice di verifica e premere Invia.

Abilitare l'autenticazione Two-Factor per un utente registrato

A questo punto, è stata abilitata l'autenticazione a due fattori per l'app. Per consentire a un utente di usare l'autenticazione a due fattori, è sufficiente modificare le impostazioni usando l'interfaccia utente.

Come utente della tua app puoi abilitare l'autenticazione a due fattori per il tuo account specifico facendo clic sull'ID utente (alias di posta elettronica) nella barra di navigazione per visualizzare la pagina Gestisci account. Fare quindi clic sul collegamento Abilita per abilitare l'autenticazione a due fattori per l'account.
Disconnettiti, quindi accedi di nuovo. Se è stata abilitata la posta elettronica, è possibile selezionare SMS o posta elettronica per l'autenticazione a due fattori. Se non è stata abilitata la posta elettronica, vedere l'esercitazione intitolata Creare un'app Web Form sicura ASP.NET con registrazione utente, conferma tramite posta elettronica e reimpostazione della password.
Viene visualizzata la pagina autenticazione Two-Factor in cui è possibile immettere il codice (da SMS o posta elettronica).
Facendo clic sulla casella di controllo Memorizza il browser non sarà necessario usare l'autenticazione a due fattori per accedere quando si usa il browser e il dispositivo in cui è stata selezionata la casella. A condizione che gli utenti malintenzionati non possano accedere al dispositivo, abilitando l'autenticazione a due fattori e facendo clic sul ricordare che questo browser fornirà un comodo accesso con password in un passaggio, mantenendo comunque una protezione avanzata dell'autenticazione a due fattori per tutti gli accessi da dispositivi non attendibili. È possibile eseguire questa operazione su qualsiasi dispositivo privato usato regolarmente.

Condividi tramite