Flask OAuth, Dark-Mode, Docker – Kostenloser BS5-Starter

Hallo Coder!

Dieser Artikel enthält die neuesten Updates von Soft-UI-Dashboardein beliebtes Open-Source-Programm Flasche Starter wurde kürzlich auf Unterstützung aktualisiert OAuth-Anmeldung für Github, dauerhafter Dunkelmodus, verbesserte Docker-Skripte, und andere kleinere UI/UX-Verbesserungen und -Korrekturen. Das Produkt kann basierend auf der zulässigen Lizenz in kommerziellen Projekten oder eLearning-Aktivitäten verwendet werden. Danke fürs Lesen!


✨Produkthighlights

Dieser einfache Starter bietet einige grundlegende Funktionen, die Designern und Entwicklern helfen könnten, eine neue App, die von Flask unterstützt wird, schneller zu starten.

  • ✅ Aktuelle Abhängigkeiten
  • ✅ Datenbank: MySql, SQLite
  • ✅ Sitzungsbasierte Authentifizierung
  • ✅ Social Login (optional) für GitHub
  • ✅ Docker-Skripte
  • ✅ BS5-Design, Dark-Mode (permanent)

Der wahrscheinlich schnellste Weg, das Projekt in einer lokalen Umgebung zu starten, besteht darin, das Docker-Setup auszuführen, das im Grunde eine einzelne Zeile ist, die in das Terminal eingegeben wird.

👉 Schritt 1 – Quelle von Github klonen/herunterladen

$ git clone 
$ cd flask-soft-ui-dashboard

👉 Schritt 2 – Im Docker starten

$ docker-compose up --build

Sobald der Befehl die Ausführung beendet hat, sollten wir in der Lage sein, die App im Browser zu besuchen.

Soft-Dashboard – Dark-Mode-Anmeldung (Flask Starter).


✨ OAuth-Anmeldung

Das Hauptmerkmal dieser Version ist die soziale Authentifizierung für GitHub, die auf der Flask-Dance-Bibliothek implementiert ist. Die Änderungen, die diese Funktion aktivieren, sind unten hervorgehoben und auch der Link zum zugehörigen Commit wird bereitgestellt.


👉 Flask OAuth Module hinzugefügtGH verpflichten

Flask-Dance==5.1.0
blinker==1.4

Flask-Dance ist die Bibliothek, die all die harte Arbeit wie das Erstellen des Github-Blueprints, das Verarbeiten des Routings und das Verwalten des Authentifizierungskontexts für uns implementiert.


👉 Flask OAuth Konfiguration aktualisierenGH verpflichten

    SOCIAL_AUTH_GITHUB  = False

    GITHUB_ID      = os.getenv('GITHUB_ID')
    GITHUB_SECRET  = os.getenv('GITHUB_SECRET')

    
    if GITHUB_ID and GITHUB_SECRET:
         SOCIAL_AUTH_GITHUB  = True

Die Funktion wird aktiv, wenn die App sie erkennt .env Archivieren Sie die Geheimnisse für Github. Ein gültiger .env Datei, die die Funktion aktiviert, sieht so aus:

# SOCIAL AUTH Github
GITHUB_ID=GITHUB_ID_value_here
GITHUB_SECRET=GITHUB_SECRET_value_here

👉 Flask OAuth Github-BlaupauseGH verpflichten



github_blueprint = make_github_blueprint(
    client_id=Config.GITHUB_ID,
    client_secret=Config.GITHUB_SECRET,
    scope = 'user',
    storage=SQLAlchemyStorage(
        OAuth,
        db.session,
        user=current_user,
        user_required=False,        
    ),   
)

👉 Flask OAuth BenutzermodellaktualisierungGH verpflichten

Dieses Update ermöglicht das Speichern der Github-Benutzer-ID in der Benutzertabelle (oauth_github-Feld) und bindet die Benutzertabelle an den OAuth-Kontext.



class Users(db.Model, UserMixin):

    id            = db.Column(db.Integer, primary_key=True)
    username      = db.Column(db.String(64), unique=True)
    email         = db.Column(db.String(64), unique=True)
    password      = db.Column(db.LargeBinary) 
    oauth_github  = db.Column(db.String(100), nullable=True)   
    
class OAuth(OAuthConsumerMixin, db.Model):                     
    user_id = db.Column(db.Integer, db.ForeignKey("Users.id")) 
    user = db.relationship(Users)                              

👉 Flask OAuth Routen aktualisierenGH verpflichten

@blueprint.route("/github")
def login_github(): 

    """ Github login """
    if not github.authorized:
        return redirect(url_for("github.login"))

    res = github.get("/user")
    return redirect(url_for('home_blueprint.index'))

👉 Flask OAuth Registrieren Sie Github BPGH verpflichten



from apps.authentication.oauth import github_blueprint           

def create_app(config):
    app = Flask(__name__)
    app.config.from_object(config)
    register_extensions(app)
    register_blueprints(app)

    app.register_blueprint(github_blueprint, url_prefix="/login") 

    configure_database(app)
    return app 

👉 Flask OAuth Aktivieren Sie die GH-AnmeldeschaltflächeGH verpflichten


{ % if config.SOCIAL_AUTH_GITHUB % }

  <p class="mb-2">or SignIn with</p>

  <a class="btn btn-outline" 
     href="{{url_for('authentication_blueprint.login_github')}}">
  <span class="text-lg fs-1 fab fa-github"></span>
  </a>

{ % endif % }

Wenn auf der Anmeldeseite die Github-Geheimnisse erkannt und von der App-Konfiguration geladen werden, wird die Social-Login-Schaltfläche automatisch aktiviert, wie unten gezeigt:

Soft Dashboard – OAuth SignIN aktiv (Flask Starter)


Soft Dashboard – Diagrammseite (Flask Starter)


✨ Design-Highlights

Dieses UI-Kit wird hergestellt von Kreativ-Tim auf Bootstrap 5 mit 10 Beispielseiten und über 70 UI-Komponenten. Alle Komponenten können Farbvariationen annehmen, die Sie mithilfe von SASS-Dateien und -Klassen einfach ändern können.

Dieses kostenlose Dashboard wird mit vorgefertigten Designblöcken geliefert, sodass der Entwicklungsprozess nahtlos verläuft und der Wechsel von unseren Seiten zur echten Website sehr einfach ist.

Weitere Informationen zu diesem erstaunlichen Design finden Sie unter offizielle Produktseite.

Soft UI Dashboard – Vorlagenversion von (Creative-Tim)


Danke fürs Lesen! Weitere Ressourcen und Unterstützung finden Sie unter:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *