Hoy en día Google Firebase es mi aplicación favorita. Esta ofrece grandes soluciones web como el alojamiento, la autenticación, el almacenamiento y la base de datos de una manera sencilla. Este artículo explica cómo subir imágenes (soporta video) en el almacenamiento de Firebase con aplicaciones Ionic y Angular. Esto cubre la parte de autenticación de usuario para proteger las subidas de almacenamiento y mejorar las reglas de seguridad por defecto de Firebase. Echa un vistazo a la demostración rápida y trata de subir menos de 1 mb JPEG o PNG.
Proyecto en Github
System Requirements
- Node JS
- Angular Cli
- Ionic Cli
Install Ionic
Elige Angular y tabs.
Instalar los plugins de Firebase
Necesitamos instalar los módulos de Angular Fire
Cambiar el directorio del proyecto
Instalar @angular/fire
Instala Firebase – Lo necesitas para las opciones de los proveedores sociales.
Crear componentes
Cree un nuevo componente de página de inicio de sesión para la autenticación de usuarios.
Generar módulo de inicio de sesión para lazy loading.
login-routing.module.ts Crear un módulo de routing para el componente de inicio de sesión.
login.module.ts
Importa el componente de inicio de sesión aquí.
app-routing.module.ts
Introduce una nueva ruta para la página de inicio de sesión.
Launch Ionic Project
Launch the application and validate https://localhost:8100/login
Cómo empezar con Firebase
Google Firebase es una aplicación web, con la que puedes resolver problemas complejos..
Crear una aplicación Firebase
Seleccione web para los detalles de configuración.
Nombre de la aplicación.
Detalles de la configuración de Firebase.
Crea un directorio y un archivo de configuración.
Configuración de Firebase
Archivo de constantes para las claves de Firebase.
Autenticación Firebase
Encontrarás esta opción en el menú de la barra lateral.
Habilitar el inicio de sesión de Google
Crear una aplicación para Google OAuth.
Asegúrese de que el estado de Google debe estar activado.
app.module.ts
Importar el módulo fire auth de Angular y el módulo storage. Inicializa con AngularFirebaseModule
Servicio Firebase Auth
Crear un servicio para la autenticación social de Firebase
Servicio Firebase Auth
Aquí el método firebaseSocialLogin se ocupa de la API de Firebase y de almacenar la respuesta del usuario en el almacenamiento local del navegador.
Guards
Crear guards para proteger las rutas de la aplicación para que no accedan directamente.
auth.guard.ts
Esta guardia produce la ruta home(tabs), sólo los usuarios autentificados pueden subir imágenes.
login.guard.ts
Al contrario que auth.guard, valida los datos del usuario en el almacenamiento local.
app-routing.module.ts
Conectar con guards una nueva ruta para la página de inicio de sesión. Incluir hashing de ruta para los despliegues de producción useHash:true
login.component.html
Conexión con el botón de inicio de sesión social de Google.
Componentes hijos
Cree un directorio de componentes bajo el origen de la aplicación (src).
Componentes
Genera un módulo de componentes para la integración de la carga lenta.
Componente de carga de fotos
Generar un componente de carga de fotos.
Lista de vista previa de fotos
Genera un componente de vista previa de la lista de fotos.
components.module.ts
Exporta aquí los componentes hijos.
tab1.module.ts
Importar el módulo de componentes para acceder a todos los componentes hijos .
tab1.page.ts
Al cargar la página se llama a getUser y se asigna a userProfileData.
tab1.page.html
Mostrar los datos del usuario e incluir el componente app-photo-upload.
Firebase Storage
Haga clic en almacenamiento y configuración.
Reglas de seguridad por defecto para el almacenamiento
Elija la región de almacenamiento.
Cree una carpeta de subidas.
Servicio de carga de Firebase
Genera un servicio de carga para subir archivos.
firebase-upload.service.ts
Aquí storeImage es un método de promesa y esto devolverá con la URL de descarga de archivos de Firebase.
photo-upload.component.ts
El componente de carga de imágenes envía los datos del archivo al método storeImage.
photo-upload.component.html
Archivo de tipo de entrada de usuario para subir archivos. Puede cambiar la extensión si trabaja con vídeos o documentos.
photos-list.component.ts
Aquí imageUploads es un atributo de entrada.
fotos-lista.componente.html
Usar *ngFor y mostrar.
Reglas de seguridad de almacenamiento de Firebase
Y eso es todo 😀
