Création d'un système d'authentification d'utilisateur MFA (code de composant d'inscription) à l'aide d'images

La plupart des applications Internet interactives exigent qu'un utilisateur soit d'abord « enregistré » afin d'utiliser l'application, puis exigent en outre que l'utilisateur « se connecte » chaque fois qu'il souhaite utiliser l'application. Ce processus consistant à inscrire d'abord un utilisateur, puis à reconnaître ultérieurement cet utilisateur pour lui autoriser l'accès peut être décrit comme Authentification de l'utilisateur . Cet article se concentre sur le code et les processus utilisés dans le composant d'enregistrement de notre système d'authentification des utilisateurs Authur .

Notre portail de connexion de démonstration permet aux utilisateurs d'accéder à une application de création de bandes dessinées Web nommée Storybook, mais le portail lui-même peut être utilisé dans de nombreuses situations où l'authentification est requise pour utiliser une application Web.

Le référentiel de code du portail de connexion

La base de code que nous décrivons ci-dessous est disponible sur GitHub en tant que référentiel public à l' adresse https://github.com/Bob-Wright/Authur-User-Registration-System . Les commentaires, critiques et suggestions sont toujours les bienvenus !

Le portail de connexion

L'application de construction est lancée à partir d'une galerie de bandes dessinées créées par le constructeur lui-même, et la première page de l'application est la page d'accueil du portail de connexion présentée ici dans ces deux prochaines captures d'écran. Cette page est présentée par Portal.php dans le dossier Storybook.

Il y a quatre choix d'options de connexion répertoriés dans notre boîte de dialogue principale, ainsi qu'une fenêtre contextuelle d'explication de base qui décrit chacune des options de connexion disponibles via le bouton " OPTIONS DE CONNEXION EXPLIQUÉES ".

La boîte de dialogue de connexion comprend également une option pour " Modifier le mot de passe " qui est incluse ici car une raison fréquente pour un utilisateur souhaitant changer son mot de passe est de pouvoir se connecter.

Le dernier élément de la boîte de dialogue est une invitation au bouton S'inscrire pour s'inscrire en tant qu'utilisateur.

S'inscrire

La sélection de ce bouton Inscription lancera le programme signup.php et la boîte de dialogue nous sera présentée dans les trois captures d'écran suivantes. Cette boîte de dialogue demande des informations sur les données utilisateur qui seront utilisées pour créer une entrée de base de données de profil utilisateur

En plus d'obtenir le nom d'utilisateur et l'adresse e-mail, la boîte de dialogue demande une entrée de mot de passe, et conformément à la tradition, nous demandons une combinaison de caractères alphanumériques en majuscules et minuscules avec au moins un caractère de symbole. L'intention d'exiger ces paramètres de caractères est évidemment de rendre le mot de passe plus difficile à deviner. À quel point cela fonctionne-t-il?

Outre les entrées de nom d'utilisateur, d'e-mail et de mot de passe, la boîte de dialogue rassemble également certains éléments de données sur chaque utilisateur. Ces éléments ne contiennent pas de données personnelles identifiables, mais sont plutôt conçus pour fournir une courte liste de facteurs binaires (oui/non) que nous pourrons utiliser ultérieurement dans le processus de validation. Ainsi, par exemple, nous pourrions demander à un utilisateur particulier "Savez-vous nager ?" comme facteur d'identification.

Une fois ces éléments de données fournis, nous pouvons continuer en cliquant sur le bouton " S'inscrire " en bas de l'écran. Cela se traduira par l'affichage de l'écran suivant qui nous informe qu'un e-mail de confirmation a été envoyé à l'utilisateur.

L'e-mail affiché ci-dessous est ensuite envoyé à l'adresse e-mail du nouvel utilisateur pour vérification.

