Sécurisation des applications avec l’interface utilisateur Telerik pour le contrôle OTP ASP.NET Core

novembre 24, 2025

Dans cet article, nous analyserons comment utiliser l’interface utilisateur de Telerik pour Entrée OTP ASP.NET Core contrôle, qui permet aux utilisateurs de saisir un mot de passe à usage unique (OTP) lors de l’authentification multifacteur de manière intuitive. Commençons !

Qu’est-ce que le contrôle OTPInput ASP.NET Core ?

L’objectif de ce contrôle est d’apporter une sécurité renforcée aux applications tout en offrant une expérience utilisateur agréable lors de la demande d’un mot de passe à usage unique. Il peut être utilisé à la fois comme Aide-étiquette et avec un Aide HTMLqui sont des wrappers pour le Entrée OTP de l’interface utilisateur de Kendo widget.

Certains cas d’utilisation dans lesquels nous pourrions utiliser ce contrôle incluent (parmi de nombreux autres cas) :

Authentification multifacteur
Vérification lors de la réinitialisation du mot de passe
Autorisation de transaction
Accès aux zones restreintes sur les sites Web

Ce contrôle peut être personnalisé en termes d’apparence, de type de saisie, de nombre d’éléments à demander, de groupes dans la saisie et même du type de clavier virtuel qui doit être affiché s’il est visualisé depuis un appareil mobile.

Intégration du contrôle OTPInput dans un projet ASP.NET Core

Imaginez que nous créons une page pour valider un code OTP à six chiffres. L’une des premières choses à laquelle vous pourriez penser pour le créer serait d’utiliser un input balise avec certaines valeurs prédéfinies, comme une longueur maximale de six caractères.

Si vous souhaitez reproduire les démonstrations de cet article, vous devez créer un nouveau projet à l’aide du Application Web ASP.NET Core (pages rasoir) modèle. Vous devez également vous assurer de suivre les Guide d’installation des contrôles Telerik UI pour ASP.NET Core pour que l’environnement soit prêt et configuré.

Une fois cela fait, remplacez le contenu du index.cshtml fichier avec les éléments suivants :

@page

