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 (o cualquier ide web que prefieras) ionic framework una aplicación creada en back4app sigue el tutorial de nueva aplicación parse 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 1 instalar parse sdk considerando que tienes un proyecto ionic existente, lo primero que necesitas hacer es instalar parse sdk puedes hacerlo ejecutando 2 configurar las credenciales de la aplicación abre tu app component ts app component ts , importa parse parse 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 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 en esta vista de página, necesitamos agregar campos para nombre de usuario nombre de usuario y contraseña contraseña 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 signin() signin() y signup() signup() mencionados en nuestra login login 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 signup() signup() en documentación de parse 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 parse user login() parse user login() en documentación de parse 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 logout() logout() método y también agreguemos un toast toast 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 parse user logout() parse user logout() en documentación de parse debería verse así 5 establecer la página raíz una característica importante de parse parse 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 loginpage loginpage o homepage homepage para hacerlo, solo necesitamos llamar a currentasync() currentasync() esto devolverá el usuario conectado o null null 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 parse user currentasync() parse user currentasync() en documentación de parse ¡finalmente, todo está configurado! en este punto, solo ejecuta ionic serve ionic serve 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