Dash-Bibliothek | So erstellen Sie eine Anmeldeseite mit Dash Library

Dieser Artikel wurde im Rahmen der Data Science Blogathon.

Einführung

uth, und sie wissen, dass diese Methode eine Startmethode von ist SitzungDas "Sitzung" Es ist ein Schlüsselbegriff im Bereich der Psychologie und Therapie. Bezieht sich auf ein geplantes Treffen zwischen einem Therapeuten und einem Klienten, wo Gedanken erforscht werden, Emotionen und Verhaltensweisen. Diese Sitzungen können in Länge und Häufigkeit variieren, und ihr Hauptzweck ist es, persönliches Wachstum und Problemlösung zu erleichtern. Die Wirksamkeit der Sitzungen hängt von der Beziehung zwischen dem Therapeuten und dem Therapeuten ab.. aufkommend. Aber, Was ist, wenn ich eine Login-Seite möchte, wie wir sie in HTML haben?, JavaScript, PHP, etc.? Hier ist die Antwort auf deine Frage.

Dann, Ich habe eine Dashboard-App für die Benutzerauthentifizierung mit dash-auth erstellt. Ich wollte Testbetrieb dafür machen. Aber da es ein Pop-up-Fenster war, Ich konnte die ID nicht bekommen, die Namen der Klassen oder verwandte Informationen, die zum Testen des Login-Moduls verwendet werden könnten.

Was ist mehr, Ich habe versucht, einige Methoden anzuwenden, die in einem Artikel angegeben wurden, aber immer noch nichts. Auch nach stundenlangem Suchen im Internet, es gab keine sinnvolle antwort auf meine frage. Da wusste ich, dass ich dieses Problem umgehen musste.. Wussten Sie schon über dcc.Link () und dachte, ich würde es verwenden, um die Login-Seite zu erstellen.

Dieser Blog enthält die Lösung, wie Sie eine echte Anmeldeseite erstellen, die einer HTML-Seite ähnelt und auf der Sie mithilfe von Links von einer Seite zur anderen springen können.

Bibliotheken importieren:

Das Erste ist das Erste, Importieren der notwendigen Bibliotheken. Das sollte jeder kennen.

Bindestrich importieren
importiere dash_core_components als dcc
importiere dash_html_components als html
aus dash.dependencies importieren Ausgabe,Eingang,Bundesland

Initialisieren Sie die Dash-Anwendung:

Der nächste Schritt ist die Initialisierung der Anwendung. Strich.Strich () ruft die Anwendungsinstanz auf.

app = dash.Dash(__Name__, external_stylesheets=external_stylesheets,suppress_callback_exceptions=Wahr)

Sie müssen sicherstellen, dass Suppress_callback_Exceptions ist gegründet in sicher damit Sie verschiedene Seiten durchsuchen können. Wenn Sie es nicht auf true setzen, anrufbezogene Fehler werden sicherlich auftreten.

Design:

Fangen wir mit dem Design an.

app.layout = html.Div([
  dcc.Standort(id='url', Refresh=Falsch),
  html.Div(id='page-content')
                     ])

Dcc.Location entscheidet, welche Seite angezeigt wird. Stellt die Adressleiste im Browser dar. Das folgende div zeigt den Inhalt der angegebenen URL an. Der Name des ausgewählten Pfades wird als Parameter an diese Standortkomponente übergeben und, Folglich, der Seiteninhalt wird angezeigt. Sie werden dies in einer genaueren Erklärung sehen. Die Aktualisierungsbeschränkung besteht nur darin, die Seite zu aktualisieren, wenn der Standort aktualisiert wird oder nicht.

Loginseite (Seite von IndexDas "Index" Es ist ein grundlegendes Werkzeug in Büchern und Dokumenten, Dies ermöglicht es Ihnen, die gewünschten Informationen schnell zu finden. Allgemein, Sie wird am Anfang einer Arbeit präsentiert und organisiert die Inhalte hierarchisch, mit Kapiteln und Abschnitten. Die richtige Vorbereitung erleichtert die Navigation und verbessert das Verständnis des Materials, was es zu einer unverzichtbaren Ressource sowohl für Studenten als auch für Fachleute in verschiedenen Bereichen macht....):

