Implémentation Connexion/Déconnexion avec Flutter et Parse

connexion et déconnexion des utilisateurs pour flutter utilisant parse server introduction après avoir mis en œuvre l'inscription des utilisateurs pour flutter sur parse dans le dernier guide, vous apprendrez comment connecter et déconnecter des utilisateurs en utilisant la même classe parseuser après une inscription, l'opération de connexion est effectuée automatiquement, et une nouvelle session utilisateur est créée l'opération de déconnexion supprime l'objet de session actif pour l'utilisateur connecté dans ce guide, vous apprendrez comment utiliser le plugin flutter pour parse server pour effectuer la connexion/déconnexion en utilisant la classe parseuser pour votre application flutter objectif construire une fonctionnalité de connexion/déconnexion des utilisateurs utilisant parse pour une application flutter prérequis pour compléter ce tutoriel, vous aurez besoin de flutter version 2 2 x ou ultérieure https //flutter dev/docs/get started/install android studio https //developer android com/studio ou vs code installé (avec plugins dart et flutter) une application créée sur back4app remarque suivez le nouveau tutoriel d'application parse pour apprendre à créer une application parse sur back4app une application flutter connectée à back4app remarque suivez le installer le sdk parse sur le projet flutter pour créer un projet flutter connecté à back4app complétez le guide précédent afin d'avoir une meilleure compréhension de la classe parseuser classe parseuser un appareil (ou un appareil virtuel) exécutant android ou ios comprendre l'application de connexion/déconnexion pour mieux comprendre le processus de connexion/déconnexion, nous allons créer une application pour connecter et déconnecter l'utilisateur de votre compte nous n'expliquerons pas le code de l'application flutter car l'objectif principal de ce guide est d'utiliser flutter avec parse en suivant les étapes suivantes, vous construirez une application de connexion et de déconnexion dans la base de données back4app commençons! dans les étapes suivantes, vous pourrez créer une application de connexion/déconnexion 1 créer le modèle d'application de connexion/déconnexion ouvrez votre projet flutter du guide précédent flutter plugin for parse server allez dans le main dart main dart fichier, nettoyez tout le code et remplacez le par 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 lorsque debug debug le paramètre dans la fonction parse() initialize parse() initialize est true true , cela permet d'afficher les appels api parse dans la console cette configuration peut aider à déboguer le code il est conseillé de désactiver le débogage dans la version de production 2 connecter le modèle au projet back4app trouvez votre identifiant d'application et vos identifiants de clé client en naviguant vers le tableau de bord de votre application à site web back4app https //www back4app com/ mettez à jour votre code dans main dart main dart avec les valeurs de l'applicationid et de la clientkey de votre projet dans back4app keyapplicationid = identifiant d'application keyclientkey = clé client exécutez le projet, et l'application se chargera comme indiqué dans l'image 3 code pour connecter l'utilisateur la fonction de connexion de l'utilisateur crée un session session objet, qui pointe vers le utilisateur utilisateur connecté et stocke dans votre stockage local une session utilisateur valide les appels futurs à des méthodes comme currentuser currentuser récupéreront avec succès vos données utilisateur utilisateur et sessiontoken sessiontoken pour l'objet session session qui a été créé dans le tableau de bord tableau de bord recherchez la fonction douserlogin douserlogin dans le fichier main dart main dart remplacez le code à l'intérieur de douserlogin douserlogin par 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 } pour construire cette fonction, suivez ces étapes créez une nouvelle parseuser parseuser instance de classe avec la commande parseuser(username, password, null); parseuser(username, password, null); en utilisant les données saisies dans l'application le champ e mail n'est pas nécessaire et doit être renseigné avec null appelez la login login fonction, qui créera une session session dans votre base de données dans le tableau de bord parse et enregistrera le token dans le stockage local vérifiez si la connexion de l'utilisateur a réussi si ce n'est pas le cas, affichez le message de description de l'erreur la fonction complète devrait ressembler à ceci 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 } pour le tester, cliquez sur le run run bouton dans android studio/vscode après avoir fourni les identifiants de l'utilisateur souhaité, vous verrez ce message après avoir appuyé sur connexion si tout a réussi la gestion des erreurs peut être testée si vous essayez de connecter un utilisateur avec des identifiants invalides vous obtiendrez une autre erreur si vous essayez de vous connecter sans mot de passe 4 code pour déconnecter l'utilisateur la fonction de déconnexion de l'utilisateur supprime le session session objet, qui a été créé dans la fonction de connexion cela effacera cette session sur l'appareil et déconnectera de tous les services liés sur votre serveur parse recherchez la fonction douserlogout douserlogout dans le fichier main dart main dart remplacez le code à l'intérieur de douserlogout douserlogout par 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 } pour construire cette fonction, suivez ces étapes obtenez l'utilisateur actuellement connecté en utilisant la fonction parseuser currentuser() parseuser currentuser() appelez la logout logout fonction pour l'objet parseuser parseuser , ce qui supprimera la session session dans votre base de données et nettoiera le token dans le stockage local vérifiez si la déconnexion de l'utilisateur a été réussie si ce n'était pas réussi, affichez le message de description de l'erreur le code complet devrait ressembler à ceci 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 } pour le tester, cliquez sur le exécuter exécuter bouton dans android studio/vscode après avoir fourni les identifiants d'utilisateur souhaités, vous verrez ce message après avoir cliqué sur connexion si tout a réussi cliquez sur le bouton « déconnexion » c'est fait ! à la fin de ce guide, vous pouvez vous connecter et vous déconnecter des utilisateurs parse de votre application en utilisant les fonctionnalités de base de parse server via back4app !