One place for hosting & domains

      Hinzufügen von Authentifizierung zu Ihrer App mit Flask-Login


      Einführung

      Die Möglichkeit für Benutzer, sich bei Ihrer Anwendung anzumelden, ist eine der häufigsten Funktionen, die Sie Ihrer Webanwendung hinzufügen werden. Dieser Artikel behandelt, wie Sie Ihrer Flask-Anwendung mit dem Paket Flask-Login Authentifizierung hinzufügen können.

      Animiertes gif der Flask-Anwendung und des Anmeldefelds

      Wir werden einige Registrierungs- und Anmeldeseiten erstellen, die Benutzern die Anmeldung und den Zugriff auf geschützte Seiten ermöglichen, die nicht angemeldete Benutzer nicht sehen können. Wir werden Informationen aus dem Benutzermodell nehmen und sie auf unseren geschützten Seiten anzeigen, wenn sich der Benutzer anmeldet, um zu simulieren, wie ein Profil aussehen würde.

      In diesem Artikel behandeln wir die folgenden Punkte:

      • Verwenden der Bibliothek Flask-Login für die Sitzungsverwaltung.
      • Verwenden des integrierten Dienstprogramms Flask für das Hashing von Passwörtern.
      • Hinzufügen von geschützten Seiten zu unserer Anwendung nur für angemeldete Benutzer.
      • Verwenden von Flask-SQLAlchemy zum Erstellen eines Benutzermodells.
      • Erstellen von Registrierungs- und Anmeldeformularen für unsere Benutzer zur Erstellung von Konten und zum Anmelden.
      • Zurückgeben von Fehlermeldungen an unsere Benutzer, wenn etwas schiefgeht.
      • Verwenden von Informationen aus dem Konto des Benutzers zur Anzeige auf der Profilseite.

      Der Quellcode für dieses Projekt ist auf GitHub verfügbar.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Unsere Anwendung wird das Flask Application Factory-Muster mit Blueprints verwenden. Wir werden eine Blueprint haben, die alles im Zusammenhang mit auth (Authentifizierung) behandelt, und eine weitere für unsere regulären Routen, die den Index und die geschützte Profilseite enthalten. In einer echten Anwendung können Sie die Funktionalität nach Belieben aufschlüsseln, aber die hier behandelte Lösung wird für dieses Tutorial gut funktionieren.

      Hier ist ein Diagramm, das einen Eindruck davon vermittelt, wie die Dateistruktur Ihres Projekts nach Abschluss des Tutorials aussehen wird:

      .
      └── flask_auth_app
          └── project
              ├── __init__.py       # setup our app
              ├── auth.py           # the auth routes for our app
              ├── db.sqlite         # our database
              ├── main.py           # the non-auth routes for our app
              ├── models.py         # our user model
              └── templates
                  ├── base.html     # contains common layout and links
                  ├── index.html    # show the home page
                  ├── login.html    # show the login form
                  ├── profile.html  # show the profile page
                  └── signup.html   # show the signup form
      

      Im weiteren Verlauf des Tutorials werden wir diese Verzeichnisse und Dateien erstellen.

      Schritt 1 — Installieren der Pakete

      Es gibt drei Hauptpakete, die wir für unser Projekt benötigen:

      • Flask
      • Flask-Login: zur Handhabung der Benutzersitzungen nach der Authentifizierung
      • Flask-SQLAlchemy: zur Darstellung des Benutzermodells und als Schnittstelle zu unserer Datenbank

      Wir verwenden SQLite, um keine zusätzlichen Abhängigkeiten für die Datenbank installieren zu müssen.

      Zuerst beginnen wir mit der Erstellung des Projektverzeichnisses:

      Als Nächstes müssen wir zum Projektverzeichnis navigieren:

      Falls Sie keine Python-Umgebung haben, werden Sie eine erstellen wollen. Je nachdem, wie Python auf Ihrem Rechner installiert wurde, werden Ihre Befehle in etwa so aussehen:

      • python3 -m venv auth
      • source auth/bin/activate

      Anmerkung: Sie können das für Ihre lokale Umgebung relevante Tutorial zur Einrichtung von venv konsultieren.

      Führen Sie die folgenden Befehle aus Ihrer virtuellen Umgebung aus, um die erforderlichen Pakete zu installieren:

      • pip install flask flask-sqlalchemy flask-login

      Nachdem Sie die Pakete installiert haben, können Sie nun die Hauptanwendungsdatei erstellen.

      Schritt 2 — Erstellen der Hauptanwendungsdatei

      Beginnen wir mit der Erstellung eines Verzeichnisses project:

      Die erste Datei, an der wir arbeiten, wird die Datei __init__.py für unser Projekt sein:

      Diese Datei wird die Funktion zum Erstellen unserer Anwendung haben, die die Datenbank initialisiert und unsere Blueprints registriert. Im Moment bringt das nicht viel, aber es wird für den Rest unserer Anwendung benötigt. Wir müssen SQLAlchemy initialisieren, einige Konfigurationswerte festlegen und unsere Blueprints registrieren.

      project/__init__.py

      from flask import Flask
      from flask_sqlalchemy import SQLAlchemy
      
      # init SQLAlchemy so we can use it later in our models
      db = SQLAlchemy()
      
      def create_app():
          app = Flask(__name__)
      
          app.config['SECRET_KEY'] = 'secret-key-goes-here'
          app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
      
          db.init_app(app)
      
          # blueprint for auth routes in our app
          from .auth import auth as auth_blueprint
          app.register_blueprint(auth_blueprint)
      
          # blueprint for non-auth parts of app
          from .main import main as main_blueprint
          app.register_blueprint(main_blueprint)
      
          return app
      

      Nachdem wir nun die Hauptanwendungsdatei haben, können wir mit dem Hinzufügen unserer Routen beginnen.

      Schritt 3 — Hinzufügen von Routen

      Für unsere Routen verwenden wir zwei Blueprints. Für unsere Haupt-Blueprint haben wir eine Startseite (/) und eine Profilseite (/profile) für nach der Anmeldung. Versucht der Benutzer, ohne angemeldet zu sein, auf die Profilseite zuzugreifen, wird er auf die Anmeldungsroute umgeleitet.

      Für unsere Auth-Blueprint haben wir Routen, um sowohl die Anmeldeseite (/login) als auch die Registrierungsseite (/sign-up) abzurufen. Außerdem haben wir Routen zur Bearbeitung der POST-Anfragen von beiden Routen. Schließlich haben wir eine Abmeldungsroute (/logout), um einen aktiven Benutzer abzumelden.

      Bis auf Weiteres definieren wir login, signup und logout mit einfachen Rückgaben. Wir werden sie in einem späteren Schritt erneut besuchen und mit der gewünschten Funktionalität aktualisieren.

      Erstellen Sie zunächst main.py für Ihre main_blueprint:

      project/main.py

      from flask import Blueprint
      from . import db
      
      main = Blueprint('main', __name__)
      
      @main.route('/')
      def index():
          return 'Index'
      
      @main.route('/profile')
      def profile():
          return 'Profile'
      

      Erstellen Sie als Nächstes auth.py für Ihre auth_blueprint:

      project/auth.py

      from flask import Blueprint
      from . import db
      
      auth = Blueprint('auth', __name__)
      
      @auth.route('/login')
      def login():
          return 'Login'
      
      @auth.route('/signup')
      def signup():
          return 'Signup'
      
      @auth.route('/logout')
      def logout():
          return 'Logout'
      

      In einem Terminal können Sie die Werte FLASK_APP und FLASK_DEBUG festlegen:

      • export FLASK_APP=project
      • export FLASK_DEBUG=1

      Die Umgebungsvariable FLASK_APP weist Flask an, wie die Anwendung geladen werden soll. Sie sollte darauf zeigen, wo sich create_app befindet. Für unsere Bedürfnisse verweisen wir auf das Projektverzeichnis.

      Die Umgebungsvariable FLASK_DEBUG wird durch Einstellung auf 1 aktiviert. Dadurch wird ein Debugger aktiviert, der Anwendungsfehler im Browser anzeigt.

      Stellen Sie sicher, dass Sie sich im Verzeichnis flask_auth_app befinden, und führen Sie dann das Projekt aus:

      Nun sollten Sie in einem Webbrowser in der Lage sein, zu den fünf möglichen URLs zu navigieren und den zurückgegebenen Text zu sehen, der in auth.py und main.py definiert wurde.

      Wenn Sie beispielsweise localhost:5000/profile besuchen, wird angezeigt: Profile:

      Screenshot des Projekts auf localhost Port 5000 im Browser

      Nachdem wir nun verifiziert haben, dass sich unsere Routen wie erwartet verhalten, können wir mit der Erstellung von Vorlagen fortfahren.

      Schritt 4 — Erstellen von Vorlagen

      Fahren wir damit fort, die Vorlagen zu erstellen, die in unserer Anwendung verwendet werden. Dies ist der erste Schritt, bevor wir die tatsächliche Anmeldefunktionalität implementieren können. Unsere Anwendung verwendet vier Vorlagen:

      • index.html
      • profile.html
      • login.html
      • signup.html

      Außerdem haben wir eine Basisvorlage, die einen gemeinsamen Code für jede der Seiten hat. In diesem Fall wird die Basisvorlage Navigationslinks und das allgemeine Layout der Seite enthalten. Lassen Sie uns diese jetzt erstellen.

      Erstellen Sie zunächst ein Verzeichnis templates in dem Verzeichnis project:

      • mkdir -p project/templates

      Erstellen Sie dann base.html:

      • nano project/templates/base.html

      Fügen Sie als Nächstes den folgenden Code in die Datei base.html ein:

      project/templates/base.html

      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Flask Auth Example</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
      </head>
      
      <body>
          <section class="hero is-primary is-fullheight">
      
              <div class="hero-head">
                  <nav class="navbar">
                      <div class="container">
      
                          <div id="navbarMenuHeroA" class="navbar-menu">
                              <div class="navbar-end">
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
                                      Home
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
                                      Profile
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
                                      Login
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
                                      Sign Up
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
                                      Logout
                                  </a>
                              </div>
                          </div>
                      </div>
                  </nav>
              </div>
      
              <div class="hero-body">
                  <div class="container has-text-centered">
                     {% block content %}
                     {% endblock %}
                  </div>
              </div>
          </section>
      </body>
      
      </html>
      

      Dieser Code erstellt eine Reihe von Menülinks zu jeder Seite der Anwendung und einen Bereich, in dem der Inhalt angezeigt wird.

      Anmerkung: Hinter den Kulissen verwenden wir Bulma, für das Styling und Layout. Für einen tieferen Einblick in Bulma sollten Sie die offizielle Bulma-Dokumentation lesen.

      Erstellen Sie als Nächstes templates/index.html:

      • nano project/templates/index.html

      Fügen Sie der neu erstellten Datei den folgenden Code hinzu, um Inhalte zu der Seite hinzuzufügen:

      project/templates/index.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Flask Login Example
      </h1>
      <h2 class="subtitle">
        Easy authentication and authorization in Flask.
      </h2>
      {% endblock %}
      

      Dieser Code erstellt eine grundlegende Indexseite mit einem Titel und einem Untertitel.

      Erstellen Sie als Nächstes templates/login.html:

      • nano project/templates/login.html

      Dieser Code generiert eine Anmeldeseite mit Feldern für E-Mail und Passwort. Es gibt auch ein Kontrollkästchen zur „Erinnerung“ an eine angemeldete Sitzung.

      project/templates/login.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Login</h3>
          <div class="box">
              <form method="POST" action="/login">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Your Password">
                      </div>
                  </div>
                  <div class="field">
                      <label class="checkbox">
                          <input type="checkbox">
                          Remember me
                      </label>
                  </div>
                  <button class="button is-block is-info is-large is-fullwidth">Login</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Erstellen Sie als Nächstes templates/signup.html:

      • nano project/templates/signup.html

      Fügen Sie den folgenden Code hinzu, um eine Registrierungsseite mit Feldern für E-Mail, Namen und Passwort zu erstellen:

      project/templates/signup.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Sign Up</h3>
          <div class="box">
              <form method="POST" action="/signup">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Password">
                      </div>
                  </div>
      
                  <button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Erstellen Sie als Nächstes templates/profile.html:

      • nano project/templates/profile.html

      Fügen Sie diesen Code hinzu, um eine einfache Seite mit einem Titel zu erstellen, der fest programmiert ist, um Anthony willkommen zu heißen:

      project/templates/profile.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Welcome, Anthony!
      </h1>
      {% endblock %}
      

      Später fügen wir Code hinzu, um jeden Benutzer dynamisch zu begrüßen.

      Sobald Sie die Vorlagen hinzugefügt haben, können wir die Return-Anweisungen in jeder der uns zur Verfügung stehenden Routen aktualisieren, um die Vorlage anstelle des Textes zurückzugeben.

      Aktualisieren Sie als Nächstes main.py durch Ändern der Importzeile und der Routen für index und profile:

      project/main.py

      from flask import Blueprint, render_template
      ...
      @main.route('/')
      def index():
          return render_template('index.html')
      
      @main.route('/profile')
      def profile():
          return render_template('profile.html')
      

      Jetzt aktualisieren Sie auth.py durch Ändern der Importzeile und Routen für login und signup:

      project/auth.py

      from flask import Blueprint, render_template
      ...
      @auth.route('/login')
      def login():
          return render_template('login.html')
      
      @auth.route('/signup')
      def signup():
          return render_template('signup.html')
      

      Sobald Sie diese Änderungen vorgenommen haben, sieht die Registrierungsseite wie folgt aus, wenn Sie zu /sign-up navigieren:

      Registrierungsseite unter /signup

      Sie sollten auch die Seiten für /, /login und /profile sehen können.

      Wir lassen /logout vorerst in Ruhe, da es keine Vorlage anzeigt, wenn wir fertig sind.

      Schritt 5 — Erstellen von Benutzermodellen

      Unser Benutzermodell stellt dar, was es für unsere Anwendung bedeutet, einen Benutzer zu haben. Wir haben Felder für eine E-Mail-Adresse, ein Passwort und einen Namen. In Ihrer Anwendung können Sie entscheiden, ob Sie mehr Informationen pro Benutzer speichern möchten. Sie können Dinge wie Geburtstag, Profilbild, Ort oder beliebige Benutzereinstellungen hinzufügen.

      In Flask-SQLAlchemy erstellte Modelle werden durch Klassen dargestellt, die dann in Tabellen in einer Datenbank übersetzt werden. Die Attribute dieser Klassen werden dann zu Spalten für diese Tabellen.

      Lassen Sie uns fortfahren und dieses Benutzermodell erstellen:

      Dieser Code erstellt ein Benutzermodell mit Spalten für id, email, password und name:

      project/models.py

      from . import db
      
      class User(db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Nachdem Sie ein Benutzermodell erstellt haben, können Sie nun mit der Konfiguration Ihrer Datenbank fortfahren.

      Schritt 6 — Konfigurieren der Datenbank

      Wie in den Voraussetzungen angegeben, verwenden wir eine SQLite-Datenbank. Wir könnten selbst eine SQLite-Datenbank erstellen, aber lassen wir das Flask SQLAlchemy für uns erledigen: Wir haben den Pfad der Datenbank bereits in der Datei __init__.py angegeben. Daher müssen wir Flask-SQLAlchemy nur anweisen, die Datenbank in der Python REPL zu erstellen.

      Wenn Sie Ihre Anwendung stoppen und eine Python REPL öffnen, können wir die Datenbank mit der Methode create_all auf dem Objekt db erstellen. Stellen Sie sicher, dass Sie sich immer noch in der virtuellen Umgebung und im Verzeichnis flask_auth_app befinden.

      • from project import db, create_app
      • db.create_all(app=create_app()) # pass the create_app result so Flask-SQLAlchemy gets the configuration.

      Anmerkung: Wenn die Verwendung des Python-Interpreters für Sie neu ist, können Sie die offizielle Dokumentation konsultieren.

      In Ihrem Projektverzeichnis sehen Sie nun eine Datei db.sqlite. Diese Datenbank wird unsere Benutzertabelle enthalten.

      Schritt 7 — Einrichten der Autorisierungsfunktion

      Für unsere Registrierungsfunktion nehmen wir die Daten, die der Benutzer in das Formular eingibt, und und fügen sie unserer Datenbank hinzu. Bevor wir sie hinzufügen, müssen wir sicherstellen, dass der Benutzer nicht bereits in der Datenbank vorhanden ist. Wenn dies nicht der Fall ist, müssen wir sicherstellen, dass wir das Passwort vor dem Hinzufügen in die Datenbank hashen, da wir unsere Passwörter nicht in Klartext speichern möchten.

      Beginnen wir mit dem Hinzufügen einer zweiten Funktion zur Verarbeitung der POST-Formulardaten. In dieser Funktion werden wir zuerst die vom Benutzer übergebenen Daten sammeln.

      Erstellen Sie die Funktion und fügen Sie ein redirect am Ende hinzu. Dies bietet dem Benutzer die Erfahrung einer erfolgreichen Registrierung und die Weiterleitung zu der Anmeldeseite.

      Aktualisieren Sie auth.py durch Ändern der Importzeile und Implementieren von signup_post:

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          # code to validate and add user to database goes here
          return redirect(url_for('auth.login'))
      

      Fügen wir nun den Rest des Codes hinzu, der für die Registrierung eines Benutzers erforderlich ist.

      Zuerst müssen wir das request-Objekt verwenden, um die Formulardaten zu erhalten.

      Fahren Sie mit der Aktualisierung von auth.py fort, indem Sie Importe hinzufügen und signup_post implementieren:

      auth.py

      from flask import Blueprint, render_template, redirect, url_for, request
      from werkzeug.security import generate_password_hash, check_password_hash
      from .models import User
      from . import db
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          email = request.form.get('email')
          name = request.form.get('name')
          password = request.form.get('password')
      
          user = User.query.filter_by(email=email).first() # if this returns a user, then the email already exists in database
      
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              return redirect(url_for('auth.signup'))
      
          # create a new user with the form data. Hash the password so the plaintext version isn't saved.
          new_user = User(email=email, name=name, password=generate_password_hash(password, method='sha256'))
      
          # add the new user to the database
          db.session.add(new_user)
          db.session.commit()
      
          return redirect(url_for('auth.login'))
      

      Anmerkung: Das Speichern von Passwörtern in Klartext wird als schlechte Sicherheitspraxis angesehen. In der Regel möchten Sie einen komplexen Hash-Algorithmus und ein Passwort-Salt verwenden, um Passwörter sicher zu halten.

      Schritt 8 — Testen der Registrierungsmethode

      Nachdem wir nun die Registrierungsmethode abgeschlossen haben, sollten wir in der Lage sein, einen neuen Benutzer zu erstellen. Verwenden Sie das Formular, um einen Benutzer zu erstellen.

      Es gibt zwei Möglichkeiten, wie Sie überprüfen können, ob die Registrierung funktioniert: Sie können einen Datenbankbetrachter verwenden, um die Zeile anzuzeigen, die Ihrer Tabelle hinzugefügt wurde, oder Sie können versuchen, sich mit der gleichen E-Mail-Adresse erneut zu registrieren. Wenn Sie einen Fehler erhalten, wissen Sie, dass die erste E-Mail korrekt gespeichert wurde. Lassen Sie uns also diesen Ansatz wählen.

      Wir können Code hinzufügen, um dem Benutzer mitzuteilen, dass die E-Mail bereits existiert und ihm sagen, dass er zur Anmeldeseite gehen soll. Durch Aufruf der Funktion flash senden wir eine Nachricht an die nächste Anfrage, die in diesem Fall die Weiterleitung „redirect“ ist. Die Seite, auf der wir landen, wird dann Zugriff auf diese Nachricht in der Vorlage haben.

      Zuerst fügen wir die Funktion flash hinzu, bevor wir zurück zu unserer Registrierungsseite umleiten.

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for, request, flash
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          ...
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              flash('Email address already exists')
              return redirect(url_for('auth.signup'))
      

      Um die geflashte Nachricht in der Vorlage zu erhalten, können wir diesen Code oberhalb des Formulars hinzufügen. Dadurch wird die Nachricht direkt über dem Formular angezeigt.

      project/templates/signup.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}. Go to <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}">login page</a>.
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/signup">
      

      Registrierungsfeld, das eine Nachricht anzeigt „E-Mail-Adresse bereits vorhanden. Gehen Sie zur Anmeldeseite“ in einem dunkel-rosa Feld

      Schritt 9 — Hinzufügen der Anmeldemethode

      Die Anmeldemethode ähnelt der Registrierungsfunktion insofern, als dass wir die Benutzerinformationen nehmen und etwas damit tun. In diesem Fall vergleichen wir die eingegebene E-Mail-Adresse, um zu sehen, ob sie in der Datenbank enthalten ist. Wenn dies der Fall ist, testen wir das vom Benutzer bereitgestellte Passwort, indem wir das vom Benutzer eingegebene Passwort hashen und es mit dem gehashten Passwort in der Datenbank vergleichen. Wenn beide gehaschten Passwörter übereinstimmen, wissen wir, dass der Benutzer das korrekte Passwort eingegeben hat.

      Sobald der Benutzer die Passwort-Überprüfung bestanden hat, wissen wir, dass er die richtigen Anmeldedaten hat und wir können in mit Flask-Login anmelden. Durch den Aufruf von login_user erstellt Flask-Login eine Sitzung für diesen Benutzer, die bestehen bleibt, während der Benutzer angemeldet bleibt, wodurch der Benutzer geschützte Seiten einsehen kann.

      Wir können mit einer neuen Route für den Umgang mit den gePOSTeten Dateien beginnen. Wenn sich der Benutzer erfolgreich anmeldet, leiten wir zur Profilseite weiter.

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          # login code goes here
          return redirect(url_for('main.profile'))
      

      Nun müssen wir überprüfen, ob der Benutzer die richtigen Anmeldedaten hat:

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          email = request.form.get('email')
          password = request.form.get('password')
          remember = True if request.form.get('remember') else False
      
          user = User.query.filter_by(email=email).first()
      
          # check if the user actually exists
          # take the user-supplied password, hash it, and compare it to the hashed password in the database
          if not user or not check_password_hash(user.password, password):
              flash('Please check your login details and try again.')
              return redirect(url_for('auth.login')) # if the user doesn't exist or password is wrong, reload the page
      
          # if the above check passes, then we know the user has the right credentials
          return redirect(url_for('main.profile'))
      

      Fügen wir den Block in der Vorlage hinzu, damit der Benutzer die geflashte Nachricht sehen kann. Wie bei dem Registrierungsformular fügen wir die potenzielle Fehlermeldung direkt über dem Formular hinzu:

      project/templates/login.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/login">
      

      Wir haben nun die Möglichkeit zu sagen, dass ein Benutzer erfolgreich angemeldet wurde, aber es ist nichts vorhanden, wo der Benutzer protokolliert werden kann. Hier bringen wir Flask-Login zur Verwaltung von Benutzersitzungen ein.

      Bevor wir beginnen, benötigen wir einige Dinge, damit Flask-Login funktioniert. Beginnen Sie mit dem Hinzufügen des UserMixin zu Ihrem Benutzermodell. Das UserMixin fügt dem Modell Flask-Login-Attribute hinzu, sodass Flask-Login damit arbeiten kann.

      models.py

      from flask_login import UserMixin
      from . import db
      
      class User(UserMixin, db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Dann müssen wir unseren User-Loader angeben. Ein User-Loader teilt Flask-Login mit, wie ein bestimmter Benutzer anhand der in seinem Sitzungs-Cookie gespeicherten ID gefunden werden kann. Wir können dies in unserer Funktion create_app zusammen mit dem Code init für Flask-Login hinzufügen:

      project/__init__.py

      ...
      from flask_login import LoginManager
      ...
      def create_app():
          ...
          db.init_app(app)
      
          login_manager = LoginManager()
          login_manager.login_view = 'auth.login'
          login_manager.init_app(app)
      
          from .models import User
      
          @login_manager.user_loader
          def load_user(user_id):
              # since the user_id is just the primary key of our user table, use it in the query for the user
              return User.query.get(int(user_id))
      

      Schließlich können wir die Funktion login_user hinzufügen, kurz bevor wir auf die Profilseite zur Erstellung der Sitzung weiterleiten:

      project/auth.py

      from flask_login import login_user
      from .models import User
      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          ...
          # if the above check passes, then we know the user has the right credentials
          login_user(user, remember=remember)
          return redirect(url_for('main.profile'))
      

      Mit der Einrichtung von Flask-Login können wir die Route /login verwenden. Wenn alles eingerichtet ist, sehen Sie die Profilseite.

      Profilseite mit „Willkommen, Anthony!“

      Schritt 10 — Schützen von Seiten

      Wenn Ihr Name nicht auch Anthony ist, werden Sie feststellen, dass Ihr Name falsch ist. Wir möchten, dass das Profil den Namen in der Datenbank anzeigt. Zuerst müssen wir also die Seite schützen und dann auf die Daten des Benutzers zugreifen, um den Namen zu erhalten.

      Um eine Seite bei der Verwendung von Flask-Login zu schützen, fügen wir den Dekorator @login_requried zwischen der Route und der Funktion hinzu. Dadurch wird verhindert, dass ein nicht angemeldeter Benutzer die Route sehen kann. Wenn der Benutzer nicht angemeldet ist, wird der Benutzer gemäß der Flask-Login-Konfiguration auf die Anmeldeseite weitergeleitet.

      Bei Routen, die mit dem Dekorator @login_required versehen sind, haben wir dann die Möglichkeit, das Objekt current_user innerhalb der Funktion zu verwenden. Dieser current_user stellt den Benutzer aus der Datenbank dar und wir können mit der Punktnotation auf alle Attribute dieses Benutzers zugreifen. Beispielsweise geben current_user.email, current_user.password und current_user.name sowie current_user.id die tatsächlichen Werte zurück, die in der Datenbank für den angemeldeten Benutzer gespeichert sind.

      Verwenden wir den Namen des aktuellen Benutzers und senden ihn an die Vorlage. Dann verwenden wir diesen Namen und zeigen seinen Wert an.

      project/main.py

      from flask_login import login_required, current_user
      ...
      @main.route('/profile')
      @login_required
      def profile():
          return render_template('profile.html', name=current_user.name)
      

      Aktualisieren Sie dann in der Datei profile.html die Seite, um den Wert name anzuzeigen:

      project/templates/profile.html

      ...
      <h1 class="title">
        Welcome, {{ name }}!
      </h1>
      

      Sobald wir zu unserer Profilseite gehen, sehen wir, dass der Name des Benutzers angezeigt wird.

      Begrüßungsseite für den Benutzer mit dem Namen des aktuell angemeldeten Benutzers

      Als Letztes können wir die Abmelde-Ansicht aktualisieren. Wir können die Funktion logout_user in einer Route zur Abmeldung aufrufen. Wir haben den Dekorator @login_required, weil es keinen Sinn macht, einen Benutzer abzumelden, der nicht zuerst angemeldet ist.

      project/auth.py

      from flask_login import login_user, logout_user, login_required
      ...
      @auth.route('/logout')
      @login_required
      def logout():
          logout_user()
          return redirect(url_for('main.index'))
      

      Nachdem wir uns abgemeldet und versucht haben, die Profilseite erneut anzuzeigen, wird eine Fehlermeldung angezeigt. Dies liegt daran, dass Flask-Login eine Nachricht für uns anzeigt, wenn der Benutzer nicht auf eine Seite zugreifen darf.

      Anmeldeseite mit einer Nachricht, die zeigt, dass sich der Benutzer anmelden muss, um auf die Seite zuzugreifen.

      Eine letzte Sache, die wir tun können, ist, if-Anweisungen in die Vorlage aufzunehmen, um nur die für den Benutzer relevanten Links anzuzeigen. Bevor sich der Benutzer also anmeldet, hat er die Möglichkeit, sich anzumelden oder zu registrieren. Nach der Anmeldung können Benutzer zu ihrem Profil gehen oder sich abmelden:

      templates/base.html

      ...
      <div class="navbar-end">
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
              Home
          </a>
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
              Profile
          </a>
          {% endif %}
          {% if not current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
              Login
          </a>
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
              Sign Up
          </a>
          {% endif %}
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
              Logout
          </a>
          {% endif %}
      </div>
      

      Startseite mit der Navigation Start, Anmeldung und Registrierung oben auf dem Bildschirm

      Damit haben Sie Ihre Anwendung mit Authentifizierung erfolgreich erstellt.

      Zusammenfassung

      Wir haben Flask-Login und Flask-SQLAlchemy verwendet, um ein Anmeldesystem für unsere Anwendung zu erstellen. Wir haben behandelt, wie ein Benutzer authentifiziert werden kann, indem wir zuerst ein Benutzermodell erstellen und die Benutzerinformationen speichern. Dann mussten wir verifizieren, dass das Passwort des Benutzers korrekt war, indem wir das Passwort aus dem Formular gehasht und mit dem in der Datenbank gespeicherten Benutzer verglichen haben. Schließlich haben wir unserer Anwendung Autorisierung hinzugefügt, indem wir den Dekorator @login_required auf einer Profilseite verwenden, damit nur angemeldete Benutzer diese Seite sehen können.

      Was wir in diesem Tutorial erstellt haben, wird für kleinere Anwendungen ausreichen. Wenn Sie jedoch von Anfang an mehr Funktionalität haben möchten, sollten Sie möglicherweise die Bibliotheken Flask-User oder Flask-Security verwenden, die beide auf der Bibliothek Flask-Login aufbauen.



      Source link

      Verwenden von EJS zur Vorlagenerstellung Ihrer Node-Anwendung


      Einführung

      Bei der Erstellung von schnellen, spontanen Node-Anwendungen ist manchmal eine einfache und schnelle Methode zur Erstellung von Vorlagen unserer Anwendung erforderlich.

      Jade wird standardmäßig als Ansichts-Engine für Express bereitgestellt, doch kann die Jade-Syntax für viele Anwendungsfälle übermäßig komplex sein. EJS ist eine Alternative, die diese Aufgabe gut erfüllt und sehr einfach einzurichten ist. Sehen wir uns an, wie wir eine einfache Anwendung erstellen und EJS verwenden können, um wiederholbare Teile unserer Website (Teilbereiche oder Partials) einzubinden und Daten an unsere Ansichten zu übergeben.

      Einrichten der Demo-Anwendung

      Wir werden für unsere Anwendung zwei Seiten erstellen, wobei eine Seite eine volle Breite und die andere eine Seitenleiste hat.

      Holen Sie sich den Code: Ein git-Repo des vollständigen Demo-Codes auf Github finden Sie hier.

      Dateistruktur

      Hier sind die Dateien, die wir für unsere Anwendung benötigen. Wir werden unsere Vorlage im Ansichten-Ordner „views“ vornehmen und der Rest ist ganz normale Node-Praxis.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json enthält unsere Node-Anwendungsinformationen und die Abhängigkeiten, die wir benötigen (express und EJS). server.js enthält die Einrichtung und Konfiguration unseres Express-Servers. Hier definieren wir unsere Routen zu unseren Seiten.

      Node-Einrichtung

      Gehen wir in unsere Datei package.json und richten dort unser Projekt ein.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Wir benötigen lediglich Express und EJS. Jetzt müssen wir die Abhängigkeiten installieren, die wir gerade definiert haben. Fahren Sie fort und führen Sie aus:

      Nach der Installation aller unserer Abhängigkeiten konfigurieren wir unsere Anwendung für die Verwendung von EJS und richten unsere Routen für die beiden Seiten ein, die wir benötigen: die Index-Seite (volle Breite) und die Info- oder About-Seite (Seitenleiste). Dies führen wir alles in unserer Datei server.js aus.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Hier definieren wir unsere Anwendung und stellen sie so ein, dass sie auf Port 8080 angezeigt wird. Außerdem müssen wir EJS als Anzeige-Engine für unsere Express-Anwendung mit app.set('view engine', 'ejs'); festlegen. Beachten Sie, wie wir mit res.render() eine Ansicht an den Benutzer senden. Es ist wichtig zu beachten, dass res.render() in einem Ansichten-Ordner nach der Ansicht sucht. Wir müssen also nur pages/index definieren, da der vollständige Pfad views/pages/index lautet.

      Starten unseres Servers

      Fahren Sie fort und starten Sie den Server mit:

      Jetzt können wir unsere Anwendung im Browser unter http://localhost:8080 und http://localhost:8080/about sehen. Unsere Anwendung ist eingerichtet und wir müssen unsere View-Dateien definieren und sehen, wie EJS dort funktioniert.

      Erstellen der EJS-Teilbereiche

      Wie bei vielen von uns erstellten Anwendungen gibt es viel Code, der wiederverwendet wird. Wir nennen diese Teilbereiche oder Partials und definieren drei Dateien, die wir auf allen Seiten verwenden: head.ejs, header.ejs und footer.ejs. Lassen Sie uns diese Dateien jetzt erstellen.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Hinzufügen der EJS Partials zu Ansichten

      Wir haben unsere Partials nun definiert. Wir müssen sie nur in unsere Ansichten einbinden. Gehen wir in index.ejs und about.ejs und verwenden die Syntax include zum Hinzufügen der Partials.

      Syntax für das Einbinden eines EJS-Partials

      Verwenden Sie <%- include('RELATIVE/PATH/TO/FILE') %>, um ein EJS-Partial in eine andere Datei einzubinden.

      • Der Bindestrich <%- anstatt nur <% weist EJS an, rohes HTML zu rendern.
      • Der Pfad zu dem Partial ist relativ zur aktuellen Datei.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Jetzt können wir unsere definierte Ansicht im Browser unter http://localhost:8080 sehen. node-ejs-templating-index

      Für die Info- oder About-Seite fügen wir auch eine Bootstrap-Seitenleiste hinzu, um zu zeigen, wie Partials für die Wiederverwendung über verschiedene Vorlagen und Seiten strukturiert werden können.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Wenn wir http://localhost:8080/about besuchen, können wir unsere About-Seite mit einer Seitenleiste sehen! node-ejs-templating-about

      Jetzt können wir damit beginnen, EJS für die Datenübergabe von unserer Node-Anwendung an unserer Ansichten zu verwenden.

      Übergeben von Daten an Ansichten und Partials

      Definieren wir einige grundlegende Variablen und eine Liste, die an unsere Startseite übergeben werden sollen. Gehen Sie zurück in Ihre Datei server.js und fügen Sie Folgendes in Ihrer Route app.get("https://www.digitalocean.com/") ein.

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Wir haben eine Liste namens mascots und eine einfache Zeichenfolge namens tagline erstellt. Gehen wir in unsere Datei index.ejs und verwenden sie.

      Rendern einer einzelnen Variable in EJS

      Um eine einzelne Variable zu wiederholen, verwenden wir einfach <%= tagline %>. Fügen wir dies unserer Datei index.ejs hinzu:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Überschleifen von Daten in EJS

      Um unsere Daten überzuschleifen verwenden wir .forEach. Fügen wir dies unserer View-Datei hinzu:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Jetzt können wir in unserem Browser die neu hinzugefügten Informationen sehen!

      node-ejs-templating-rendered

      Übergeben von Daten an ein Partial in EJS

      Das EJS-Partial hat Zugriff auf dieselben Daten wie die übergeordnete Ansicht. Seien Sie jedoch vorsichtig: Wenn Sie eine Variable in einem Partial referenzieren, muss sie in jeder Ansicht definiert werden, die das Partial verwendet, da sonst ein Fehler ausgelöst wird.

      Sie können Variablen auch wie folgt in der Include-Syntax definieren und an ein EJS-Partial übergeben:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Sie müssen jedoch wieder vorsichtig sein, wenn Sie annehmen, dass eine Variable definiert wurde.

      Wenn Sie in einer Partial auf eine Variable verweisen, die eventuell nicht immer definiert ist, und ihr einen Standardwert geben möchten, können Sie dies folgendermaßen tun:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      In der obigen Zeile rendert der EJS-Code den von variant, wenn er definiert ist, und default, wenn er nicht definiert ist.

      Zusammenfassung

      EJS ermöglicht uns das schnelle Erstellen von Anwendungen, wenn wir nichts allzu Komplexes benötigen. Durch Verwendung von Partials und die Möglichkeit, Variablen einfach an unsere Ansichten zu übergeben, können wir schnell einige großartige Anwendungen erstellen.

      Weitere Informationen zu EJS finden Sie in den offiziellen Dokumenten hier.



      Source link