Application ASP.NET MVC 5 avec authentification à deux facteurs par SMS et e-mail

2025-02-10

Ce tutoriel vous montre comment créer une application web ASP.NET MVC 5 avec l’authentification à deux facteurs. Vous devriez compléter Créer une application web ASP.NET MVC 5 sécurisée avec connexion, confirmation par e-mail et réinitialisation de mot de passe avant de continuer. Vous pouvez télécharger l’application complétée ici. Le téléchargement contient des outils de débogage qui vous permettent de tester la confirmation par e-mail et SMS sans configurer de fournisseur d’e-mails ou de SMS.

Ce tutoriel a été écrit par Rick Anderson (Twitter : @RickAndMSFT).

Créer une application ASP.NET MVC
Configurer l’authentification à deux facteurs par SMS
Activer l’authentification à deux facteurs
Ressources supplémentaires

Créer une application ASP.NET MVC

Commencez par installer et exécuter Visual Studio Express 2013 pour le web ou version ultérieure.

Remarque

Avertissement : Vous devez compléter Créer une application web ASP.NET MVC 5 sécurisée avec connexion, confirmation par e-mail et réinitialisation de mot de passe avant de continuer. Vous devez installer Visual Studio 2013 Update 3 ou version ultérieure pour suivre ce tutoriel.

Créez un projet web ASP.NET et sélectionnez le modèle MVC. Web Forms prend également en charge ASP.NET Identity. Vous pouvez donc suivre des étapes similaires dans une application de formulaires web.
Laissez l'authentification par défaut en tant que comptes d'utilisateur individuels. Si vous souhaitez héberger l’application dans Azure, laissez la case cochée. Plus tard dans le tutoriel, nous déploierons sur Azure. Vous pouvez ouvrir un compte Azure gratuitement.
Définissez le projet pour utiliser SSL.

Configurer l’authentification à deux facteurs par SMS

Ce tutoriel fournit des instructions sur l’utilisation de Twilio ou ASPSMS, mais vous pouvez utiliser n’importe quel autre fournisseur de SMS.

Création d’un compte d’utilisateur avec un fournisseur de SMS

Créez un compte Twilio ou ASPSMS.
Installation de packages supplémentaires ou ajout de références de service

Twilio :
Dans la Console du gestionnaire de package, entrez la commande suivante :
Install-Package Twilio

ASPSMS :
La référence de service suivante doit être ajoutée :

Adresse :
https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

Espace de noms :
ASPSMSX2
Déterminer les informations d’identification utilisateur du fournisseur de SMS

Nous vous recommandons d’utiliser l’option d’authentification sécurisée la plus sécurisée. Pour les applications .NET déployées sur Azure, consultez :

Azure Key Vault et .NET Aspire offrent le moyen le plus sécurisé de stocker et de récupérer des secrets. Azure Key Vault est un service cloud qui protège les clés et secrets de chiffrement comme les certificats, chaînes de connexion et mots de passe. Pour .NET Aspire, consultez Communication sécurisée entre l’hébergement et les intégrations clientes.

Évitez l'octroi de justificatifs de mot de passe du propriétaire des ressources car il :

expose le mot de passe de l’utilisateur au client,
constitue un risque de sécurité important,
doit être utilisé uniquement lorsque les autres flux d’authentification sont impossibles.

Quand l’application est déployée sur un serveur de test, une variable d’environnement peut être utilisée pour définir la chaîne de connexion à un serveur de base de données de test. Les variables d’environnement sont généralement stockées en texte brut non crypté. Si la machine ou le processus est compromis, les variables d’environnement peuvent être consultées par des tiers non approuvés. Nous déconseillons d’utiliser des variables d’environnement pour stocker une chaîne de connexion en production, car ce n’est pas l’approche la plus sécurisée.

Instructions relatives aux données de configuration :

Ne stockez jamais des mots de passe ou d’autres données sensibles dans le code du fournisseur de configuration ou dans les fichiers de configuration en texte clair.
N’utilisez aucun secret de production dans les environnements de développement ou de test.
Spécifiez les secrets en dehors du projet afin qu’ils ne puissent pas être validés par inadvertance dans un référentiel de code source.

Twilio :
À partir de l'onglet Tableau de bord de votre compte Twilio, copiez le SID de compte et le jeton d'authentification .

ASPSMS :
À partir des paramètres de votre compte, accédez à Userkey et copiez-le avec votre mot de passe autodéfini .

Nous stockerons plus tard ces valeurs dans le fichier web.config sous les clés "SMSAccountIdentification" et "SMSAccountPassword". 4. Spécification de SenderID/Expéditeur

Twilio :
Dans l’onglet Numéros, copiez votre numéro de téléphone Twilio.

ASPSMS :
Dans le menu Débloquer les expéditeurs, débloquez un ou plusieurs expéditeurs ou choisissez un expéditeur alphanumérique (non pris en charge par tous les réseaux).

Nous stockerons plus tard cette valeur dans le fichier web.config sous la clé "SMSAccountFrom". 5. Transfert des informations d’identification du fournisseur SMS dans l'application

