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é https //code visualstudio com/ (avec plugins https //docs flutter dev/get started/editor dart et flutter) une application créée https //www back4app com/docs/get started/new parse app sur back4app remarque suivez le nouveau tutoriel d'application parse https //www back4app com/docs/get started/new parse app 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 https //www back4app com/docs/flutter/parse sdk/parse flutter sdk pour créer un projet flutter connecté à back4app complétez le guide précédent afin d'avoir une meilleure compréhension de la \<font color="#2166ae">classe parseuser\</font> 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 \<font color="#2166ae">main dart\</font> 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 \<font color="#2166ae">debug\</font> le paramètre dans la fonction \<font color="#2166ae">parse() initialize\</font> est \<font color="#2166ae">true\</font> , 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 \<font color="#2166ae">main dart\</font> 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 \<font color="#2166ae">session\</font> objet, qui pointe vers le \<font color="#2166ae">utilisateur\</font> connecté et stocke dans votre stockage local une session utilisateur valide les appels futurs à des méthodes comme \<font color="#2166ae">currentuser\</font> récupéreront avec succès vos données \<font color="#2166ae">utilisateur\</font> et \<font color="#2166ae">sessiontoken\</font> pour l'objet \<font color="#2166ae">session\</font> qui a été créé dans le \<font color="#2166ae">tableau de bord\</font> recherchez la fonction \<font color="#2166ae">douserlogin\</font> dans le fichier \<font color="#2166ae">main dart\</font> remplacez le code à l'intérieur de \<font color="#2166ae">douserlogin\</font> 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 \<font color="#2166ae">parseuser\</font> instance de classe avec la commande \<font color="#2166ae">parseuser(username, password, null);\</font> 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 \<font color="#2166ae">login\</font> fonction, qui créera une \<font color="#2166ae">session\</font> 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 \<font color="#2166ae">run\</font> 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 \<font color="#2166ae">session\</font> 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 \<font color="#2166ae">douserlogout\</font> dans le fichier \<font color="#2166ae">main dart\</font> remplacez le code à l'intérieur de \<font color="#2166ae">douserlogout\</font> 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 \<font color="#2166ae">parseuser currentuser()\</font> appelez la \<font color="#2166ae">logout\</font> fonction pour l'objet \<font color="#2166ae">parseuser\</font> , ce qui supprimera la \<font color="#2166ae">session\</font> 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 \<font color="#2166ae">exécuter\</font> 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 !