Autorización de usuario en Strewlit con OIDC y Google

De actividad en el mundo de la inteligencia artificial en las últimas semanas, un importante anuncio de Streamlit de que ahora admite la autenticación de inicio de sesión de OpenID Connect (OIDC) casi me pasó.

La autorización y verificación del usuario puede ser una consideración crucial para los científicos de datos, los ingenieros de aprendizaje automático y otros involucrados en la creación de paneles, pruebas de concepto de aprendizaje automático (POC) y otras aplicaciones. Mantener los datos potencialmente confidenciales privados es primordial, por lo que debe asegurarse de que solo los usuarios autorizados puedan acceder a su aplicación.

En este artículo, discutiremos esta nueva característica de Streamlit y desarrollaremos una aplicación simple para mostrarla. Nuestra aplicación puede ser simple, pero demuestra todas las cosas clave que necesita saber al crear un software más complejo.

¿Qué es auxiliar?

Si nunca ha oído hablar de Streamlit, es una biblioteca de Python de código abierto diseñada para construir e implementar aplicaciones web interactivas con un código mínimo rápidamente. Se utiliza ampliamente para la visualización de datos, la implementación del modelo de aprendizaje automático, los paneles y las herramientas internas. Con Streamlit, los desarrolladores pueden crear aplicaciones web que usan Python sin experiencia frontend en HTML, CSS o JavaScript.

Sus características clave incluyen widgets para la entrada del usuario, el almacenamiento en caché incorporado para la optimización del rendimiento y la fácil integración con bibliotecas de ciencias de datos como pandas, matplotlib y tensorflow. Streamlit es particularmente popular entre los científicos de datos y los profesionales de AI/ML para compartir ideas y modelos en una interfaz basada en la web.

Si desea obtener más información sobre Streamlit, he escrito un artículo de TDS sobre el uso de él para crear un tablero de datos, al que puede acceder usando este enlace.

¿Qué es OIDC?

OpenID Connect (OIDC) es un protocolo de autenticación que se basa en OAuth 2.0. Permite a los usuarios iniciar sesión de forma segura en aplicaciones utilizando sus credenciales existentes de proveedores de identidad como Google, Microsoft, OKTA y AUTH0.

Habilita el inicio de sesión único (SSO) y proporciona información de identidad del usuario a través de tokens de identificación, incluidas las direcciones de correo electrónico y los detalles del perfil. A diferencia de OAuth, que se centra en la autorización, OIDC está diseñado explícitamente para la autenticación, lo que lo convierte en un estándar para experiencias de inicio de sesión seguras, escalables y fáciles de usar en aplicaciones web y móviles.

En este artículo, le mostraré cómo configurar las cosas y escribir código para una aplicación de transmisión que usa OIDC para solicitar su correo electrónico y contraseña de Google. Puede usar esos detalles para iniciar sesión en la aplicación y acceder a una segunda pantalla que contiene un ejemplo de un tablero de datos.

Requisitos previos

Como este artículo se centra en usar Google como proveedor de identidad, si aún no tiene uno, necesitará una dirección de correo electrónico de Google y una cuenta de Google Cloud. Una vez que tenga su correo electrónico, inicie sesión en Google Cloud con él usando el enlace a continuación.

https://console.cloud.google.com

Si le preocupa el gasto de registrarse en Google Cloud, no lo sea. Ofrecen una prueba gratuita de 90 días y $ 300 en créditos. Solo paga por lo que usa y puede cancelar la suscripción de su cuenta en la nube en cualquier momento, antes o después de que expire su prueba gratuita. De todos modos, lo que haremos aquí debería no incurrir en ningún costo. Sin embargo, siempre recomiendo configurar alertas de facturación para cualquier proveedor de la nube que se registre, por si acaso.

Volveremos a lo que debe hacer para configurar su cuenta de nube más tarde.

Configuración de nuestro entorno de desarrollo

