Implementación de Login en Ionic Usando Back4App

cómo agregar una pantalla de inicio de sesión a tu proyecto de ionic framework introducción en esta sección aprenderás cómo crear una página, implementar registro, inicio de sesión y cierre de sesión en tu aplicación ionic así es como se verá requisitos previos para completar este inicio rápido, necesitas visual studio code https //code visualstudio com/download (o cualquier ide web que prefieras) ionic framework https //ionicframework com/getting started/ una aplicación creada en back4app sigue el tutorial de nueva aplicación parse https //www back4app com/docs/get started/new parse app para aprender cómo crear una aplicación parse en back4app en cualquier momento, puedes acceder al proyecto completo de ionic construido con este tutorial en nuestro repositorio de github https //github com/back4app/ionic email verification 1 instalar parse sdk considerando que tienes un proyecto ionic existente, lo primero que necesitas hacer es instalar parse sdk puedes hacerlo ejecutando $ npm install parse 2 configurar las credenciales de la aplicación abre tu \<font color="#2166ae">app component ts\</font> , importa \<font color="#2166ae">parse\</font> y inicializa su conexión al servidor back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; si no sabes cómo encontrar tus claves, consulta el primer tutorial de ionic comenzar desde la plantilla https //www back4app com/docs/js framework/ionic/ionic template#setup 3 crear la página de inicio de sesión ahora, vamos a crear nuestra página de inicio de sesión afortunadamente, ionic hace todo por nosotros todo lo que necesitamos hacer es ejecutar el siguiente comando $ ionic generate page login en esta vista de página, necesitamos agregar campos para \<font color="#2166ae">nombre de usuario\</font> y \<font color="#2166ae">contraseña\</font> y dos botones, uno para registrarse y otro para iniciar sesión login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 ahora implementemos los métodos \<font color="#2166ae">signin()\</font> y \<font color="#2166ae">signup()\</font> mencionados en nuestra \<font color="#2166ae">login\</font> vista login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } aprende más sobre \<font color="#2166ae">signup()\</font> en documentación de parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } aprende más sobre \<font color="#2166ae">parse user login()\</font> en documentación de parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup así es como debería verse 4 implementar cerrar sesión pasemos a nuestra página de inicio (o la página a la que el usuario será dirigido después de iniciar sesión) e implementemos la opción de cerrar sesión primero, adelante, abre home html y agrega un botón para hacerlo login html 1 you are logged in! 2 3 4 5 log out 6 7 ahora, implementemos el \<font color="#2166ae">logout()\</font> método y también agreguemos un \<font color="#2166ae">toast\</font> componente si la solicitud falla home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } aprende más sobre \<font color="#2166ae">parse user logout()\</font> en documentación de parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup debería verse así 5 establecer la página raíz una característica importante de \<font color="#2166ae">parse\</font> es que recuerda si un usuario está conectado o no en un dispositivo esto significa que incluso si el usuario cierra la aplicación, aún puedes restaurar su sesión cuando la aplicación esté abierta con eso, podemos determinar si la página inicial de la aplicación será nuestra \<font color="#2166ae">loginpage\</font> o \<font color="#2166ae">homepage\</font> para hacerlo, solo necesitamos llamar a \<font color="#2166ae">currentasync()\</font> esto devolverá el usuario conectado o \<font color="#2166ae">null\</font> app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) aprende más sobre \<font color="#2166ae">parse user currentasync()\</font> en documentación de parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup ¡finalmente, todo está configurado! en este punto, solo ejecuta \<font color="#2166ae">ionic serve\</font> y tendrás características de inicio de sesión, registro y cierre de sesión funcionando que también recuerdan al usuario conectado hasta que él/ella cierre sesión