Benutzerautorisierung in Stromflächen mit OIDC und Google

der Aktivität in der KI -Welt in den letzten Wochen, eine kürzlich wichtige Ankündigung von streamlit, dass sie jetzt OpenID Join (OIDC) -Login -Authentifizierung unterstützt.

Die Autorisierung und Überprüfung der Benutzer kann eine entscheidende Überlegung für Datenwissenschaftler, Ingenieure und andere, die an der Erstellung von Dashboards, maschinellem Lernen von Ideas (POCs) und anderen Anwendungen beteiligt sind. Das Beibehalten potenziell sensibler Daten privat ist von größter Bedeutung. Sie möchten daher sicherstellen, dass nur autorisierte Benutzer auf Ihre App zugreifen können.

In diesem Artikel werden wir diese neue Funktion von Streamlit diskutieren und eine einfache App entwickeln, um sie zu demonstrieren. Unsere App magazine einfach sein, aber sie zeigt alle wichtigen Dinge, die Sie beim Erstellen komplexerer Software program wissen müssen.

Was ist stromlit?

Wenn Sie noch nie von Streamlit gehört haben, handelt es sich um eine Open-Supply-Python-Bibliothek, mit der interaktive Webanwendungen schnell mit minimalem Code erstellt und bereitgestellt werden sollen. Es wird häufig für die Datenvisualisierung, Bereitstellung von maschinellem Lernmodell, Dashboards und interne Instruments verwendet. Mit Streamlit können Entwickler Internet -Apps mit Python ohne Frontend -Erfahrung in HTML, CSS oder JavaScript erstellen.

Zu den wichtigsten Funktionen gehören Widgets für Benutzereingaben, integriertes Caching für die Leistungsoptimierung und eine einfache Integration in Datenwissenschaftsbibliotheken wie Pandas, Matplotlib und TensorFlow. Streamlit ist besonders beliebt bei Datenwissenschaftlern und KI/ML-Praktikern, um Erkenntnisse und Modelle in einer webbasierten Schnittstelle zu teilen.

Wenn Sie mehr über Streamlit erfahren möchten, habe ich einen TDS -Artikel über das Erstellen eines Daten -Dashboards geschrieben, auf das Sie mithilfe mithilfe zugreifen können Dieser Hyperlink.

Was ist OIDC?

OpenID Join (OIDC) ist ein Authentifizierungsprotokoll, das auf OAuth 2.0 aufbaut. Es ermöglicht Benutzern, sich sicher bei Anwendungen zu melden, indem sie ihre vorhandenen Anmeldeinformationen von Identitätsanbietern wie Google, Microsoft, Okta und Auth0 verwenden.

Es ermöglicht eine einzelne Signal-On (SSO) und bietet Benutzeridentitätsinformationen über ID-Token, einschließlich E-Mail-Adressen und Profildetails. Im Gegensatz zu OAuth, der sich auf die Autorisierung konzentriert, ist OIDC ausdrücklich zur Authentifizierung konzipiert, was es zu einem Normal für sichere, skalierbare und benutzerfreundliche Anmeldeberfahrungen in Internet- und Mobilanwendungen macht.

In diesem Artikel zeige ich Ihnen, wie Sie Dinge einrichten und Code für eine Streamlit -App schreiben, die OIDC verwendet, um Ihre Google -E -Mail und Ihr Passwort aufzunehmen. Sie können diese Particulars verwenden, um sich bei der App anzumelden und auf einen zweiten Bildschirm zuzugreifen, der ein Beispiel für ein Daten -Dashboard enthält.

Voraussetzungen

Da sich dieser Artikel auf die Verwendung von Google als Identitätsanbieter konzentriert, benötigen Sie eine Google -E -Mail -Adresse und ein Google Cloud -Konto. Sobald Sie Ihre E -Mail haben, melden Sie sich bei Google Cloud über den folgenden Hyperlink an.

https://console.cloud.google.com

Wenn Sie sich Sorgen über die Kosten für die Anmeldung für Google Cloud machen, sollten Sie dies nicht tun. Sie bieten eine kostenlose 90-Tage-Testversion und Guthaben von 300 US-Greenback an. Sie zahlen nur für das, was Sie verwenden, und können Ihr Cloud -Konto -Abonnement jederzeit, bevor oder nach Ablauf Ihrer kostenlosen Testversion, stornieren. Egal, was wir hier tun werden, sollte keine Kosten entstehen. Ich empfehle jedoch immer, Abrechnungswarnungen für jeden Cloud -Anbieter einzurichten, für den Sie sich anmelden – nur für den Fall.

Wir werden zu dem zurückkehren, was Sie tun müssen, um Ihr Cloud -Konto später einzurichten.

Aufstellen unserer Entwicklerumgebung

Ich entwickle mit WSL2 Ubuntu Linux unter Home windows, aber das folgende sollte auch unter normalen Home windows funktionieren. Bevor ich ein solches Projekt starte, erstelle ich immer eine separate Python -Entwicklungsumgebung, in der ich jede erforderliche Software program installieren und mit Codierung experimentieren kann. Jetzt wird alles, was ich in dieser Umgebung tue, verlegt und hat keinen Einfluss auf meine anderen Projekte.

Ich benutze dafür Miniconda, aber Sie können jede Methode verwenden, die am besten zu Ihnen passt. Wenn Sie der Miniconda -Route folgen möchten und sie noch nicht haben möchten, müssen Sie zuerst Miniconda installieren.

Jetzt können Sie Ihre Umgebung so einrichten.

(base) $ conda create -n streamlit python=3.12 -y
(base) $ conda activate streamlit
# Set up required Libraries
(streamlit) $ pip set up streamlit  streamlit-extras Authlib 
(streamlit) $ pip set up pandas matplotlib numpy

Was werden wir bauen

Dies wird eine streamlitische App sein. Anfänglich gibt es einen Bildschirm, auf dem der folgende Textual content angezeigt wird.

Ein Beispiel streamlit -App, das die Verwendung von OIDC- und Google -E -Mails für die Anmeldeauthentifizierung zeigt

Bitte verwenden Sie die Schaltfläche in der Seitenleiste, um sich anzumelden.

NB. Ich habe eine funktionierende Model meiner App für die Streamlit Group Cloud bereitgestellt. Für eine Vorschau -Vorschau klicken Sie auf den Hyperlink unten. Möglicherweise müssen Sie zuerst die App „aufwachen“, wenn niemand für eine Weile darauf geklickt hat, aber dies dauert nur wenige Sekunden.

https://oidc-example.streamlit.app

Richten Sie auf Google Cloud ein

Um eine E -Mail -Überprüfung mithilfe Ihres Google Google Mail -Kontos zu aktivieren, müssen Sie einige Dinge in der Google Cloud zuerst ausführen. Sie sind ziemlich unkompliziert, additionally nehmen Sie sich Zeit und befolgen Sie jeden Schritt vorsichtig. Ich gehe davon aus, dass Sie bereits ein Google -E -Mail- und Cloud -Konto eingerichtet oder ein neues Projekt für Ihre Arbeit erstellen.

Gehen zu Google Cloud Console und melden Sie sich an. Sie sollten einen Bildschirm sehen, der dem unten gezeigt ist.

Sie müssen zuerst ein Projekt einrichten. Klicken Die Projektpicker Style. Es befindet sich sofort rechts neben dem Google Cloud -Brand, oben hyperlinks auf dem Bildschirm und wird mit dem Namen eines Ihrer vorhandenen Projekte oder “gekennzeichnet.Wählen Sie ein Projekt aus”Wenn Sie kein vorhandenes Projekt haben. Im Popup klicken Sie auf die Neues Projekt Knopf Oben rechts. Auf diese Weise können Sie einen Projektnamen einfügen. Klicken Sie anschließend auf die Erstellen Style.

Sobald dies erledigt ist, wird Ihr neuer Projektname neben dem Google Cloud -Brand oben auf dem Bildschirm angezeigt. Klicken Sie anschließend oben hyperlinks auf der Seite auf das Menü im Hamburger-Stil.