Lassen Sie uns nun die Indexseite erstellen, die die Eingabefelder für Benutzername und Passwort sowie den Häkchen-Button zum Authentifizieren des Benutzers enthält. Dies wird die erste Seite sein, die angezeigt wird.

index_page = html.Div([
html.Div(
dcc.Eingang(id="Benutzer", Typ="Text", Platzhalter="Benutzername eingeben",Klassenname="Eingabefeld1",
Stil={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'60px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2'
}),
),
html.Div(
dcc.Eingang(id="passw", Typ="Text", Platzhalter="Passwort eingeben",Klassenname="Eingabefeld2",
Stil={'margin-left':'35%','width':'450px','height':'45px','padding':'10px','margin-top':'10px',
'font-size':'16px','border-width':'3px','border-color':'#a0a3a2',
}),
),
html.Div(
html.Schaltfläche('Überprüfen', id='verify', n_clicks=0, Stil={'border-width':'3px','font-size':'14px'}),
Stil={'margin-left':'45%','padding-top':'30px'}),
html.Div(id='output1')
])

@app.callback(
    Bindestrich.Abhängigkeiten.Ausgabe('output1', 'Kinder'),
   [Bindestrich.Abhängigkeiten.Eingabe('überprüfen', 'n_clicks')],
    Bundesland=[Bundesland('Benutzer', 'value'),
                Bundesland('passw', 'value')])
