Créer une application Web Forms ASP.NET avec authentification à deux facteurs par SMS (C#)

Article
06/16/2023

Télécharger ASP.NET Web Forms Application avec authentification Email et SMS Two-Factor

Ce tutoriel vous montre comment créer une application ASP.NET Web Forms avec l’authentification Two-Factor. Ce tutoriel a été conçu pour compléter le didacticiel intitulé Créer une application ASP.NET Web Forms sécurisée avec l’inscription de l’utilisateur, la confirmation par e-mail et la réinitialisation de mot de passe. En outre, ce tutoriel était basé sur le didacticiel MVC de Rick Anderson.

Introduction

Ce tutoriel vous guide tout au long des étapes requises pour créer une application ASP.NET Web Forms qui prend en charge l’authentification Two-Factor à l’aide de Visual Studio. Two-Factor l’authentification est une étape d’authentification utilisateur supplémentaire. Cette étape supplémentaire génère un numéro d’identification personnel (PIN) unique lors de la connexion. Le code confidentiel est généralement envoyé à l’utilisateur sous la forme d’un e-mail ou d’un SMS. L’utilisateur de votre application entre ensuite le code confidentiel comme mesure d’authentification supplémentaire lors de la connexion.

Tâches et informations du tutoriel :

Créer une application ASP.NET Web Forms
Configurer l’authentification PAR SMS et Two-Factor
Activer l’authentification Two-Factor pour l’utilisateur inscrit
Ressources supplémentaires

Créer une application ASP.NET Web Forms

Commencez par installer et exécuter Visual Studio Express 2013 pour le web ou Visual Studio 2013. Installez également Visual Studio 2013 Update 3 ou version ultérieure. En outre, vous devez créer un compte Twilio , comme expliqué ci-dessous.

Notes

Important : vous devez installer Visual Studio 2013 Update 3 ou version ultérieure pour suivre ce didacticiel.

Créez un projet (Fichier ->Nouveau projet) et sélectionnez le modèle d’application web ASP.NET avec le .NET Framework version 4.5.2 dans la boîte de dialogue Nouveau projet .
Dans la boîte de dialogue Nouveau projet ASP.NET, sélectionnez le modèle Web Forms. Laissez l’authentification par défaut comptes d’utilisateur individuels. Cliquez ensuite sur OK pour créer le projet.
Activez SSL (Secure Sockets Layer) pour le projet. Suivez les étapes disponibles dans la section Activer SSL pour le projet de la série de didacticiels Prise en main avec Web Forms.
Dans Visual Studio, ouvrez la console du Gestionnaire de package (Outils ->Gestionnaire de package NuGet ->Console du Gestionnaire de package), puis entrez la commande suivante :
Install-Package Twilio

Configurer l’authentification PAR SMS et Two-Factor

Ce tutoriel utilise Twilio, mais vous pouvez utiliser n’importe quel fournisseur SMS.

Créez un compte Twilio .
Sous l’onglet Tableau de bord de votre compte Twilio, copiez le SID de compte et le jeton d’authentification. Vous les ajouterez ultérieurement à votre application.
Sous l’onglet Nombres , copiez également votre numéro de téléphone Twilio.
Rendez le SID du compte Twilio, le jeton d’authentification et le numéro de téléphone disponibles pour l’application. Pour simplifier les choses, vous allez stocker ces valeurs dans le fichier web.config . Lorsque vous effectuez un déploiement sur Azure, vous pouvez stocker les valeurs en toute sécurité dans la section appSettings de l’onglet configurer du site web. En outre, lors de l’ajout du numéro de téléphone, utilisez uniquement des numéros.
Notez que vous pouvez également ajouter des informations d’identification SendGrid. SendGrid est un service de notification par e-mail. Pour plus d’informations sur l’activation de SendGrid, consultez la section « Hook Up SendGrid » du didacticiel intitulé Créer une application ASP.NET Web Forms sécurisée avec inscription de l’utilisateur, confirmation par e-mail et réinitialisation de mot de passe.
```
</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>
```
Avertissement

Sécurité : ne stockez jamais de données sensibles dans votre code source. Dans cet exemple, le compte et les informations d’identification sont stockés dans la section appSettings du fichier Web.config . Sur Azure, vous pouvez stocker ces valeurs en toute sécurité sous l’onglet Configurer dans le Portail Azure. Pour plus d’informations, consultez la rubrique de Rick Anderson intitulée Meilleures pratiques pour le déploiement de mots de passe et d’autres données sensibles sur ASP.NET et Azure.

Configurez la SmsService classe dans le fichier App_Start\IdentityConfig.cs en mettant en surbrillance les modifications suivantes en jaune :

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);
    }
}

