Cet article a été publié dans le cadre du Blogathon sur la science des données.
introduction
uth, et ils savent que cette méthode est une méthode de démarrage de sessionLa "Session" C’est un concept clé dans le domaine de la psychologie et de la thérapie. Fait référence à une rencontre programmée entre un thérapeute et un client, où les pensées sont explorées, Émotions et comportements. La durée et la fréquence de ces séances peuvent varier, et son objectif principal est de faciliter la croissance personnelle et la résolution de problèmes. L’efficacité des séances dépend de la relation entre le thérapeute et le thérapeute.. pop-up. Mais, Et si je veux une page de connexion comme celle que nous avons en HTML, JavaScript, PHP, etc.? Voici la réponse à votre question.
Ensuite, J'ai créé une application de tableau de bord pour l'authentification des utilisateurs à l'aide de dash-auth. Je voulais faire des opérations de test pour le même. Mais comme c'était une fenêtre pop-up, je n'ai pas pu obtenir l'identifiant, les noms des classes ou toute information liée qui pourrait être utilisée pour tester le module de connexion.
En outre, J'ai essayé d'appliquer certaines méthodes qui ont été données dans un article, mais toujours rien. Même après avoir cherché sur Internet pendant des heures, il n'y avait pas de réponse significative à ma question. C'est alors que j'ai su que je devais trouver un moyen de contourner ce problème.. Connaissez-vous dcc.Link () et j'ai pensé l'utiliser pour créer la page de connexion.
Ce blog contient la solution sur la façon de créer une vraie page de connexion qui ressemble à une page HTML et où vous pouvez passer d'une page à une autre à l'aide de liens.
Importation de bibliothèques:
Le premier est le premier, importer les bibliothèques nécessaires. Tout le monde devrait connaître ces.
tiret d'importation importer dash_core_components en tant que dcc importer dash_html_components au format html à partir de dash.dependencies import,Saisir,État
Initialiser l'application Dash:
L'étape suivante consiste à initialiser l'application. tiret. tiret () appelle l'instance d'application.
app = tiret. tiret(__Nom__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=Vrai)
Vous devez vous assurer que suppress_callback_exceptions est établi dans certain afin que vous puissiez parcourir différentes pages. Si vous ne le définissez pas sur vrai, des erreurs liées aux appels se produiront sûrement.
Concevoir:
Commençons par la conception.
app.layout = html.Div([
dcc.Emplacement(id='url', rafraîchir=Faux),
html.Div(id='page-content')
])
Dcc.Location décide de la page actuelle à afficher. Représente la barre d'adresse dans le navigateur. Le div ci-dessous montre le contenu de l'URL spécifiée. Le nom du chemin sélectionné sera passé en paramètre à ce composant de localisation et, en conséquence, le contenu de la page sera affiché. Vous verrez cela dans une explication plus détaillée. La restriction d'actualisation consiste uniquement à actualiser la page lorsque l'emplacement est mis à jour ou non.
Page de connexion (page de indiceLe "Indice" C’est un outil fondamental dans les livres et les documents, qui vous permet de localiser rapidement les informations souhaitées. Généralement, Il est présenté au début d’une œuvre et organise les contenus de manière hiérarchique, y compris les chapitres et les sections. Sa préparation correcte facilite la navigation et améliore la compréhension du matériau, ce qui en fait une ressource incontournable tant pour les étudiants que pour les professionnels dans divers domaines....):
Créons maintenant la page d'index qui contiendra les zones de saisie pour le nom d'utilisateur et le mot de passe et le bouton à cocher pour authentifier l'utilisateur. Ce sera la première page à apparaître.
index_page = html.Div([
html.Div(
dcc.Entrée(identifiant ="utilisateur", tapez="texte", espace réservé="Saisissez votre nom d'utilisateur",nom_classe="boîte de saisie1",
style={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'60px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2'
}),
),
html.Div(
dcc.Entrée(identifiant ="mot de passe", tapez="texte", espace réservé="Entrer le mot de passe",nom_classe="boîte de saisie2",
style={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'10px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2',
}),
),
html.Div(
html.Bouton('Vérifier', id='verify', n_clics=0, style={'border-width':'3px','font-size':'14px'}),
style={'margin-left':'45%','padding-top':'30px'}),
html.Div(id='output1')
])
@app.callback(
tiret.dépendances.sortie('output1', 'enfants'),
[tiret.dépendances.entrée('verify', 'n_clicks')],
état=[État('utilisateur', 'value'),
État('passw', 'value')])
def update_output(n_clics, ton nom, mot de passe):
li ={'shraddha':'admin123'}
si uname =='' ou uname == None ou passw =='' ou passw == None:
renvoyer html. Div(children='',style={'padding-left':'550px','padding-top':'10px'})
si uname pas en li:
renvoyer html. Div(children='Nom d'utilisateur incorrect',style={'padding-left':'550px','padding-top':'40px','font-size':'16px'})
si li[ton nom]==mot de passe:
renvoyer html. Div(dcc.Link('Accès accordé'!', href="https://www.analyticsvidhya.com/page_suivante",style={'color':'#183d22','font-family': 'serif', 'font-weight': 'bold', "texte-décoration": "rien",'font-size':'20px'}),style={'padding-left':'605px','padding-top':'40px'})
autre:
renvoyer html. Div(children='Mot de passe incorrect',style={'padding-left':'550px','padding-top':'40px','font-size':'16px'})
Le code ci-dessus crée 2 zones de saisie, le premier est pour le nom d'utilisateur et le second est pour le mot de passe. Contrairement à un bouton normal qui permet une seule zone de saisie, vous devez définir le ‘État’ dans une liste comme écrit ci-dessus pour prendre l'entrée de plusieurs zones de saisie, puis mettre à jour la sortie en cliquant sur le bouton (vérifier dans ce cas) .
En update_output, d'abord nous définissons un dictionnaire ‘au’ contenant tous les noms d'utilisateur valides et les mots de passe correspondants. La première condition ‘et’ c'est juste que rien n'est affiché au début.
Ensuite, nous vérifions si le nom d'utilisateur est invalide / valide, si le nom d'utilisateur est présent dans ‘au’, alors il est considéré comme valide, puis nous vérifions si le mot de passe est valide pour le nom d'utilisateur donné, et si les deux sont corrects, boom! Obtient un lien qui dit ‘Accès accordé’ et en cliquant sur le lien, vous pouvez accéder à la page requise.
Sur dcc.Link, le premier paramètre est le texte qui sera affiché comme lien et href est le ‘nom de la route’ que nous avons défini pour une page particulière. Nous verrons comment ces liens sont définis et comment les noms de routes sont attribués dans un instant.. Le reste de la partie est juste un formatage pour le rendre joli.
La page réelle:
Ceci est l'application principale du tableau de bord. Le code suivant est juste un code de script de base à des fins explicatives.
Code:
page_suivante = html.Div([ html.Div(dcc.Link('Log out', href="https://www.analyticsvidhya.com/",style={'color':'#bed4c4','font-family': 'serif', 'font-weight': 'bold', "texte-décoration": "rien",'font-size':'20px'}),style={'padding-left':'80%','padding-top':'10px'}), HTML. H1(enfants ="Ceci est la page suivante, la page principale",nom_classe="ap",style={ 'color':'#89b394','text-align':'center','justify':'center','padding-top':'170px','font-weight':'bold', 'font-family':'courier', 'padding-left':'1px' }) ])
Vous pouvez ajouter d'autres composants selon vos besoins. Comme tu peux le voir, he proporcionado un botón ‘Cerrar sesión’ en haut à droite de cette page qui vous ramènera à la page de connexion et vous déconnectera. Le lien est formaté de manière à ne pas ressembler à un lien bleu typique avec un soulignement, ce qui le rend décent.
J'ai essayé d'inclure le formatage maximum requis pour ne pas avoir à chercher ces petites modifications.
Définir les liens:
La dernière et la plus importante partie, qui s'occupera de toute la navigation, est de définir les itinéraires. Et voici comment faire.
Code:
@app.callback(tiret.dépendances.sortie('page-content', 'enfants'), [tiret.dépendances.entrée('url', 'pathname')]) def display_page(chemin d'accès): si chemin d’accès == "https://www.analyticsvidhya.com/page_suivante": return next_page else: index_page de retour
Vous devez définir les noms de chemin pour toutes les URL utilisées dans l'application. je pense que c'est explicite, renvoie la section respective pour votre chemin. Next_page est le composant Html div défini dans la section précédente.
Et bien sûr, courir application.
if __name__=='__main__': app.run_server()
Lorsque vous exécutez l'application de tableau de bord, le conseil sera le prochain:
Après une authentification réussie, obtendrá el enlace que dice ‘Acceso otorgado’ comme vous pouvez le voir sur l'image ci-dessous.
Et en cliquant sur ce lien, vous pouvez accéder à l'application depuis votre tableau de bord.
En outre, también puede agregar más funcionalidades como guardar el nombre de usuario y la contraseña para cada nuevo usuario agregado y almacenar estos detalles en la base de donnéesUne base de données est un ensemble organisé d’informations qui vous permet de stocker, Gérez et récupérez efficacement les données. Utilisé dans diverses applications, Des systèmes d’entreprise aux plateformes en ligne, Les bases de données peuvent être relationnelles ou non relationnelles. Une bonne conception est essentielle pour optimiser les performances et garantir l’intégrité de l’information, facilitant ainsi la prise de décision éclairée dans différents contextes..... En utilisant des techniques de cryptage pour stocker le mot de passe dans une base de données et décrypter pour validation. Etc. Je vais également créer un blog à l'avenir pour cela. restez à l'écoute.
J'espère que ce blog explique ce que j'ai essayé de transmettre et maintenant vous pouvez également tester dans le module de connexion pour l'application de tableau de bord. Merci! A la prochaine!
Auteur:
Shraddha Shekhar
Je suis un étudiant en génie informatique et je suis curieux de connaître l'apprentissage automatique et la science des données. Si tu aimes ça, regarde mon autre blog.
Les médias présentés dans cet article ne sont pas la propriété de DataPeaker et sont utilisés à la discrétion de l'auteur.