def update_output(n_klicks, dein Name, passw):
    li ={'shraddha':'admin123'}
    wenn uname =='' oder uname == None oder passw =='' oder passw == None:
        HTML zurückgeben. Div(children='',Stil={'padding-left':'550px','padding-top':'10px'})
    Wenn uname nicht in li:
        HTML zurückgeben. Div(children='Falscher Benutzername',Stil={'padding-left':'550px','padding-top':'40px','font-size':'16px'})
    Wenn li[dein Name]==passw:
        HTML zurückgeben. Div(dcc.Link('Zugang Gewährt'!', href="https://www.analyticsvidhya.com/nächste_seite",Stil={'color':'#183d22','font-family': 'serif', 'font-weight': 'bold', "Text-Dekoration": "keiner",'font-size':'20px'}),Stil={'padding-left':'605px','padding-top':'40px'})
anders:
    HTML zurückgeben. Div(children='Falsches Passwort',Stil={'padding-left':'550px','padding-top':'40px','font-size':'16px'})

Der obige Code erstellt 2 Eingabefelder, die erste ist für den Benutzernamen und die zweite für das Passwort. Im Gegensatz zu einer normalen Schaltfläche, die ein einzelnes Eingabefeld ermöglicht, muss den ‚Zustand‘ innerhalb einer Liste wie oben beschrieben, um die Eingabe aus mehreren Eingabefeldern zu übernehmen und dann die Ausgabe durch Klicken auf die Schaltfläche zu aktualisieren (in diesem Fall prüfen) .

En update_output, zuerst definieren wir ein Wörterbuch ‚Bei der‘ mit allen gültigen Benutzernamen und entsprechenden Passwörtern. Die erste Bedingung ‚und‘ es ist nur so, dass am Anfang nichts angezeigt wird.

Dann prüfen wir, ob der Benutzername ungültig ist / gültig, wenn der Benutzername vorhanden ist in ‚Bei der‘, dann gilt es als gültig, dann prüfen wir, ob das Passwort für den angegebenen Benutzernamen gültig ist, und wenn beides richtig ist, Boom! Holt einen Link, der sagt ‚Zugang gewährt‘ und durch Klicken auf den Link können Sie zur gewünschten Seite springen.

Auf dcc.Link, der erste Parameter ist der Text, der als Link angezeigt wird und href ist der ‚Routenname‘ die wir für eine bestimmte Seite eingestellt haben. Wir werden gleich sehen, wie diese Links definiert sind und wie die Routennamen vergeben werden.. Der Rest des Teils ist nur die Formatierung, damit es hübsch aussieht.

Die eigentliche Seite:

Dies ist die Haupt-Dashboard-App. Der folgende Code ist nur ein einfacher Skriptcode zu Erklärungszwecken.

Code:

next_page = html.Div([
html.Div(dcc.Link('Log out', href="https://www.analyticsvidhya.com/",Stil={'color':'#bed4c4','font-family': 'serif', 'font-weight': 'bold', "Text-Dekoration": "keiner",'font-size':'20px'}),Stil={'padding-left':'80%','padding-top':'10px'}),
        HTML. H1(Kinder="Dies ist die nächste Seite, die Hauptseite",Klassenname="ap",Stil={
 'color':'#89b394','text-align':'center','justify':'center','padding-top':'170px','font-weight':'bold',
 'font-family':'courier',
 'padding-left':'1px'  })
]) 

Sie können je nach Bedarf weitere Komponenten hinzufügen. Wie du siehst, he proporcionado un botón ‚Cerrar sesión‘ oben rechts auf dieser Seite, die Sie zurück zur Anmeldeseite führt und sich abmeldet. Der Link ist so formatiert, dass er nicht wie ein typischer blauer Link mit Unterstrich aussieht, was lässt es anständig aussehen.

Ich habe versucht, die maximal erforderliche Formatierung einzufügen, damit ich nicht nach diesen kleinen Änderungen suchen muss.

Definiere die Links:

Der letzte und wichtigste Teil, wer kümmert sich um die gesamte navigation, ist es, die Routen zu definieren. Und so geht's.

Code:

@app.callback(Bindestrich.Abhängigkeiten.Ausgabe('page-content', 'Kinder'),
[Bindestrich.Abhängigkeiten.Eingabe('url', 'pathname')])
def display_page(Pfadname):
    wenn Pfadname == "https://www.analyticsvidhya.com/nächste_seite":
        return next_page
else:
       index_page zurückgeben

Sie müssen die Pfadnamen für alle in der Anwendung verwendeten URLs festlegen. Ich denke es ist selbsterklärend, gibt den entsprechenden Abschnitt für deinen Pfadnamen zurück. Next_page ist die Html-Div-Komponente, die im vorherigen Abschnitt definiert wurde.

Und natürlich, laufen die Anwendung.

if __name__=='__main__':
    app.run_server() 

Wenn Sie die Dashboard-App ausführen, das Board kommt als nächstes:

Nach erfolgreicher Authentifizierung, obtendrá el enlace que dice ‚Acceso otorgado‘ wie auf dem bild unten zu sehen.

Und indem Sie auf diesen Link klicken, Sie können über Ihr Dashboard auf die App zugreifen.

Was ist mehr, 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 DatenbankEine Datenbank ist ein organisierter Satz von Informationen, mit dem Sie, Effizientes Verwalten und Abrufen von Daten. Einsatz in verschiedenen Anwendungen, Von Unternehmenssystemen bis hin zu Online-Plattformen, Datenbanken können relational oder nicht-relational sein. Das richtige Design ist entscheidend für die Optimierung der Leistung und die Gewährleistung der Informationsintegrität, und erleichtert so eine fundierte Entscheidungsfindung in verschiedenen Kontexten..... Durch die Verwendung von Verschlüsselungstechniken, um das Passwort in einer Datenbank zu speichern und zur Validierung zu entschlüsseln. Und so weiter. Dazu werde ich in Zukunft auch einen Blog erstellen. bleiben Sie dran.

Ich hoffe, dieser Blog erklärt, was ich versucht habe zu vermitteln und jetzt können Sie auch im Login-Modul für die Dashboard-App testen. Vielen Dank! Wir sehen uns beim nächsten!

Autor:

Shraddha Shekhar

Ich studiere Informatik und interessiere mich für Machine Learning und Data Science. Wenn dir das gefällt, schau auf meinen anderen Blog.

Die in diesem Artikel gezeigten Medien sind nicht Eigentum von DataPeaker und werden nach Ermessen des Autors verwendet.

Verwandt