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   . 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   . Authentification de l'utilisateur 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'   . Les commentaires, critiques et suggestions sont toujours les bienvenus ! adresse https://github.com/Bob-Wright/Authur-User-Registration-System  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   dans le dossier Storybook.  Portal.php  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 "   " qui est incluse ici car une raison fréquente pour un utilisateur souhaitant changer son mot de passe est de pouvoir se connecter. Modifier le mot de passe  Le dernier élément de la boîte de dialogue est une invitation au bouton   pour s'inscrire en tant qu'utilisateur. S'inscrire  S'inscrire  La sélection de ce bouton   lancera le programme   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  Inscription signup.php  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 "   " 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.  S'inscrire  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   qui se trouve dans le dossier   . La page Web du programme   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.  GateKeeper.php Storybook/Portal GateKeeper  Inclus dans le référentiel de code sur GitHub est un programme de développement utilitaire nommé   (ou   si vous n'utilisez pas le   inclus dans le repo) qui permettra l'affichage périodique du   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".  dumpSessionZ.php dumpSession.php gestionnaire de base de données de session Zebra session2DB PHP $_SESSION  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   , 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. GateKeeper.php  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   ci-dessous. L'image de cette page est une image   chargée depuis le dossier   par le programme   .  d'informations sur les mugshots JPEG Storybook/Portal/ckimages 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   . 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.  dumpSession  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   à notre   . 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.  mugshotChoice.php serveur Node PGP 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   . Le code du service Node API tel qu'installé est inclus dans cet article repo dans le dossier   et il y a plus d'informations sur le code API lui-même dans cet article (   ) et son référentiel GitHub associé.    Storybook/Portal/showMugshotChoice.php Authur/openPGP https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server  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     vous pouvez trouver en tant que fork sur ce référentiel GitHub à   . openPGPjs NodeJS que 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   avec l'affichage de la page suivante en conséquence.  showMugshotChoice.php  Si nous effectuons une actualisation de   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   avec trois autres valeurs pour les   ,   et   . La valeur   , c'est-à-dire le   , est extraite d'une base de données de clés où elle a été précédemment écrite par notre Node PGP API. dumpSession [plaintext] clés [coverImage] [stegoImge] [secretKey] [plaintext] PGP PUBLIC KEY BLOCK  Le programme   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   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.  showMugshotChoice.php PNG  À 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     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.  Authur-An-Image-Based-MFA-User-Authentication-System .  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   , 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.  Storybook/Portal/decodeStego.php  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'   ou d'inscription de notre     La prochaine et dernière section de notre code que nous considérerons est la fonction de composant de   dans laquelle nous vérifions notre nouvel utilisateur enregistré pour accéder à notre application   hébergée. Restez à l'écoute pour la rédaction, espérons-le bientôt. inscription système d'authentification utilisateur MFA basé sur l'image d'Authur . connexion Storybook  Pour la prochaine itération de notre   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. système d'authentification des utilisateurs,  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.

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps