Advertisement
  1. Code
  2. Ionic

Introducción a Ionic Services: Auth

by
Read Time:15 minsLanguages:

Spanish (Español) translation by Charles (you can also view the original English article)

Uno de los puntos fuertes de Ionic está en los servicios que ofrece sobre el marco. Esto incluye servicios para autenticar a los usuarios de la aplicación, notificaciones de inserción y análisis. En esta serie, aprenderemos sobre esos tres servicios mediante la creación de una aplicación que usa cada uno de ellos.

El primer servicio que vamos a ver es el servicio de autenticación. Esto nos permite implementar la autenticación en una aplicación Ionic sin escribir una sola línea de código back-end. O si ya tiene un sistema de autenticación existente, también puede usarlo. El servicio admite los siguientes métodos de autenticación:

  • Correo electrónico/contraseña: el usuario se registra proporcionando su correo electrónico y contraseña.
  • Inicio de sesión social: el usuario está registrado utilizando su perfil de redes sociales. Esto actualmente incluye Facebook, Google, Twitter, Instagram, LinkedIn y GitHub.
  • Personalizado: el usuario se registra haciendo uso de un sistema de autenticación existente.

En este tutorial, solo cubriremos el correo electrónico / contraseña y el inicio de sesión social con Facebook.

Lo que va a crear

Antes de continuar, siempre es bueno tener una idea general de lo que vamos a crear y cómo será el flujo de la aplicación. La aplicación tendrá las siguientes páginas:

  • página principal
  • página de registro
  • página de usuario

página principal

La página de inicio es la página predeterminada de la aplicación donde el usuario puede iniciar sesión con su correo electrónico / contraseña o su cuenta de Facebook.

home pagehome pagehome page

Cuando el usuario hace clic en el botón Iniciar sesión con Facebook, se muestra una pantalla similar a la siguiente, y una vez que el usuario está de acuerdo, el usuario inicia sesión en la aplicación:

Facebook loginFacebook loginFacebook login

Página de registro

La página de registro es donde el usuario puede registrarse introduciendo su correo electrónico y contraseña. El inicio de sesión de Facebook no requiere ningún registro porque la información del usuario la proporciona la API de Facebook.

Signup pageSignup pageSignup page

Página de usuario

La página final es la página de usuario, que solo se puede ver cuando el usuario ya ha iniciado sesión.

Bootstrap una nueva aplicación Ionic

Ahora que ya sabes lo que estamos haciendo, ¡comencemos a crear nuestra aplicación!

En primer lugar, arrancamos una nueva aplicación Ionic usando la plantilla de inicio en blanco:

Navegue dentro de la carpeta recién creada del authApp. Esto sirve como el directorio raíz del proyecto.

Para configurar rápidamente con la interfaz de usuario de la aplicación, he creado un repositorio de GitHub donde puede encontrar los archivos de origen de inicio. Descargue el repositorio, navegue dentro de la carpeta de inicio y copie la carpeta src en la raíz del proyecto Ionic que acaba de crear. Contiene los archivos de plantilla para cada una de las páginas de la aplicación. Te explicaré con más detalle lo que hace cada uno de esos archivos en una sección posterior.

Sirva el proyecto para que pueda ver inmediatamente sus cambios mientras desarrolla la aplicación:

Crear una cuenta Ionic

Dado que usaremos el back-end de Ionic para controlar la autenticación de usuarios, necesitamos una forma de administrar los usuarios de la aplicación. Aquí es donde entra en juego la cuenta Jónica. Le permite administrar sus aplicaciones Ionic y los servicios que utilizan. Esto incluye la administración del servicio de autenticación. Puede crear una cuenta de Ionic visitando la  Ionic.io signup page.

Conecte la aplicación a Ionic Services

A continuación, vaya al directorio raíz del proyecto e instale el complemento Ionic Cloud:

Este plugin permitirá a la aplicación interactuar fácilmente con los servicios de Ionic.

Después de eso, puede inicializar la aplicación para usar los servicios de Ionic:

