Créer une application Web Forms ASP.NET avec l’authentification par SMS Two-Factor (C#)

2025-01-08

Ce tutoriel vous montre comment créer une application ASP.NET Web Forms avec l’authentification Two-Factor. Ce didacticiel a été conçu pour compléter le didacticiel intitulé Créer une application Web Forms sécurisée ASP.NET avec l’inscription de l’utilisateur, la confirmation par e-mail et la réinitialisation du 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 Web Forms ASP.NET qui prend en charge Two-Factor Authentication à l’aide de Visual Studio. Two-Factor L’authentification est une étape supplémentaire d’authentification utilisateur. Cette étape supplémentaire génère un numéro d’identification personnel (PIN) unique pendant la connexion. Le code confidentiel est généralement envoyé à l’utilisateur en tant qu’e-mail ou 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 didacticiel :

Créer une application ASP.NET Web Forms
Configurer l'authentification par SMS et à deux facteurs
Activer l'authentification à deux facteurs pour les utilisateurs enregistrés
ressources supplémentaires

Créer une application Web Forms ASP.NET

Commencez par installer et exécuter Visual Studio Express 2013 pour 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.

Remarque

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

Créez un projet (File ->New Project) et sélectionnez le modèle ASP.NET Application web avec .NET Framework version 4.5.2 dans la boîte de dialogue Nouveau projet.
Dans la boîte de dialogue Nouveau ASP.NET Projet, sélectionnez le modèle Web Forms. Laissez l'authentification par défaut en tant que 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 de Web Forms.
Dans Visual Studio, ouvrez la console du gestionnaire de packages (Tools ->NuGet Package Manger ->Package Manager Console), et entrez la commande suivante :
Install-Package Twilio

Configurer SMS et authentification Two-Factor

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

Créez un compte Twilio.
À partir de l’onglet tableau de bord de votre compte Twilio, copiez le SID du compte et le jeton d’authentification . Vous les ajouterez ultérieurement à votre application.
Depuis l'onglet Numéros, copiez également votre numéro de téléphone Twilio .
Mettez le SID du compte Twilio, le jeton d'authentification et le numéro de téléphone à la disposition de 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 sous l’onglet Configurer le 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 Web Forms sécurisée ASP.NET avec l’inscription de l’utilisateur, la confirmation par e-mail et la réinitialisation du 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 classe SmsService 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 using suivantes au début du fichier IdentityConfig.cs :

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

Mettez à jour le fichier compte/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 gestionnaire Page_Load du code-behind Manage.aspx.cs, décommentez la ligne de code surlignée en jaune de manière à ce 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 gestionnaire en ajoutant le code suivant surligné 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 « Fournisseurs » contenant les options d’authentification ne sera pas réinitialisée à la première valeur. Cela permet à l’utilisateur de sélectionner correctement toutes les options à utiliser lors de l’authentification, pas seulement la première.
Dans l'explorateur de solutions, cliquez avec le bouton droit de la souris sur Default.aspx et sélectionnez Set As Start Page (Définir comme page de démarrage).
En testant votre application, commencez par compiler l'application (Ctrl+Shift+B), puis exécutez l'application (F5) et sélectionnez S'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 avez connecté (en tant qu’utilisateur), 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 sur la page Gérer le compte.
Ajoutez le numéro de téléphone auquel vous (en tant qu'utilisateur) souhaitez recevoir des SMS (messages textuels) et cliquez sur le bouton Soumettre.

À ce stade, l’application utilise les informations d’identification du Web.config pour contacter Twilio. Un sms (sms) est 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 obtient 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 d’e-mail) 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é l’e-mail, vous pouvez sélectionner sms ou e-mail pour l’authentification à deux facteurs. Si vous n’avez pas activé l’e-mail, consultez le didacticiel intitulé Créer une application Web Forms sécurisée ASP.NET avec l’inscription de l’utilisateur, la confirmation par e-mail et la réinitialisation du mot de passe.
La page d’authentification Two-Factor s’affiche dans laquelle vous pouvez entrer le code (à partir du SMS ou de l’e-mail).
En cochant la case Mémoriser ce navigateur, vous serez dispensé de devoir 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, en activant l’authentification à deux facteurs et en cliquant sur l'Mémoriser ce navigateur vous fournirez 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

Créer une application Web Forms ASP.NET avec l’authentification par SMS Two-Factor (C#)

Introduction

Tâches et informations du didacticiel :

Créer une application Web Forms ASP.NET

Configurer SMS et authentification Two-Factor

Activer l’authentification Two-Factor pour un utilisateur inscrit

Ressources additionnelles

Commentaires

Ressources supplémentaires