Ajoutez les instructions suivantes using au début du fichier IdentityConfig.cs :

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

Mettez à jour le fichier Account/Manage.aspx en supprimant les lignes mises en surbrillance en jaune :

<%@ 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>

Dans le Page_Load gestionnaire du code-behind Manage.aspx.cs , supprimez les marques de commentaire de la ligne de code mise en surbrillance en jaune afin qu’elle apparaisse comme suit :

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);
        }
    }
}

Dans le codebehind de Account/TwoFactorAuthenticationSignIn.aspx.cs, mettez à jour le Page_Load gestionnaire en ajoutant le code suivant mis en surbrillance en jaune :
```
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();
    }
}
```
En modifiant le code ci-dessus, la liste déroulante « Providers » contenant les options d’authentification ne sera pas réinitialisée à la première valeur. Cela permet à l’utilisateur de sélectionner avec succès toutes les options à utiliser lors de l’authentification, pas seulement la première.
Dans Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx et sélectionnez Définir comme page de démarrage.
En testant votre application, commencez par générer l’application (Ctrl+Maj+B), puis exécutez l’application (F5), puis sélectionnez Inscrire pour créer un compte d’utilisateur ou sélectionnez Se connecter si le compte d’utilisateur a déjà été inscrit.
Une fois que vous (en tant qu’utilisateur) êtes connecté, cliquez sur l’ID d’utilisateur (adresse e-mail) dans la barre de navigation pour afficher la page Gérer le compte (Manage.aspx).
Cliquez sur Ajouter en regard de Numéro de téléphone dans la page Gérer le compte .
Ajoutez le numéro de téléphone où vous (en tant qu’utilisateur) souhaitez recevoir des SMS (SMS), puis cliquez sur le bouton Envoyer .

À ce stade, l’application utilise les informations d’identification du Web.config pour contacter Twilio. Un SMS (SMS) sera envoyé au téléphone associé au compte d’utilisateur. Vous pouvez vérifier que le message Twilio a été envoyé en consultant le tableau de bord Twilio.
En quelques secondes, le téléphone associé au compte d’utilisateur recevra un sms contenant le code de vérification. Entrez le code de vérification et appuyez sur Envoyer.

Activer l’authentification Two-Factor pour un utilisateur inscrit

À ce stade, vous avez activé l’authentification à deux facteurs pour votre application. Pour qu’un utilisateur utilise l’authentification à deux facteurs, il peut simplement modifier ses paramètres à l’aide de l’interface utilisateur.

En tant qu’utilisateur de votre application, vous pouvez activer l’authentification à deux facteurs pour votre compte spécifique en cliquant sur l’ID utilisateur (alias de messagerie) dans la barre de navigation pour afficher la page Gérer le compte . Cliquez ensuite sur le lien Activer pour activer l’authentification à deux facteurs pour le compte.
Déconnectez-vous, puis reconnectez-vous. Si vous avez activé la messagerie, vous pouvez sélectionner sms ou e-mail pour l’authentification à deux facteurs. Si vous n’avez pas activé la messagerie électronique, consultez le tutoriel intitulé Créer une application ASP.NET Web Forms sécurisée avec l’inscription de l’utilisateur, Email confirmation et réinitialisation du mot de passe.
La page Authentification Two-Factor s’affiche dans laquelle vous pouvez entrer le code (à partir d’un SMS ou d’un e-mail).
Si vous cliquez sur la case Mémoriser ce navigateur case activée, vous n’avez pas besoin d’utiliser l’authentification à deux facteurs pour vous connecter lorsque vous utilisez le navigateur et l’appareil sur lesquels vous avez coché la case. Tant que les utilisateurs malveillants ne peuvent pas accéder à votre appareil, l’activation de l’authentification à deux facteurs et le fait de cliquer sur Mémoriser ce navigateur vous fourniront un accès pratique par mot de passe en une seule étape, tout en conservant une protection forte d’authentification à deux facteurs pour tous les accès à partir d’appareils non approuvés. Vous pouvez le faire sur n’importe quel appareil privé que vous utilisez régulièrement.

Partager via