Esto le pide que inicie sesión con su cuenta de Ionic. Una vez que haya ingresado los detalles de inicio de sesión correctos, la herramienta de línea de comandos creará automáticamente un nuevo registro de aplicación en su cuenta de Ionic. Este registro está conectado a la aplicación que está desarrollando.

Puede comprobar que este paso ha funcionado abriendo el archivo .io-config.json y el archivo ionic.config.json en la raíz del proyecto. El app_id debe ser el mismo que el identificador de aplicación asignado a la aplicación recién creada en el panel de Ionic.

página principal

Navegue dentro del directorio src/pages/home para ver los archivos de la página de inicio. Abra el archivo home.html y verá lo siguiente:

Esta página le pedirá al usuario su correo electrónico y contraseña o que inicie sesión con su cuenta de Facebook. Si el usuario aún no tiene una cuenta, puede hacer clic en el botón de registro para acceder a la página de registro. Volveremos a los detalles de esta página más adelante a medida que pasemos a la parte de inicio de sesión. Solo se lo estoy mostrando para que pueda ver el código para navegar a la página de registro.

A continuación, abra el archivo home.ts. Por ahora, solo contiene algún código reutilizable para navegar a la página de registro y usuario. Más adelante, volveremos a esta página para agregar el código para iniciar sesión en el usuario.

Registro de usuario

El diseño de la página de suscripción se encuentra en src/pages/signup-page/signup-page.html. Eche un vistazo a este archivo y encontrará un formulario simple con un campo de correo electrónico y un campo de contraseña.

A continuación, echemos un vistazo al archivo signup-page.ts.

Vamos a desglosar esto. En primer lugar, importa los controladores para crear alertas y cargadores:

A continuación, importa las clases necesarias desde el cliente en la nube:

  • El servicio de autenticación que se ocupa del registro de usuarios, el inicio de sesión y el cierre de sesión.
  • UserDetails es el tipo utilizado para definir los detalles del usuario al registrar o iniciar sesión en un usuario.
  • IDetailedError se utiliza para determinar el motivo exacto del error que se produjo. Esto nos permite proporcionar mensajes de error fáciles de usar al usuario cada vez que se produce un error.

Declare las variables que se utilizarán para almacenar el correo electrónico y la contraseña introducidos por el usuario. Debe ser el mismo que el nombre que ha dado a los atributos value y ngModel en el archivo de diseño.

A continuación se encuentra el método register, al que se llama cuando se presiona el botón Registrar. Vamos a codificar este método juntos.

Primero activa un cargador y luego lo cierra automáticamente después de cinco segundos (para que, en caso de que algo salga mal, el usuario no se quede con una animación de carga que gira para siempre).

A continuación, vamos a crear un objeto para almacenar los detalles del usuario:

Finalmente, llamaremos al método signup() desde el servicio Auth y proporcionaremos los detalles del usuario como argumento. Esto devuelve una promesa, que desenvolvemos con then(). Una vez que se recibe una respuesta correcta del back-end, la primera función que pase a then() se ejecutará; de lo contrario, se ejecutará la segunda función.

Si se recibe una respuesta de error de Ionic Auth, recorreremos la matriz de errores y construiremos un mensaje de error basado en el tipo de error recibido. Aquí puede encontrar la lista de errores de registro de autenticación que pueden ocurrir.

Una vez hecho esto, puede probar la aplicación en su navegador. El inicio de sesión de correo electrónico / contraseña no tiene ninguna dependencia de complemento o hardware, por lo que debería poder probarlo en el navegador. A continuación, puede encontrar el usuario recién registrado en la pestaña Autenticación del panel de la aplicación Ionic.

Configuración de la aplicación de Facebook

El siguiente paso es configurar la aplicación para que pueda controlar los inicios de sesión nativos de Facebook. En primer lugar, debe crear una aplicación de Facebook. Puede hacerlo iniciando sesión en su cuenta de Facebook y luego yendo al Sitio para desarrolladores de Facebook. A partir de ahí, crea una nueva aplicación:

Create Facebook AppCreate Facebook AppCreate Facebook App

Una vez creada la aplicación, haga clic en el enlace Agregar producto en la barra lateral y seleccione Inicio de sesión de Facebook. Esto abrirá la pantalla de inicio rápido de forma predeterminada. Realmente no necesitamos eso, así que sigue adelante y haz clic en el enlace Configuración justo debajo del inicio de sesión de Facebook. Eso debería mostrarle la siguiente pantalla:

Facebook SettingsFacebook SettingsFacebook Settings

Aquí debe habilitar la configuración de inicio de sesión de OAuth del explorador incrustado y agregar https://api.ionic.io/auth/integrations/facebook como el valor de los URI de redireccionamiento de OAuth válidos. Guarde los cambios una vez hecho esto.

A continuación, debe conectar Ionic Auth a la aplicación de Facebook que acaba de crear. Vaya a su panel de control de Ionic y seleccione la aplicación que se creó anteriormente (consulte la sección "Conectar la aplicación a Ionic Services"). Haga clic en la pestaña Configuración y luego en User Auth. En los Proveedores sociales, haga clic en el botón Configurar junto a Facebook:

Ionic app settings social providersIonic app settings social providersIonic app settings social providers

Ingrese el ID de la aplicación y el Secreto de la aplicación de la aplicación de Facebook que creó anteriormente y presione Habilitar.

Instalar el plugin de Facebook

A continuación, instale el complemento de Facebook para Cordova. A diferencia de la mayoría de los complementos, esto requiere que proporcione un poco de información: el ID de la aplicación de Facebook y el nombre de la aplicación. Puedes copiar esta información desde el panel de la aplicación de Facebook.

Configurar el servicio de Facebook

Una vez hecho esto, lo último que debe hacer es volver a su proyecto, abrir el archivo src/app/app.module.ts y agregar los servicios CloudSettings y CloudModule desde el paquete cloud-angular:

Declare el objeto cloudSettings. Contiene el app_id de la aplicación Ionic y los permisos adicionales (ámbito) que desea solicitar a los usuarios de la aplicación. De forma predeterminada, esto ya solicita el correo electrónico y public_profile.

Si desea solicitar más datos de sus usuarios, puede encontrar una lista de permisos en esta página: Permisos de inicio de sesión de Facebook.

A continuación, informe a Ionic del cloudSettings que acaba de agregar:

Más adelante, cuando agregas otros proveedores sociales a tu aplicación, se sigue un proceso similar.

Inicio de sesión del usuario

Ahora es el momento de volver a la página de inicio y hacer algunos cambios. La plantilla HTML ya tiene todo lo que necesitamos, por lo que solo necesitamos actualizar el script. Siga adelante y abra el archivo src/pages/home/home.ts. En la parte superior del archivo, importe lo siguiente además de lo que ya tiene anteriormente:

Dentro del constructor, determine si un usuario ha iniciado sesión actualmente o no. Si un usuario ya ha iniciado sesión, navegamos automáticamente a la página de usuario.

A continuación, cuando se presiona el botón Inicio de sesión, comenzamos mostrando una animación de carga.

Como vio en el archivo src/pages/home/home.html anteriormente, una cadena que representa qué botón de inicio de sesión se ha presionado (ya sea el botón de inicio de sesión de correo electrónico / contraseña o el botón de inicio de sesión de Facebook) se pasa a la función login(). Esto nos permite determinar qué código de inicio de sesión ejecutar. Si el tipo es 'fb', significa que se presionó el botón de inicio de sesión de Facebook, por lo que llamamos al método login() del servicio FacebookAuth.

De lo contrario, se presionó el botón de inicio de sesión de correo electrónico / contraseña, y debemos iniciar sesión con el usuario con los detalles ingresados en el formulario de inicio de sesión.

Eche un vistazo a la versión final del archivo home.ts para ver cómo debería verse todo.

Página de usuario

La última página es la página usuario.