• Navigieren zu APIs & Dienste → Anmeldeinformationen
• Klicken Erstellen Sie Anmeldeinformationen → OAuth -Consumer -ID
• Wählen Webanwendung
• Hinzufügen http: // localhost: 8501/oauth2callback als an Autorisierte Umleitungs -URI
• Beachten Consumer -ID Und Kundengeheimnis wie wir sie ein bisschen brauchen.

Lokales Setup und Python -Code

Entscheiden Sie, in welchem ​​lokalen Ordner Ihre Hauptpython -App -App -Datei in der Python -Streamlit -App gelebt wird. Erstellen Sie dort eine Datei wie app.py und fügen Sie den folgenden Python -Code ein.

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

# ——— Web page setup & state ———
st.set_page_config(page_title="SecureApp", page_icon="🔑", structure="vast")

if "web page" not in st.session_state:
    st.session_state.web page = "important"

# ——— Auth Helpers ———
def _user_obj():
    return getattr(st, "consumer", None)

def user_is_logged_in() -> bool:
    u = _user_obj()
    return bool(getattr(u, "is_logged_in", False)) if u else False

def user_name() -> str:
    u = _user_obj()
    return getattr(u, "title", "Visitor") if u else "Visitor"

# ——— Most important & Dashboard Pages ———
def important():
    if not user_is_logged_in():
        st.title("An instance Streamlit app displaying the usage of OIDC and Google electronic mail for login authentication")
        st.subheader("Use the sidebar button to log in.")
    else:
        st.title("Congratulations")
        st.subheader("You’re logged in! Click on Dashboard on the sidebar.")

def dashboard():
    st.title("Dashboard")
    st.subheader(f"Welcome, {user_name()}!")

    df = pd.DataFrame({
        "Month": ("Jan","Feb","Mar","Apr","Might","Jun"),
        "Gross sales": np.random.randint(100,500,6),
        "Revenue": np.random.randint(20,100,6)
    })
    st.dataframe(df)

    fig, ax = plt.subplots()
    ax.plot(df("Month"), df("Gross sales"), marker="o", label="Gross sales")
    ax.set(xlabel="Month", ylabel="Gross sales", title="Month-to-month Gross sales Pattern")
    ax.legend()
    st.pyplot(fig)

    fig, ax = plt.subplots()
    ax.bar(df("Month"), df("Revenue"), label="Revenue")
    ax.set(xlabel="Month", ylabel="Revenue", title="Month-to-month Revenue")
    ax.legend()
    st.pyplot(fig)

# ——— Sidebar & Navigation ———
st.sidebar.header("Navigation")

if user_is_logged_in():
    if st.sidebar.button("Logout"):
        st.logout()
        st.session_state.web page = "important"
        st.rerun()
else:
    if st.sidebar.button("Login"):
        st.login("google")  # or "okta"
        st.rerun()

if st.sidebar.button("Dashboard", disabled=not user_is_logged_in()):
    st.session_state.web page = "dashboard"
    st.rerun()

# ——— Web page Dispatch ———
if st.session_state.web page == "important":
    important()
else:
    dashboard()

Dieses Skript erstellt eine zweiseitige Streamlit-App mit Google (oder OIDC) Anmeldung und einem einfachen Dashboard:

1. SEITE SETUP & STATE
   • Konfiguriert die Registerkarte Browser (Titel/Image/Format).
   • Verwendung st.session_state("web page") Um sich zu erinnern, ob Sie sich auf dem Hauptbildschirm oder dem „Dashboard“ befinden.
2. Auth -Helfer
   • _user_obj() sicher greifen st.consumer Objekt, wenn es existiert.
   • user_is_logged_in() Und user_name(). Überprüfen Sie, ob Sie sich angemeldet haben, und erhalten Sie Ihren Namen (oder standardmäßig „Gast“).