Toutes les activités d'inscription précédentes enregistrent efficacement un utilisateur dans un système de connexion complet et fonctionnel par échange de jetons d'e-mail/mot de passe qui prend en charge les trois premières méthodes de connexion (nom d'utilisateur/mot de passe, lien magique et mot de passe à usage unique) indiquées dans notre boîte de dialogue initiale du portail.

La sélection d'images GateKeeper

Mais le code devient plus intéressant à partir d'ici alors que nous continuons à générer un jeton de connexion MFA basé sur une image pour l'enregistrement de notre utilisateur. En cliquant sur le bouton "Vérifier mon e-mail" dans l'e-mail, l'écran de navigateur suivant illustré ci-dessous sera ouvert par le programme GateKeeper.php qui se trouve dans le dossier Storybook/Portal . La page Web du programme GateKeeper informe d'abord l'utilisateur que son e-mail a été vérifié avec succès et continue en demandant à l'utilisateur de choisir une image d'avatar "gatekeeper" dans une galerie d'images.

Inclus dans le référentiel de code sur GitHub est un programme de développement utilitaire nommé dumpSessionZ.php (ou dumpSession.php si vous n'utilisez pas le gestionnaire de base de données de session Zebra session2DB inclus dans le repo) qui permettra l'affichage périodique du PHP $_SESSION variables au fur et à mesure que les programmes s'exécutent. Ces images suivantes sont les résultats de dumpSession exécuté sur la page du programme GateKeeper.php comme nous le voyons ci-dessus, et il profile l'activité du programme PHP en cours d'exécution, nous permettant de "suivre".

L'aspect principal de la fonction de GateKeeper consiste à manipuler plusieurs tableaux de fichiers image que nous utilisons ensuite pour remplir la galerie de sélection à l'écran. L'intention de ces machinations est de réorganiser l'ordre d'affichage des images de la galerie de manière aléatoire à chaque chargement de page. Si vous regardez le code GateKeeper.php , vous remarquerez que nous avons inséré un piège d'exception dans la section supérieure du code qui sélectionne les images à afficher de sorte que nous puissions spécifier l'inclusion d'une image utilisateur particulière dans la galerie. Cela nous permet d'être sûr que cette image peut être sélectionnée comme avatar du gatekeeper de l'utilisateur de l'exception de trap. Cela a deux ramifications.

Tout d'abord, cela me permet d'inclure spécifiquement mon propre mugshot personnel dans la procédure de démonstration ☺ . Deuxièmement, il fournit un emplacement pratique pour insérer un shim qui pourrait être utilisé pour rendre une image particulière disponible pour tout utilisateur spécifié.

Cependant, continuons et supposons que notre utilisateur a cliqué sur l'image d'avatar sélectionnée dans l'écran GateKeeper ci-dessus. Cela se traduit par l'affichage de la première page d'informations sur les mugshots ci-dessous. L'image de cette page est une image JPEG chargée depuis le dossier Storybook/Portal/ckimages par le programme Storybook/Portal/mugshotChoice.php .

Cela entraîne également l'ajout de quelques valeurs supplémentaires au tableau de données PHP $_SESSION que nous pouvons examiner en actualisant notre affichage dumpSession . Il convient de noter en particulier les informations de la base de données des utilisateurs, notamment l'adresse e-mail et le prénom et le nom de l'utilisateur, ainsi que la valeur des facteurs indiquée ci-dessous.

Si nous cliquons sur l'image Gatekeeper pour continuer notre enregistrement d'utilisateur, cette action entraîne l'envoi d'une requête POST de formulaire par mugshotChoice.php à notre serveur Node PGP API . Le terminal Node affichera l'écran suivant lorsqu'il générera et enregistrera une paire de clés PGP pour cet utilisateur, puis attendra la prochaine requête API.

Lorsque l'API termine la génération de clé, elle enregistre ensuite les clés dans une base de données et renvoie l'utilisateur à l'application principale au moyen d'un e-mail d'avis d'achèvement de l'API PGP. affichage de la page Web ci-dessous qui inclut la direction pour charger Storybook/Portal/showMugshotChoice.php . Le code du service Node API tel qu'installé est inclus dans cet article repo dans le dossier Authur/openPGP et il y a plus d'informations sur le code API lui-même dans cet article ( https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server ) et son référentiel GitHub associé.

Cette configuration permet l'utilisation d'une API qui se trouve sur un domaine séparé de l'application de connexion, et elle permet l'utilisation du référentiel openPGPjs NodeJS que vous pouvez trouver en tant que fork sur ce référentiel GitHub à https://github.com/Bob -Wright/openpgpjs .

Considérons quelques aspects de cette séparation que nous pourrions exploiter. Notre API PGP Node Server pourrait s'exécuter sur le même serveur que notre portail de connexion. Une autre considération consisterait à connecter le serveur de nœud PKC au serveur d'application de connexion via une adresse IP privée ou un schéma d'isolation similaire. On pourrait utiliser l'adresse IP du serveur par opposition au système DNS Internet.

Mais pour poursuivre la discussion sur le schéma actuel, l'utilisateur cliquera sur l'image comme indiqué pour charger showMugshotChoice.php avec l'affichage de la page suivante en conséquence.

Si nous effectuons une actualisation de dumpSession sur cette page, nous pouvons voir quatre autres valeurs de données ajoutées aux variables du tableau PHP $_SESSION, comme indiqué ci-dessous. Le tableau inclut désormais une valeur pour une clé publique de style PGP qui est stockée avec la valeur de clé de tableau $_SESSION de [plaintext] avec trois autres valeurs pour les clés [coverImage] , [stegoImge] et [secretKey] . La valeur [plaintext] , c'est-à-dire le PGP PUBLIC KEY BLOCK , est extraite d'une base de données de clés où elle a été précédemment écrite par notre Node PGP API.

Le programme showMugshotChoice.php a utilisé ces valeurs pour générer l'image affichée dans l'écran ci-dessus et cette image est en fait maintenant une nouvelle image au format PNG enregistrée qui a été encodée de manière stéganographique pour intégrer de manière cryptographique la valeur PGP PUBLIC KEY BLOCK.

À ce stade, nous avons utilisé la partie d'enregistrement ou d'inscription de notre portail de connexion pour créer et enregistrer toutes les informations que nous utilisons actuellement dans notre Authur-An-Image-Based-MFA-User-Authentication-System . Si notre utilisateur clique maintenant sur l'image comme indiqué, il est renvoyé à une nouvelle page de portail de connexion avec un nouveau tableau $_SESSION effacé, comme indiqué sur les deux écrans ci-dessous, et il peut poursuivre sa connexion au Storybook Comic Book Builder.

Avant de cliquer sur notre deuxième image d'informations mugshot et pendant que notre tableau $_SESSION est toujours chargé, nous pouvons détourner notre attention vers l'utilisation d'un autre programme également inclus dans la configuration de la démonstration. Si nous naviguons sur la page Storybook/Portal/decodeStego.php , nous verrons cet écran ci-dessous qui montre une extraction de preuve de concept du BLOC DE CLÉ PUBLIC intégré stéganographiquement et encodé pour cet utilisateur.

En guise de conclusion, ces images suivantes sont les captures complètes de dumpSession pour la page ci-dessus.

Conclusion

Cela termine notre examen du code utilisé dans le composant d' inscription ou d'inscription de notre système d'authentification utilisateur MFA basé sur l'image d'Authur . La prochaine et dernière section de notre code que nous considérerons est la fonction de composant de connexion dans laquelle nous vérifions notre nouvel utilisateur enregistré pour accéder à notre application Storybook hébergée. Restez à l'écoute pour la rédaction, espérons-le bientôt.

Pour la prochaine itération de notre système d'authentification des utilisateurs, l'intention est d'ajouter deux installations. La première installation consisterait à inclure une méthode pour utiliser par programme notre image stéganographique générée pour créer ou créer une image NFT à utiliser comme image de jeton MFA. Une considération importante ici est le coût et pour la démonstration, la frappe ne doit pas avoir de frais d'essence. La deuxième installation permettrait à un utilisateur de télécharger sa propre image d'avatar de gardien, fournie par exemple par une base de données d'employés que nous pouvons ensuite convertir en notre format stéganographique NFT.

Permettez-moi d'offrir quelques cris et PROPS bien mérités à tous les codeurs bienveillants dont le travail a gentiment contribué à cet effort. Enfin, merci à Dieu et à ma famille pour le soutien le plus excellent !!

Également publié ici.