Creare un'app Web Forms ASP.NET con l'autenticazione a due fattori SMS (C#)

Articolo
06/16/2023

Scaricare Web Forms ASP.NET'app con Email e sms Two-Factor autenticazione

Questa esercitazione illustra come creare un'app Web Forms ASP.NET con Two-Factor Autenticazione. Questa esercitazione è stata progettata per integrare l'esercitazione intitolata Creare un'app sicura Web Forms ASP.NET con registrazione utente, conferma e reimpostazione della password. Questa esercitazione è stata inoltre basata sull'esercitazione MVC di Rick Anderson.

Introduzione

Questa esercitazione illustra i passaggi necessari per creare un'applicazione Web Forms ASP.NET che supporta l'autenticazione Two-Factor tramite Visual Studio. Two-Factor Autenticazione è un passaggio di autenticazione utente aggiuntivo. Questo passaggio aggiuntivo genera un numero di identificazione personale univoco (PIN) durante l'accesso. Il PIN viene comunemente 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 dell'esercitazione:

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

Creare un'app Web Forms ASP.NET

Iniziare installando ed eseguendo Visual Studio Express 2013 per Web o Visual Studio 2013. Installare anche Visual Studio 2013 Update 3 o versione successiva. Sarà anche necessario creare un account Twilio , come illustrato di seguito.

Nota

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

Creare un nuovo progetto (File ->Nuovo progetto) e selezionare il modello di applicazione Web ASP.NET insieme a .NET Framework versione 4.5.2 dalla finestra di dialogo Nuovo progetto .
Nella finestra di dialogo Nuovo ASP.NET progetto selezionare il modello di Web Forms. Lasciare l'autenticazione predefinita come singoli account utente. Fare quindi clic su OK per creare il nuovo progetto.
Abilitare Secure Sockets Layer (SSL) per il progetto. Seguire i passaggi disponibili nella sezione Abilita SSL per il progetto della Introduzione con Web Forms serie di esercitazioni.
In Visual Studio aprire la console di Gestione pacchetti (Strumenti -NuGet Package Manger ->>Package Manager Console) e immettere il comando seguente:
Install-Package Twilio

Configurare SMS e autenticazione Two-Factor

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

Creare un account Twilio .
Nella scheda Dashboard dell'account Twilio copiare il SID account e il token di autenticazione. Verranno aggiunti all'app in un secondo momento.
Nella scheda Numeri copiare anche il numero di telefono Twilio.
Rendere il SID dell'account Twilio, il token di autenticazione e il numero di telefono disponibili per l'app. Per mantenere semplici gli elementi, questi valori verranno archiviati nel file web.config . Quando si distribuisce in Azure, è possibile archiviare i valori in modo sicuro nella sezione appSettings nella scheda configurazione del sito Web. Inoltre, quando si aggiunge il numero di telefono, usare solo i 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 di Web Forms ASP.NET sicura con registrazione utente, conferma e reimpostazione della password.
```
</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>
```
Avviso

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 nella 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 SmsService classe 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 seguenti using 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>

Page_Load Nel gestore del code-behind Manage.aspx.cs annullare ilcommentamento della riga di codice evidenziato in giallo in modo che venga visualizzato come indicato di seguito:

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 dell'account/TwoFactorAuthenticationSignIn.aspx.cs aggiornare il gestore aggiungendo il Page_Load codice seguente evidenziato in giallo:

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 "Provider" contenente le opzioni di autenticazione non verrà reimpostato al 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 scegliere Imposta come pagina iniziale.
Testando l'app, compilare prima l'app (CTRL+MAIUSC+B) e quindi eseguire l'app (F5) e selezionare Registra per creare un nuovo account utente o selezionare Accedi se l'account utente è già stato registrato.
Dopo aver eseguito l'accesso (come utente), fare clic sull'ID utente (indirizzo di posta elettronica) nella barra di spostamento per visualizzare la pagina Gestisci account (Manage.aspx).
Fare clic su Aggiungi accanto al numero di telefono nella pagina Gestisci account .
Aggiungere il numero di telefono in cui si vuole ricevere messaggi SMS (messaggi di testo) e fare clic sul pulsante Invia .

A questo punto, l'app userà le credenziali del Web.config per contattare Twilio. Un messaggio SMS (messaggio di testo) verrà inviato al telefono associato all'account utente. È possibile verificare che il messaggio Twilio sia stato inviato visualizzando il dashboard Twilio.
In pochi secondi, il telefono associato all'account utente riceverà un messaggio di testo 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 dell'app è possibile abilitare l'autenticazione a due fattori per l'account specifico facendo clic sull'ID utente (alias di posta elettronica) nella barra di spostamento per visualizzare la pagina Gestisci account . Fare quindi clic sul collegamento Abilita per abilitare l'autenticazione a due fattori per l'account.
Disconnettersi, quindi accedere nuovamente. Se è stato abilitato il messaggio di posta elettronica, è possibile selezionare SMS o posta elettronica per l'autenticazione a due fattori. Se non è stato abilitato il messaggio di posta elettronica, vedere l'esercitazione intitolata Creare un'app sicura Web Forms ASP.NET con registrazione utente, Email Conferma e reimpostazione della password.
Viene visualizzata la pagina di autenticazione Two-Factor in cui è possibile immettere il codice (da SMS o posta elettronica).
Facendo clic sulla casella di controllo Ricorda questo browser , è necessario usare l'autenticazione a due fattori per accedere quando si usa il browser e il dispositivo in cui è stata selezionata la casella. Purché gli utenti malintenzionati non possano accedere al dispositivo, abilitare l'autenticazione a due fattori e fare clic su Ricorda questo browser offre un accesso pratico alla password di un passaggio, mantenendo comunque una protezione avanzata di autenticazione a due fattori per tutti gli accessi da dispositivi non attendibili. È possibile eseguire questa operazione in qualsiasi dispositivo privato usato regolarmente.