@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<style>
    .verification-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5rem;
    }

    .verification-form {
        max-width: 320px;
        gap: 1.5rem;
        width: 100%;
        padding: 2rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .verification-form input {
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
            margin-bottom: 1.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .verification-form kendo-button {
            width: 100%;
            font-size: 1rem;
        }
</style>

<div class="verification-container">
    <h2>Two-Factor Verification</h2>
    <p>Please enter the 6-digit code sent to your email:</p>

    <form asp-action="VerifyCode" method="post" class="verification-form">
        <input type="text" name="otpCode" maxlength="6" placeholder="Enter the code" />
        <kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
            Verify
        </kendo-button>
    </form>
</div>

Le code ci-dessus spécifie un form section dans laquelle nous ajoutons un input et un bouton kendo pour simuler la soumission du code. L’exécution du code ressemble à ceci :

Vous pouvez voir qu’avec cette approche nous sommes confrontés à plusieurs problèmes :

L’utilisateur peut saisir n’importe quel caractère.
Si les codes OTP étaient regroupés, l’interface n’est pas intuitive pour que l’utilisateur les reconnaisse.
Il est probable que sur les appareils mobiles, le clavier virtuel qui apparaît ne soit pas le bon.

Dans ces cas, le Contrôle OTPInput ASP.NET Core de Telerik est la meilleure option car il résout facilement tous ces problèmes, comme nous le verrons ensuite.

Modification du contrôle d’entrée pour un OTPInput

Pour remplacer l’élément input par un OTPInput, nous devons considérer le type de projet que nous construisons pour choisir entre l’utilisation d’un Aide HTML, Aide-étiquette ou même pur HTML. Dans mon cas, puisque l’exemple est basé sur les pages Razor, j’utiliserai Aide-étiquette éléments. Compte tenu de cela, la création la plus simple du contrôle ressemblerait à ceci :

<form asp-action="VerifyCode" method="post" class="verification-form">        
    <kendo-otpinput name="optCode" items="6"></kendo-otpinput>
    <kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
        Verify
    </kendo-button>
</form>

Le résultat du changement est le suivant :

Nous pouvons voir que la définition du contrôle est assez simple, mettant en valeur le nouveau composant dans l’interface graphique avec un design moderne, esthétique et fonctionnel. La commande centre automatiquement le focus sur la case correspondante, offrant une expérience utilisateur intuitive.

De plus, grâce à l’utilisation du items configuration, il a été très simple d’indiquer le nombre de caractères que l’utilisateur doit remplir, ce qui aboutit à un contrôle sur l’interface utilisateur avec la disposition idéale pour que l’utilisateur sache à tout moment quel élément il remplit et combien il en reste.

Un autre attribut que nous avons attribué au contrôle est namece qui est obligatoire car il définit les attributs HTML id et name dans les coulisses.

Un problème que nous pouvons voir dans l’image précédente est que l’utilisateur peut toujours saisir n’importe quel type de caractère dans les zones de texte. Heureusement, le contrôle nous permet de changer cela facilement, ce que nous verrons ensuite.

Forcer la saisie numérique

Nous pouvons modifier le type de données saisi dans le contrôle en utilisant le type configuration, à laquelle on peut attribuer l’une des valeurs suivantes :

OTPType.Number: Permet la saisie uniquement de caractères numériques
OTPType.Text: Permet la saisie de caractères en général
OTPType.Password: Permet de convertir des caractères en un format de mot de passe

Dans notre cas, la méthode la plus pratique pour valider un code d’authentification sera de limiter la saisie à des valeurs numériques, la définition ressemblerait donc à ceci :

<form asp-action="VerifyCode" method="post" class="verification-form">        
    <kendo-otpinput name="optCode" items="6" type="OTPType.Number"></kendo-otpinput>
    ...
</form>

Lors de l’exécution de l’application, nous obtenons le résultat suivant :

Dans l’image précédente, vous pouvez remarquer que lorsqu’il essaie de saisir un caractère non numérique, l’utilisateur reçoit un retour immédiat indiquant que le caractère n’est pas valide.

Création de groupes dans la saisie de caractères

Si le code OTP à saisir nécessite une sorte de regroupement visuel en raison de sa longueur, il est très simple de créer des groupes d’éléments et même d’ajouter des séparateurs entre eux. Par exemple, supposons que le code OTP soit composé de 8 chiffres, regroupés comme suit : 3-2-3 articles. Pour réaliser le regroupement ci-dessus, le items la configuration doit être utilisée comme suit :

<form asp-action="VerifyCode" method="post" class="verification-form">        
    <kendo-otpinput name="optCode" type="OTPType.Number">
        <otpinput-items>
            <item group-length="3"/>
            <item group-length="2" />
            <item group-length="3" />
        </otpinput-items>
    </kendo-otpinput>
    ...
</form>

Le résultat du code ci-dessus peut être vu dans l’image suivante :

Dans l’image, la création de groupes selon la configuration spécifiée est visible.

De même, si vous souhaitez mieux montrer la séparation entre les groupes, il est possible d’ajouter des séparateurs visuels à l’aide de l’option separator configuration comme indiqué ci-dessous :

<form asp-action="VerifyCode" method="post" class="verification-form">        
    <kendo-otpinput name="optCode" type="OTPType.Number" separator="-">
        <otpinput-items>
            <item group-length="3"/>
            <item group-length="2" />
            <item group-length="3" />
        </otpinput-items>
    </kendo-otpinput>
    ...
</form>

Cela permet une meilleure représentation des groupes, comme indiqué ci-dessous :

Personnalisation du contrôle OTPInput

Si vous devez personnaliser OTPInput pour l’adapter à la conception visuelle de votre application, la série de paramètres de personnalisation vous permettra de modifier la taille, l’application de la couleur et le rayon de bordure du composant.

Pour modifier la taille, utilisez simplement le size option avec l’une des valeurs suivantes :

ComponentSize.Small
ComponentSize.Medium
ComponentSize.Large
ComponentSize.None

Si vous souhaitez modifier la façon dont la couleur est appliquée au composant, vous pouvez utiliser l’option fill-mode option avec l’une de ces valeurs :

FillMode.Solid
FillMode.Outline
FillMode.Flat
FillMode.None

Enfin, vous pouvez modifier le rounded option pour modifier le rayon de bordure du composant en attribuant l’une des valeurs suivantes :

Rounded.Small
Rounded.Medium
Rounded.Large
Rounded.Full
Rounded.None

Dans l’exemple suivant, l’utilisation de toutes ces propriétés est démontrée :

<kendo-otpinput name="optCode" type="OTPType.Number" separator="-"
    size="ComponentSize.Large"
    fill-mode="FillMode.Solid"
    rounded="Rounded.Full">
    ...
</kendo-otpinput>

Le code ci-dessus entraîne l’affichage du contrôle comme suit :

Enfin, il est possible de spécifier quel clavier doit apparaître lors de l’utilisation d’un appareil mobile. Par défaut, lorsque l’application est exécutée, le clavier virtuel qui apparaît est celui présenté dans l’image suivante :

Si vous souhaitez changer de clavier, vous pouvez utiliser le input-mode option en attribuant n’importe quel mode de saisie HTML5 valide, par exemple, text, numeric, teletc. Dans l’exemple suivant, j’ai précisé que le clavier à afficher est le numérique :

<kendo-otpinput name="optCode" type="OTPType.Number" separator="-"
    size="ComponentSize.Large"
    fill-mode="FillMode.Solid"
    rounded="Rounded.Full"
    input-mode="numeric">
    ...
</kendo-otpinput>

La modification précédente affiche le clavier numérique au début du remplissage du contrôle OTPInput :

Événements dans le contrôle OTPInput

Le contrôle OTPInput fournit le Change événement qui vous permet de contrôler le comportement du composant. Par exemple, vous pouvez vérifier si tous les éléments ont été remplis avant d’activer un bouton de soumission. Vous pouvez accomplir cela via un nom de gestionnaire ou un délégué de modèle. Ci-dessous un exemple de son utilisation :

<div class="verification-container">
    <h2>Two-Factor Verification</h2>
    <p>Please enter the 6-digit code sent to your email:</p>

    <form asp-action="VerifyCode" method="post" class="verification-form">        
        <kendo-otpinput ... on-change="onChange">
            ...
        </kendo-otpinput>
        <kendo-button name="btnVerify" type="submit" theme-color="ThemeColor.Primary">
            Verify
        </kendo-button>
    </form>
</div>

<script>
    function onChange() {
        console.log("Change :: " + this.value());
    }
</script>

En exécutant le code ci-dessus, nous obtenons le résultat suivant :

Sans aucun doute, cet événement peut grandement nous aider à effectuer une pré-validation avant de soumettre les informations.

Conclusion

Tout au long de cet article, vous avez découvert ce qu’est l’interface utilisateur Telerik pour le contrôle OTP ASP.NET Core et quelques cas d’utilisation. Vous avez également appris à le configurer pour répondre à vos besoins commerciaux et de conception grâce aux paramètres de personnalisation et aux ajustements des éléments. C’est maintenant à votre tour d’améliorer la sécurité de vos applications en l’implémentant lorsque vous devez valider des mots de passe à usage unique.

Si vous n’avez pas encore commencé à utiliser l’interface utilisateur Telerik pour ASP.NET Core, elle est accompagnée d’un essai gratuit de 30 jours :

Essayez maintenant

Source link