Estoy desarrollando usando WSL2 Ubuntu Linux en Windows, pero lo siguiente también debería funcionar en Windows regular. Antes de comenzar un proyecto como este, siempre creo un entorno de desarrollo de Python separado donde pueda instalar cualquier software necesario y experimentar con la codificación. Ahora, cualquier cosa que haga en este entorno se aislará y no afectará mis otros proyectos.

Utilizo Miniconda para esto, pero puedes usar cualquier método que mejor te convenga. Si desea seguir la ruta de Miniconda y aún no la tiene, primero debe instalar Miniconda.

Ahora, puede configurar su entorno como este.

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

Lo que construiremos

Esta será una aplicación de transmisión. Inicialmente, habrá una pantalla que muestra el siguiente texto,

Una aplicación de ejemplo de ejemplo que muestra el uso de OIDC y el correo electrónico de Google para la autenticación de inicio de sesión

Utilice el botón en la barra lateral para iniciar sesión.

NÓTESE BIEN. He implementado una versión en funcionamiento de mi aplicación en la nube de la comunidad de optimismo. Para obtener una vista previa de adelanto, haga clic en el enlace a continuación. Es posible que deba “despertar” la aplicación primero si nadie ha hecho clic en ella por un tiempo, pero esto solo lleva unos segundos.

https://oidc-example.streamlit.app

Configurar en Google Cloud

Para habilitar la verificación de correo electrónico utilizando su cuenta de Google Gmail, hay algunas cosas que debe hacer primero en Google Cloud. Son bastante sencillos, así que tómese su tiempo y siga cada paso con cuidado. Supongo que ya ha configurado o tiene una cuenta de Google Email y Cloud, y que creará un nuevo proyecto para su trabajo.

Ir a Consola de Google Cloud e inicie sesión. Debería ver una pantalla similar a la que se muestra a continuación.

Primero debe configurar un proyecto. Hacer clic el Seleccionador de proyecto botón. Es inmediatamente a la derecha del logotipo de Google Cloud, cerca de la parte superior izquierda de la pantalla y será etiquetado con el nombre de uno de sus proyectos existentes o “Seleccione un proyecto“Si no tiene un proyecto existente. En la ventana emergente que aparece, haga clic en el Nuevo proyecto botón ubicado en la parte superior derecha. Esto le permitirá insertar un nombre de proyecto. A continuación, haga clic en el Crear botón.

Una vez hecho esto, se mostrará el nuevo nombre de su proyecto junto al logotipo de Google Cloud en la parte superior de la pantalla. A continuación, haga clic en el menú de estilo hamburguesa en la parte superior izquierda de la página.

• Navegar por API y servicios → Credenciales
• Hacer clic Crear credenciales → ID de cliente OAuth
• Seleccionar Aplicación web
• Agregar http: // localhost: 8501/oauth2callback como un URI de redirección autorizado
• Tome nota del ID de cliente y Secreto del cliente Como los necesitaremos en un momento.

Configuración local y código Python

Decida en qué carpeta local vivirá su archivo de aplicación Python Python.

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

# ——— Page setup & state ———
st.set_page_config(page_title="SecureApp", page_icon="🔑", layout="wide")

if "page" not in st.session_state:
    st.session_state.page = "main"

# ——— Auth Helpers ———
def _user_obj():
    return getattr(st, "user", 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, "name", "Guest") if u else "Guest"

# ——— Main & Dashboard Pages ———
def main():
    if not user_is_logged_in():
        st.title("An example Streamlit app showing the use of OIDC and Google email for login authentication")
        st.subheader("Use the sidebar button to log in.")
    else:
        st.title("Congratulations")
        st.subheader("You’re logged in! Click Dashboard on the sidebar.")

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

    df = pd.DataFrame({
        "Month": ["Jan","Feb","Mar","Apr","May","Jun"],
        "Sales": np.random.randint(100,500,6),
        "Profit": np.random.randint(20,100,6)
    })
    st.dataframe(df)

    fig, ax = plt.subplots()
    ax.plot(df["Month"], df["Sales"], marker="o", label="Sales")
    ax.set(xlabel="Month", ylabel="Sales", title="Monthly Sales Trend")
    ax.legend()
    st.pyplot(fig)

    fig, ax = plt.subplots()
    ax.bar(df["Month"], df["Profit"], label="Profit")
    ax.set(xlabel="Month", ylabel="Profit", title="Monthly Profit")
    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.page = "main"
        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.page = "dashboard"
    st.rerun()