El diseño, en src/pages/user-page/user-page.html, muestra la foto de perfil del usuario y su nombre de usuario. Si el usuario se suscribió con su correo electrónico / contraseña, el nombre de usuario será la dirección de correo electrónico del usuario y la foto de perfil será la foto de perfil predeterminada asignada por Ionic. Por otro lado, si el usuario se suscribió a Facebook, su foto de perfil será su foto de perfil de Facebook y su nombre de usuario será su nombre completo.

A continuación, examine el archivo user-page.ts.

Bajo el paquete iónico-angular, estamos importando el servicio de plataforma aparte de NavController. Esto se utiliza para obtener información sobre el dispositivo actual. También tiene métodos para escuchar eventos de hardware, como cuando se presiona el botón Atrás del hardware en Android.

Y para el paquete angular en la nube, necesitamos los servicios Auth, FacebookAuth y User:

Dentro del constructor de clase, determine si el usuario ha iniciado sesión con su usuario de correo electrónico/contraseña o su cuenta de Facebook. Rellene el nombre de usuario y la foto en función de eso. Luego, debajo de eso, asigne una función que se ejecutará cuando se presione el botón Atrás del hardware. RegisterBackButtonAction() acepta dos argumentos: la función que se va a ejecutar y la prioridad. Si hay más de uno de estos en la aplicación, solo se ejecutará la prioridad más alta. Pero como solo necesitamos esto en esta pantalla, solo ponemos 1.

El método logoutUser() contiene la lógica para cerrar la sesión del usuario. Lo primero que hace es determinar si un usuario ha iniciado sesión realmente. Si un usuario ha iniciado sesión, determinamos si el usuario es un usuario de Facebook o un usuario de correo electrónico / contraseña.

Esto se puede hacer comprobando la propiedad email bajo el objeto user.details. Si esta propiedad existe, significa que el usuario es un usuario de correo electrónico/contraseña. Así que si es de otra manera, asumimos que es un usuario de Facebook. Al llamar al método logout() en Auth y FacebookAuth, se borra el usuario actual de la aplicación.

Ejecución de la aplicación en un dispositivo

¡Ahora podemos probar nuestra aplicación! En primer lugar, configurar la plataforma y construir el apk de depuración:

Para que el inicio de sesión de Facebook funcione, debe proporcionar el hash del archivo apk a la aplicación de Facebook. Puede determinar el hash ejecutando el siguiente comando:

A continuación, vaya a la página de configuración básica de su aplicación de Facebook y haga clic en el botón Agregar plataforma en la parte inferior de la pantalla. Seleccione Android como plataforma. A continuación, verá el siguiente formulario:

Android platform settingsAndroid platform settingsAndroid platform settings

Rellene el nombre del paquete de Google Play y los hashes de clave. Puede poner cualquier cosa que desee como el valor para el nombre del paquete de Google Play, siempre y cuando siga el mismo formato que las aplicaciones en Google Play (por ejemplo.com.ionicframework.authapp316678). Para los hashes de clave, debe colocar el hash devuelto desde anteriormente. No olvides presionar Guardar cambios cuando hayas terminado.

Una vez hecho esto, ahora puede copiar el android-debug.apk desde la carpeta platforms /android/build/outputs/apk a su dispositivo, instalarlo y luego ejecutarlo.

Conclusión y próximos pasos

¡Eso es todo! En este tutorial, ha aprendido a usar el servicio Ionic Auth para implementar fácilmente la autenticación en su aplicación Ionic. Hemos usado la autenticación de correo electrónico / contraseña y el inicio de sesión de Facebook en este tutorial, pero hay otras opciones, y también debería ser fácil agregarlas a su aplicación.

Estos son algunos de los siguientes pasos que podrías probar por tu cuenta que llevarían tu aplicación al siguiente nivel.

Eso es todo por ahora. ¡Estad atentos para más artículos sobre el uso de los servicios de Ionic! Y mientras tanto, echa un vistazo a algunas de nuestras otras excelentes publicaciones sobre el desarrollo de aplicaciones móviles multiplataforma.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.