3. Haupt- und Dashboard -Seiten
   • Hauptsächlich: Wenn Sie nicht angemeldet sind, zeigen Sie einen Titel/Subheader an, der Sie zum Anmelden auffordert. Wenn Sie angemeldet sind, zeigen Sie eine Glückwunschnachricht an und leiten Sie zum Dashboard.
   • Armaturenbrett: begrüßt Sie namentlich, generiert einen Dummy -Datenframe für monatliche Umsatz/Gewinn, zeigt ihn an und macht ein Zeilendiagramm für den Umsatz sowie ein Balkendiagramm für Gewinn.
4. Seitenleiste Navigation
   • Zeigt je nach Standing eine Schaltfläche Anmeldung oder Abmelden an (Anrufe aufrufen st.login("google") oder st.logout()).
   • Zeigt eine „Dashboard“ -Style angezeigt, die erst dann aktiviert ist, sobald Sie sich angemeldet haben.
5. Seitenversand
   • Unten überprüft es st.session_state.web page und läuft entweder important() oder dashboard() entsprechend.

Konfigurieren Ihrer secrets and techniques.toml Für die Google OAuth -Authentifizierung

Erstellen Sie im selben Ordner, in dem Ihre App.py -Datei lebt .streamlit. Gehen Sie nun in diesen neuen Unterordner und erstellen Sie eine Datei mit dem Titel Geheimnisse.Toml. Der Consumer -ID Und Kundengeheimnis Von Google Cloud sollte dieser Datei zusammen mit einem Umleitungs -URI- und Cookie -Geheimnis hinzugefügt werden. Ihre Datei sollte ungefähr so ​​aussehen,

#
# secrets and techniques.toml 
#
(auth)
redirect_uri = "http://localhost:8501/oauth2callback"
cookie_secret = "your-secure-random-string-anything-you-like"

(auth.google)
client_id = "************************************.apps.googleusercontent.com"
client_secret = "*************************************"
server_metadata_url = "https://accounts.google.com/.well-known/openid-configuration"

Okay, wir sollten jetzt in der Lage sein, unsere App auszuführen. Gehen Sie dazu zurück zu dem Ordner, in dem App.py lebt, und geben Sie dies in die Befehlszeile ein.

(streamlit) $ streamlit run app.py

Wenn alles mit Ihrem Code und Ihrer Einrichtung intestine gegangen ist, sollten Sie den folgenden Bildschirm sehen.

Beachten Sie, dass die Dashboard -Style in der Seitenleiste ausgegraut werden sollte, da Sie noch nicht angemeldet sind. Klicken Sie mit der Schaltfläche Anmeldung in der Seitenleiste. Sie sollten den Bildschirm unten sehen (ich habe meine Anmeldeinformationen aus Sicherheitsgründen verdeckt).

Sobald Sie ein Konto auswählen und sich anmelden, ändert sich die Anzeige der Streamlit -App.

Sie werden auch feststellen, dass die Schaltfläche Das Dashboard jetzt anklickbar ist. Wenn Sie darauf klicken, sollten Sie einen solchen Bildschirm sehen.

Melden Sie sich schließlich wieder aus, und die App sollte in ihren Anfangszustand zurückkehren.

Zusammenfassung

In diesem Artikel habe ich erklärt, dass die ordnungsgemäße OIDC -Autorisierung nun Stromlit -Benutzern zur Verfügung steht. Auf diese Weise können Sie sicherstellen, dass jeder, der Ihre App verwendet, ein legitimer Benutzer ist. Neben Google können Sie auch beliebte Anbieter wie Microsoft, OAuth, Okta und andere verwenden.

Ich erklärte, was Stromlit und seine Verwendung battle, und beschrieb das OpenID Join -Authentifizierungsprotokoll kurz.

Für mein Codierungsbeispiel habe ich mich darauf konzentriert, Google als Authentikator zu verwenden, und Ihnen die Voraussetzungen für die korrekte Einrichtung für die Verwendung auf der Cloud -Plattform von Google gezeigt.

Ich habe auch eine Beispiel -Streamlit -App zur Verfügung gestellt, die die Google -Autorisierung in Aktion zeigt. Obwohl dies eine einfache App ist, werden alle von Ihnen benötigten Techniken hervorgehoben, falls Ihre Bedürfnisse in Komplexität wachsen müssen.