Inicio de Sesión y Cierre en Flutter con Parse Server

inicio de sesión y cierre de sesión de usuario para flutter usando parse server introducción después de implementar el registro de usuario para flutter en parse en la última guía, aprenderás cómo iniciar y cerrar sesión de usuarios utilizando la misma clase parseuser después de un registro, la operación de inicio de sesión se realiza automáticamente y se crea una nueva sesión de usuario la operación de cierre de sesión elimina el objeto de sesión activa para el usuario conectado en esta guía, aprenderás cómo usar el plugin de flutter para parse server para realizar inicio/cierre de sesión utilizando la clase parseuser para tu aplicación flutter objetivo construir una función de inicio/cierre de sesión de usuario utilizando parse para una aplicación flutter requisitos previos para completar este tutorial, necesitarás flutter versión 2 2 x o posterior https //flutter dev/docs/get started/install android studio https //developer android com/studio o vs code instalado (con plugins dart y flutter) una aplicación creada en back4app nota sigue el tutorial de nueva aplicación parse para aprender cómo crear una aplicación parse en back4app una aplicación flutter conectada a back4app nota sigue el instalar parse sdk en el proyecto flutter para crear un proyecto flutter conectado a back4app completa la guía anterior para que puedas tener una mejor comprensión de la parseuser parseuser clase un dispositivo (o dispositivo virtual) que ejecute android o ios entendiendo la aplicación de inicio/cierre de sesión para entender mejor el proceso de inicio de sesión/cierre de sesión, crearemos una aplicación para iniciar y cerrar sesión en tu cuenta no explicaremos el código de la aplicación flutter ya que el enfoque principal de esta guía es usar flutter con parse siguiendo los siguientes pasos, construirás una aplicación de inicio y cierre de sesión en la base de datos de back4app ¡empecemos! en los siguientes pasos, podrás construir una aplicación de inicio/cierre de sesión 1 crea la plantilla de la aplicación de inicio/cierre de sesión abre tu proyecto de flutter de la guía anterior flutter plugin for parse server ve al main dart main dart archivo, limpia todo el código y reemplázalo con 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter login/logout', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 bool isloggedin = false; 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter login/logout'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user login/logout', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 enabled !isloggedin, 76 keyboardtype textinputtype text, 77 textcapitalization textcapitalization none, 78 autocorrect false, 79 decoration inputdecoration( 80 border outlineinputborder( 81 borderside borderside(color colors black)), 82 labeltext 'username'), 83 ), 84 sizedbox( 85 height 8, 86 ), 87 textfield( 88 controller controllerpassword, 89 enabled !isloggedin, 90 obscuretext true, 91 keyboardtype textinputtype text, 92 textcapitalization textcapitalization none, 93 autocorrect false, 94 decoration inputdecoration( 95 border outlineinputborder( 96 borderside borderside(color colors black)), 97 labeltext 'password'), 98 ), 99 sizedbox( 100 height 16, 101 ), 102 container( 103 height 50, 104 child textbutton( 105 child const text('login'), 106 onpressed isloggedin ? null () => douserlogin(), 107 ), 108 ), 109 sizedbox( 110 height 16, 111 ), 112 container( 113 height 50, 114 child textbutton( 115 child const text('logout'), 116 onpressed !isloggedin ? null () => douserlogout(), 117 ), 118 ) 119 ], 120 ), 121 ), 122 )); 123 } 124 125 void showsuccess(string message) { 126 showdialog( 127 context context, 128 builder (buildcontext context) { 129 return alertdialog( 130 title const text("success!"), 131 content text(message), 132 actions \<widget>\[ 133 new textbutton( 134 child const text("ok"), 135 onpressed () { 136 navigator of(context) pop(); 137 }, 138 ), 139 ], 140 ); 141 }, 142 ); 143 } 144 145 void showerror(string errormessage) { 146 showdialog( 147 context context, 148 builder (buildcontext context) { 149 return alertdialog( 150 title const text("error!"), 151 content text(errormessage), 152 actions \<widget>\[ 153 new textbutton( 154 child const text("ok"), 155 onpressed () { 156 navigator of(context) pop(); 157 }, 158 ), 159 ], 160 ); 161 }, 162 ); 163 } 164 165 void douserlogin() async { 166 167 } 168 169 void douserlogout() async { 170 171 } 172 } 173 cuando debug debug el parámetro en la función parse() initialize parse() initialize es true true , permite mostrar las llamadas a la api de parse en la consola esta configuración puede ayudar en la depuración del código se recomienda desactivar el debug en la versión de lanzamiento 2 conectar la plantilla al proyecto de back4app encuentra tu id de aplicación y las credenciales de clave de cliente navegando a tu panel de control de la aplicación en sitio web de back4app https //www back4app com/ actualiza tu código en main dart main dart con los valores de applicationid y clientkey de tu proyecto en back4app keyapplicationid = id de aplicación keyclientkey = clave de cliente ejecuta el proyecto, y la aplicación se cargará como se muestra en la imagen 3 código para iniciar sesión de usuario la función de inicio de sesión de usuario crea un sesión sesión objeto, que apunta al usuario usuario que ha iniciado sesión y almacena en tu almacenamiento local una sesión de usuario válida las llamadas futuras a métodos como currentuser currentuser recuperarán con éxito tus datos de usuario usuario y sessiontoken sessiontoken para el sesión sesión objeto que se creó en el tablero tablero busca la función douserlogin douserlogin en el archivo main dart main dart reemplaza el código dentro de douserlogin douserlogin con 1 final username = controllerusername text trim(); 2 final password = controllerpassword text trim(); 3 4 final user = parseuser(username, password, null); 5 6 var response = await user login(); 7 8 if (response success) { 9 showsuccess("user was successfully login!"); 10 setstate(() { 11 isloggedin = true; 12 }); 13 } else { 14 showerror(response error! message); 15 } para construir esta función, sigue estos pasos crea una nueva parseuser parseuser instancia de clase con el comando parseuser(username, password, null); parseuser(username, password, null); usando los datos ingresados en la aplicación el campo de correo electrónico no es necesario y debe ser informado con null llama a la login login función, que creará una sesión sesión en tu base de datos en el panel de control de parse y guardará el token en el almacenamiento local verifica si el inicio de sesión del usuario fue exitoso si no fue exitoso, muestra el mensaje de descripción del error la función completa debería verse así 1 void douserlogin() async { 2 final username = controllerusername text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser(username, password, null); 6 7 var response = await user login(); 8 9 if (response success) { 10 showsuccess("user was successfully login!"); 11 setstate(() { 12 isloggedin = true; 13 }); 14 } else { 15 showerror(response error! message); 16 } 17 } para probarlo, haz clic en el ejecutar ejecutar botón en android studio/vscode después de proporcionar las credenciales de usuario deseadas, verás este mensaje después de presionar iniciar sesión si todo fue exitoso el manejo de errores se puede probar si intentas iniciar sesión con un usuario con credenciales inválidas recibirás otro error si intentas iniciar sesión sin contraseña 4 código para cerrar sesión del usuario la función de cerrar sesión del usuario elimina el sesión sesión objeto, que fue creado en la función de inicio de sesión limpiará esta sesión en el dispositivo y cerrará sesión de cualquier servicio vinculado en tu servidor parse busca la función douserlogout douserlogout en el archivo main dart main dart reemplaza el código dentro de douserlogout douserlogout con 1 final user = await parseuser currentuser() as parseuser; 2 var response = await user logout(); 3 4 if (response success) { 5 showsuccess("user was successfully logout!"); 6 setstate(() { 7 isloggedin = false; 8 }); 9 } else { 10 showerror(response error! message); 11 } para construir esta función, sigue estos pasos obtén el usuario actualmente conectado usando la función parseuser currentuser() parseuser currentuser() llama a la logout logout función para el parseuser parseuser objeto, que eliminará la sesión sesión en tu base de datos y limpiará el token en el almacenamiento local verifica si la desconexión del usuario fue exitosa si no fue exitosa, muestra el mensaje de descripción del error el código completo debería verse así 1 void douserlogout() async { 2 final user = await parseuser currentuser() as parseuser; 3 var response = await user logout(); 4 5 if (response success) { 6 showsuccess("user was successfully logout!"); 7 setstate(() { 8 isloggedin = false; 9 }); 10 } else { 11 showerror(response error! message); 12 } 13 } para probarlo, haz clic en el ejecutar ejecutar botón en android studio/vscode después de proporcionar las credenciales de usuario deseadas, verás este mensaje después de presionar en iniciar sesión si todo fue exitoso haz clic en el botón “cerrar sesión” ¡está hecho! al final de esta guía, puedes iniciar y cerrar sesión en los usuarios de parse de tu aplicación utilizando las características principales de parse server a través de back4app!