Vous devez rendre les informations d’identification et le numéro de téléphone de l’expéditeur disponibles pour l’application. Pour simplifier les choses, nous allons stocker ces valeurs dans le fichier web.config. Lorsque nous déploierons sur Azure, nous pourrons stocker les valeurs en toute sécurité dans la section paramètres de l’application de l’onglet de configuration du site 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).

Mise en œuvre du transfert de données vers le fournisseur SMS

Configurez la classe SmsService dans le fichier App_Start\IdentityConfig.cs.

Selon le fournisseur de SMS utilisé, activez la section Twilio ou 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
    }
}

Mettez à jour la vue Razor Views\Manage\Index.cshtml : (remarque : n’enlevez pas simplement les commentaires dans le code existant, utilisez le code ci-dessous.)

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

Vérifiez que les méthodes d’action EnableTwoFactorAuthentication et DisableTwoFactorAuthentication dans le ManageController ont l’attribut [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");
}

Exécutez l’application et connectez-vous avec le compte que vous avez précédemment enregistré.
Cliquez sur votre ID utilisateur, ce qui active la méthode d’action Index dans le contrôleur Manage.
Cliquez sur Ajouter.
La méthode d’action AddPhoneNumber affiche une boîte de dialogue pour entrer un numéro de téléphone pouvant recevoir des SMS.
```
// GET: /Account/AddPhoneNumber
public ActionResult AddPhoneNumber()
{
   return View();
}
```
En quelques secondes, vous recevrez un SMS avec le code de vérification. Entrez ce code et appuyez sur Envoyer.
La vue Gérer indique que votre numéro de téléphone a été ajouté.

Activer l’authentification à deux facteurs

Dans l’application générée par le modèle, vous devez utiliser l’IU pour activer l’authentification à deux facteurs (2FA). Pour activer l’authentification 2FA, cliquez sur votre ID utilisateur (alias d’e-mail) dans la barre de navigation.

Capture d’écran affichant la page d’accueil de l’application ASP.NET. Un exemple d’ID UTILISATEUR est mis en surbrillance.

Cliquez sur Activer 2FA.

Capture d’écran montrant la page Paramètres du compte de l'application ASP.NET. Two-Factor Authentification : Désactivée, une section avec le lien Activer est mise en surbrillance.

Déconnectez-vous, puis reconnectez-vous. Si vous avez activé l’e-mail (voir mon tutoriel précédent), vous pouvez sélectionner l’option SMS ou e-mail pour l’authentification 2FA.

Capture d’écran montrant la page Envoyer le code de vérification d’une application ASP.NET. Un menu déroulant montrant le code téléphonique et le code de messagerie est sélectionné.

La page Vérifier le code s’affiche, dans laquelle vous pouvez entrer le code (provenant d’un SMS ou d’un e-mail).

Capture d’écran montrant la page de vérification de l'application ASP.NET pour 2FA. Au-dessous d'un exemple de code, une case à cocher avec

En cochant la case Mémoriser ce navigateur, vous serez exempté de l'utilisation de la 2FA pour vous connecter via ce navigateur et cet appareil. Tant que des utilisateurs malveillants ne peuvent pas accéder à votre appareil, activer la 2FA et cliquer sur se souvenir de ce navigateur vous offrira un accès par mot de passe en une étape pratique, tout en conservant une protection 2FA robuste pour tout accès depuis des appareils non fiables. Vous pouvez le faire sur n’importe quel appareil privé que vous utilisez régulièrement.

Ce tutoriel fournit une présentation rapide de l’activation de l’authentification 2FA sur une nouvelle application ASP.NET MVC. Mon tutoriel Authentification à deux facteurs par SMS et e-mail avec ASP.NET Identity décrit en détail le code derrière l’exemple.

Ressources supplémentaires

Authentification à deux facteurs par SMS et e-mail avec ASP.NET Identity décrit en détail l’authentification à deux facteurs.
Liens vers des ressources recommandées sur l'identité ASP.NET
Confirmation de compte et récupération de mot de passe avec ASP.NET Identity décrit plus en détail la récupération de mot de passe et la confirmation de compte.
Application MVC 5 avec Facebook, Twitter, LinkedIn et Google OAuth2 connexion Ce tutoriel explique comment créer une application ASP.NET MVC 5 avec les autorisations Facebook et Google OAuth 2. Il montre également comment ajouter des données supplémentaires à la base de données Identity.
Déployer une application MVC ASP.NET sécurisée avec Membership, OAuth et base de données SQL sur Azure Web. Ce tutoriel aborde aussi le déploiement sur Azure, la sécurisation de votre application avec des rôles, l’utilisation de l’API d’appartenance pour ajouter des utilisateurs et des rôles, ainsi que les fonctionnalités de sécurité supplémentaires.
Création d’une application Google pour OAuth 2 et connexion de l’application au projet
Création de l’application dans Facebook et connexion de l’application au projet
Configuration du protocole SSL dans le projet
Comment configurer votre environnement de développement ASP.NET MVC et C#

Partager via

Application ASP.NET MVC 5 avec authentification à deux facteurs par SMS et e-mail

Créer une application ASP.NET MVC

Configurer l’authentification à deux facteurs par SMS

Activer l’authentification à deux facteurs

Ressources supplémentaires

Commentaires

Ressources supplémentaires