Conecte a los usuarios a los datos a través de sus aplicaciones con Storage Browser para Amazon S3 | Servicios web de Amazon

Hoy presentamos Storage Browser para Amazon S3, un componente de interfaz de usuario de código abierto que puede agregar a sus aplicaciones web para permitir que los usuarios finales interactúen con sus datos almacenados en Amazon Simple Storage Service (Amazon S3). Con este componente de interfaz, los usuarios finales autorizados pueden explorar, cargar, descargar, copiar y eliminar datos de Amazon S3 según sus permisos específicos, que usted controla mediante los servicios de identidad y seguridad de AWS o soluciones administradas personalizadas.

Storage Browser para S3 alivia la carga de los desarrolladores que buscan brindar a los usuarios finales acceso a los datos en S3, y está diseñado para que los usuarios finales, como clientes, socios y empleados, puedan trabajar de manera eficiente con los datos independientemente de su familiaridad con Amazon. S3 o servicios web de Amazon. Además, los desarrolladores pueden personalizar la apariencia de la interfaz del Explorador de almacenamiento para alinearla con el diseño de su aplicación.

Veamos una demostración rápida para mostrarle cómo puede comenzar.

Instalación
Storage Browser para S3 es un componente de AWS Amplify UI React, por lo tanto, debe usarlo en una aplicación web creada con React o un marco basado en React como Next.Js, Gatsby, Remix o cualquier otro. También debe tener instalados los paquetes AWS Amplify y AWS Amplify UI React.

Esta demostración utiliza Next.js. Si desea aprender cómo configurar una aplicación desde cero, consulte esta guía paso a paso en configurar AWS Amplify y usar los componentes de la interfaz de usuario de Amplify React con una nueva aplicación Next.js.

No necesita instalar toda la biblioteca @aws-amplify/ui-react para usar Storage Browser para S3. Puede instalar solo el paquete específico de almacenamiento con el siguiente comando si eso es todo lo que desea usar.

npm i @aws-amplify/ui-react-storage aws-amplify

Si tiene una aplicación existente que ya tiene instalado el paquete Amplify UI React, asegúrese de actualizar sus dependencias para importar la última versión y ejecutar npm install para actualizar cualquier instalación existente.

Por último, si está creando una aplicación desde cero, asegúrese de ejecutar npm create amplify@latest en el directorio de su aplicación para que pueda usar las diversas categorías proporcionadas por Amplify, como autenticación, almacenamiento y otras.

Elegir un modo de autorización
Storage Browser para S3 requiere que se configure autenticación y autorización para que pueda representar los depósitos o prefijos de S3 a los que pueden acceder los usuarios finales, así como las acciones que pueden realizar.

Hay tres opciones para configurar permisos, cada una adecuada para diferentes casos de uso:

Uso de la autenticación de AWS Amplify – Esta opción es ideal cuando desea brindarles a sus clientes y socios externos acceso a sus datos en Amazon S3. Puede configurar Amplify Storage que utiliza Autenticación de AWS Amplify de forma predeterminada para gestionar el control de acceso y la seguridad de los archivos. Está impulsado por Amazon Cognito y viene con componentes de interfaz de usuario prediseñados para implementar flujos de registro, inicio y cierre de sesión de usuarios.

Uso del Centro de identidad de AWS IAM – Esta opción es ideal para una solución escalable que proporciona a toda su fuerza laboral acceso a sus datos en S3 a través de Storage Browser para S3. Usted asocia una instancia de S3 Access Grants con su Centro de identidad de AWS Identity and Access Management (IAM) para administrar de forma centralizada los permisos de S3 Access Grants para sus usuarios y grupos, incluidos aquellos alojados en proveedores de identidad externos como Microsoft Entra ID, Okta y otros. Además, cada evento de datos de AWS CloudTrail para S3 hace referencia a la identidad del usuario final que accedió a sus datos, lo que ayuda a aumentar la observabilidad de su acceso a los datos.

Uso de roles de IAM con concesiones de acceso de Amazon S3 – Esta opción es ideal cuando desea proporcionar a los principales de IAM acceso a sus datos a través de Storage Browser para S3. Para configurar esto, primero debe crear una instancia de Concesiones de acceso de S3 que pueda usar para asignar permisos para depósitos y prefijos de S3 a las identidades de IAM deseadas. Luego, crea una función de IAM que tiene permisos para invocar s3:GetDataAccess para obtener acceso temporal con privilegios mínimos a los prefijos o depósitos de S3.

Esta demostración supone que los usuarios finales no forman parte de nuestra organización, por lo que Amplify Auth es una excelente opción para este caso.

Configurar permisos
Primero, debes Configure Amplify Storage siguiendo esta guía. Entonces, abre amplify/storage/resource.ts para declarar un depósito S3 junto con las reglas de acceso deseadas siguiendo las Amplificar el modelo de autorización que utiliza prefijos para configurar el almacenamiento aislado para usuarios autorizados.

A continuación, cree un componente llamado Navegador de almacenamiento que resume la integración con Amplify Auth y que podemos incluir fácilmente en una página más adelante. Asegúrate de llamar Amplify.config() para unirlo todo junto con una referencia a amplify_outputs.json como parámetro.

Visite la Guía del usuario de S3 para obtener instrucciones detalladas sobre cómo configurar la autenticación y autorización para Storage Browser para S3.

