https://github.com/darinelescobar/google_oauth2.0_sheets
Una aplicación web sencilla que permite a los usuarios autenticarse con su cuenta de Google para interactuar con Google Drive y Google Sheets. La aplicación utiliza OAuth 2.0 para autenticación segura y las APIs de Google Drive y Google Sheets para interactuar con los datos del usuario.
https://github.com/darinelescobar/google_oauth2.0_sheets
express-js google-api google-drive google-sheets js monolith node simple-app
Last synced: 2 months ago
JSON representation
Una aplicación web sencilla que permite a los usuarios autenticarse con su cuenta de Google para interactuar con Google Drive y Google Sheets. La aplicación utiliza OAuth 2.0 para autenticación segura y las APIs de Google Drive y Google Sheets para interactuar con los datos del usuario.
- Host: GitHub
- URL: https://github.com/darinelescobar/google_oauth2.0_sheets
- Owner: DarinelEscobar
- Created: 2024-11-23T00:21:08.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-23T00:29:43.000Z (5 months ago)
- Last Synced: 2025-02-05T20:06:55.571Z (3 months ago)
- Topics: express-js, google-api, google-drive, google-sheets, js, monolith, node, simple-app
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gestor de Google Sheets
Una aplicación simple web para interactuar con Google Drive y Google Sheets, permitiendo a los usuarios autenticarse con su cuenta de Google y gestionar archivos, hojas y celdas de manera intuitiva. Para entender el funcionamiento de sheet y la interacion con ellos, y tener persistencia de datos.
## Características
- **Autenticación Segura**: Los usuarios pueden iniciar sesión utilizando su cuenta de Google mediante OAuth 2.0.
- **Gestión de Archivos**:
- Crear nuevos archivos de Google Sheets dentro de una carpeta específica en Google Drive.
- Listar archivos existentes de Google Sheets en el Drive del usuario.
- Seleccionar un archivo para realizar operaciones.
- **Gestión de Hojas**:
- Crear nuevas hojas dentro de un archivo de Google Sheets.
- Listar hojas existentes dentro del archivo seleccionado.
- Seleccionar una hoja para interactuar con sus celdas.
- **Gestión de Celdas**:
- Visualizar celdas con contenido en la hoja seleccionada.
- Editar el contenido de celdas específicas.
- Eliminar el contenido de celdas específicas.## Requisitos Previos
- **Node.js** instalado en tu sistema.
- Una cuenta de Google.
- Credenciales de OAuth 2.0 obtenidas desde la Consola de Desarrolladores de Google.## Configuración
1. **Clonar el Repositorio**
`git clone https://github.com/tu_usuario/gestor-google-sheets.git cd gestor-google-sheets`
2. **Instalar Dependencias**
`npm install`
3. **Obtener Credenciales de Google**
- Accede a la Consola de Desarrolladores de Google.
- Crea un nuevo proyecto o utiliza uno existente.
- Habilita las APIs de **Google Drive** y **Google Sheets**.
- Configura la pantalla de consentimiento de OAuth 2.0.
- Crea credenciales de OAuth 2.0 para una aplicación web.
- Añade `http://localhost:3000` a los **Orígenes JavaScript Autorizados**.
- Añade `http://localhost:3000` a los **URIs de Redirección Autorizados**.
- Descarga el archivo JSON de credenciales o copia el **Client ID**.
4. **Configurar Variables de Entorno**
Crea un archivo `.env` en la raíz del proyecto y añade tu `CLIENT_ID`:`CLIENT_ID=TU_CLIENT_ID`
**Nota**: No compartas este archivo ni lo subas a repositorios públicos.
5. **Ejecutar la Aplicación**
`npm start`
La aplicación estará disponible en `http://localhost:3000`.
## Uso
1. **Iniciar Sesión**
- Al abrir la aplicación, haz clic en **"Iniciar sesión con Google"**.
- Autoriza los permisos solicitados.
2. **Gestión de Archivos**
- **Crear Nuevo Archivo**: Crea un nuevo archivo de Google Sheets dentro de la carpeta `appTEST` en tu Google Drive.
- **Listar Archivos**: Muestra una lista de tus archivos de Google Sheets. Haz clic en un archivo para seleccionarlo.
3. **Gestión de Hojas**
- **Crear Nueva Hoja**: Añade una nueva hoja al archivo seleccionado.
- **Listar Hojas**: Muestra las hojas existentes en el archivo. Haz clic en una hoja para seleccionarla.
4. **Gestión de Celdas**
- **Ver Celdas con Contenido**: Muestra todas las celdas con contenido en la hoja seleccionada.
- **Editar Celda**:
- Ingresa el rango de la celda (por ejemplo, `A1`).
- Ingresa el nuevo valor.
- Haz clic en **"Actualizar Celda"**.
- **Eliminar Celda**:
- Ingresa el rango de la celda a eliminar.
- Haz clic en **"Eliminar Celda"**.
5. **Cerrar Sesión**
- Haz clic en **"Cerrar sesión"** para finalizar la sesión.## Tecnologías Utilizadas
- **Frontend**:
- HTML5 y CSS3 para la estructura y estilos.
- JavaScript para la lógica del cliente.
- Google APIs Client Library para JavaScript.
- **Backend**:
- Node.js y Express para servir la aplicación y manejar la configuración.
- dotenv para manejar variables de entorno.## Estructura del Proyecto
- `app.js`: Servidor Express que sirve la aplicación y proporciona las credenciales de forma segura.
- `index.html`: Archivo HTML principal con la interfaz de usuario.
- `js.js`: Lógica del cliente para manejar la autenticación y las interacciones con las APIs de Google.
- `style.css`: Estilos CSS para la aplicación.
- `.env`: Archivo para almacenar variables de entorno (no incluido en el repositorio).
- `package.json`: Archivo de configuración de npm con las dependencias y scripts.## Consideraciones de Seguridad
- Las credenciales sensibles (`CLIENT_ID`) se manejan a través de variables de entorno y no se exponen en el código fuente del cliente.
- Asegúrate de no subir el archivo `.env` a ningún repositorio público.
- Los tokens de acceso se manejan de forma segura utilizando la biblioteca de Google Identity Services.