# ——— Page Dispatch ———
if st.session_state.page == "main":
    main()
else:
    dashboard()

Este script construye una aplicación de transmisión de dos páginas con el inicio de sesión de Google (u OIDC) y un tablero simple:

1. Configuración y estado de la página
   • Configura la pestaña del navegador (título/icono/diseño).
   • Usos st.session_state["page"] Para recordar si estás en la pantalla “principal” o en el “tablero”.
2. Autor a los ayudantes
   • _user_obj() Agarra con seguridad el st.user objeto si existe.
   • user_is_logged_in() y user_name(). Verifique si ha iniciado sesión y obtiene su nombre (o predeterminado a “Invitado”).
3. Páginas principales vs. Panel
   • Principal: Si no ha iniciado sesión, muestre un título/subtítulo que le solicita que inicie sesión; Si ha iniciado sesión, muestre un mensaje de felicitación y diríjase al tablero.
   • Panel: lo saluda por su nombre, genera un marco de datos ficticio de ventas/ganancias mensuales, lo muestra y lo convierte en un gráfico de línea para ventas más un cuadro de barra con fines de lucro.
4. Navegación de la barra lateral
   • Muestra un botón de inicio de sesión o de sesión dependiendo de su estado (llamando st.login("google") o st.logout()).
   • Muestra un botón “Panel de tablero” que solo está habilitado una vez que estás conectado.
5. Envío de la página
   • En la parte inferior, se verifica st.session_state.page y corre tampoco main() o dashboard() respectivamente.

Configuración de su secrets.toml Para la autenticación de Google Oauth

En la misma carpeta donde vive su archivo app.py, cree una subcarpeta llamada .streamlit. Ahora vaya a esta nueva subcarpeta y cree un archivo llamado secretos.toml. El ID de cliente y Secreto del cliente Desde Google Cloud se debe agregar a ese archivo, junto con un URI de redirección y un secreto de cookies. Su archivo debería verse algo así,

#
# secrets.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"

Bien, ahora deberíamos poder ejecutar nuestra aplicación. Para hacer eso, regrese a la carpeta donde vive App.py y escriba esto en la línea de comando.

(streamlit) $ streamlit run app.py

Si todo ha ido bien con su código y configuración, debería ver la siguiente pantalla.

Observe que el botón del tablero en la barra lateral debe estar atenuada porque aún no ha iniciado sesión. Comience haciendo clic en el botón de inicio de sesión en la barra lateral. Debería ver la pantalla a continuación (he oscurecido mis credenciales por razones de seguridad),

Una vez que elija una cuenta e inicie sesión, la pantalla de la aplicación Streamlit cambiará a esto.

También notará que el botón del tablero ahora se puede hacer clic, y cuando haga clic en él, debería ver una pantalla como esta.

Finalmente, vuelva a iniciar sesión y la aplicación debería volver a su estado inicial.

Resumen

En este artículo, expliqué que la autorización OIDC adecuada ahora está disponible para los usuarios simplificados. Esto le permite asegurarse de que cualquier persona que use su aplicación sea un usuario legítimo. Además de Google, también puede usar proveedores populares como Microsoft, Oauth, OKTA y otros.

Le expliqué qué era Streamlit y sus usos, y describí brevemente el protocolo de autenticación de OpenID Connect (OIDC).

Para mi ejemplo de codificación, me concentré en usar Google como autenticador y le mostré los pasos de requisitos previos para configurarlo correctamente para su uso en la plataforma en la nube de Google.

También proporcioné una aplicación de muestra de muestra que muestra la autorización de Google en acción. Aunque esta es una aplicación simple, destaca todas las técnicas que necesita si sus necesidades crecen en complejidad.