Agregar Storage Browser para S3 a mi aplicación
Ahora que el componente está creado, sólo necesita agregarlo a su aplicación en una página donde desee representarlo declarando .

Usar npm run dev para ejecutar la aplicación. Después de que se cargue, navegue hasta la página donde agregó Storage Browser para S3 y debería verlo cargado con el diseño predeterminado. Observe también que está configurado con las mismas rutas y permisos que definimos en amplify/storage/resource.ts arriba, lo que permite a los usuarios explorar, leer, escribir y eliminar archivos dentro de los depósitos y prefijos de S3 que hemos configurado.

Puede descargar archivos y explorar carpetas mientras accede a las operaciones de administración desde el submenú que automáticamente atenúa cualquier acción no disponible.

Storage Browser para S3 pagina automáticamente los resultados y permite filtrar y buscar archivos y carpetas, lo que facilita la navegación y la administración de datos.

Todo el acceso a los datos se rige por el modelo de autorización configurado que permite a los usuarios finales interactuar sin problemas con los depósitos y prefijos de S3 a través de una interfaz altamente intuitiva sin comprometer sus requisitos de seguridad o cumplimiento.

Personalizando la interfaz
Gracias a su diseño flexible, puede personalizar Storage Browser For S3 para que coincida con la apariencia de su aplicación. Al igual que cualquier otro componente de la interfaz de usuario de Amplify, utilizará el tema de Amplify que tiene activo en su aplicación de forma predeterminada. Sin embargo, puede modificar fácilmente cualquiera de sus componentes, como los botones, la ruta de navegación, los controles de paginación, los campos de texto y otros, creando su propio tema o elementos de destino directamente usando CSS.

Para crear un tema, primero debes declararlo usando el defineComponentTheme() función de la biblioteca @aws-amplify/ui-react/server. Le das un nombre como 'storage-browser' y luego apunte a los elementos que desea diseñar.

Incluso puedes reorganizar el diseño si lo deseas. En el código puedes ver que estamos configurando el flexDirection de todos los controles para 'row-reverse'Por ejemplo.

Luego creas el tema usando el createTheme() funcione utilizando el tema del navegador de almacenamiento que declaramos anteriormente y aplíquelo. También anulamos el primaryColor y ponlo verde.

Después de recargar la página, debería ver el componente Storage Browser para S3 con su nuevo diseño más compacto y su nueva combinación de colores con texto verde.

Puede personalizar esencialmente cualquier elemento de la interfaz de usuario, incluido cualquiera de los textos mostrados, como el título donde dice Hogar, o cualquier otro. Las únicas excepciones son los detalles sobre los datos, por supuesto, como los nombres de los depósitos y las claves. Puedes aprovechar esto para agregar soporte para diferentes idiomas, por ejemplo.

Finalmente, si prefiere crear su propia interfaz de usuario desde cero, llame a la función createStorageBrowser() para crear un componente Explorador de almacenamiento para S3 mediante programación. Devuelve un gancho useView() que puede usar para integrarse con su propia interfaz personalizada, brindándole control total sobre la apariencia mientras aprovecha todas las mismas características. Para obtener más información, consulte la documentación para obtener más detalles sobre el varias opciones de personalización y cómo configurarlas.

Conclusión
Storage Browser para S3 es un componente AWS Amplify UI React altamente personalizable y fácil de usar que permite a los usuarios finales interactuar con datos en Amazon S3 de forma segura. Le brinda control total de las reglas de acceso para garantizar que la interfaz cumpla con sus requisitos de acceso y, al mismo tiempo, brinda una excelente experiencia de usuario a través de una interfaz que puede diseñar para que parezca una extensión natural de su aplicación.

Cosas que debes saber

Empezando – Puede instalar Storage Browser para S3 desde el página de GitHub. Para obtener más información sobre cómo comenzar, visite el documentación de la interfaz de usuario.

Compatibilidad – Storage Browser para S3 es compatible con todas las clases de almacenamiento de Amazon S3, excepto Glacier Flexible Retrieval y S3 Glacier Deep Archive. Es compatible con S3 Intelligent-Tiering, pero no es compatible con S3 Intelligent-Tiering Archive Access Tier o S3 Intelligent-Tiering Deep Archive Access Tier.

Rendimiento y durabilidad – Storage Browser para S3 incluye lógica integrada que mejora las solicitudes de carga para una transferencia de datos de alto rendimiento, calcula sumas de verificación de los datos cargados (rechazando solicitudes que no superan estas comprobaciones de durabilidad) y optimiza el rendimiento para tiempos de carga más rápidos en su aplicación.

Precios – Storage Browser para S3 es de código abierto y puedes integrarlo con tus aplicaciones sin costo adicional. Solo paga por el uso de los recursos subyacentes de AWS que utiliza con Storage Browser para S3.

Apoyo – Storage Browser para S3 está respaldado por AWS Support como cualquier otra característica de S3. Los clientes con planes Business y Enterprise Support obtienen acceso las 24 horas del día, los 7 días de la semana a los ingenieros de AWS Support para respaldar su uso de Storage Browser para S3.

Comentario – Te invitamos a compartir comentarios sobre la funcionalidad y la hoja de ruta pública para Storage Browser para S3.

Matheus Guimaraes | @codificacionmatheus