Guide d'intégration Facebook Login avec Flutter et Parse

configurer la connexion facebook sur votre application flutter en utilisant parse introduction parse server prend en charge l'authentification tierce dans ce guide, vous apprendrez comment configurer l'authentification/connexion facebook sur votre application flutter en utilisant parse prérequis pour compléter ce tutoriel, vous aurez besoin de version flutter 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 flutter créée et connectée à back4app remarque suivez le installer le sdk parse sur le projet flutter pour créer un projet flutter connecté à back4app \[compte facebook pour les développeurs] (https //developers facebook com) configurer le plugin flutter facebook auth sur le projet un appareil (pas un simulateur) fonctionnant sous android ou ios objectif ajouter la connexion facebook sur votre application flutter en utilisant parse server 1 configurer la connexion facebook pour android démarrage rapide suivez les instructions du plugin flutter facebook auth https //pub dev/packages/flutter facebook auth pour android sur le lien https //facebook meedu app/#/android https //facebook meedu app/#/android 2 configurer la connexion facebook pour android démarrage rapide suivez les instructions du plugin flutter facebook auth https //pub dev/packages/flutter facebook auth pour ios sur le lien https //facebook meedu app/#/ios https //facebook meedu app/#/ios 3 configurer l'authentification parse pour facebook allez sur le site de back4app, connectez vous puis trouvez votre application après cela, cliquez sur paramètres du serveur paramètres du serveur et recherchez le bloc connexion facebook connexion facebook et sélectionnez paramètres paramètres la section connexion facebook connexion facebook ressemble à ceci maintenant, vous devez simplement coller votre appid facebook appid facebook dans le champ ci dessous et cliquer sur le bouton pour enregistrer si vous rencontrez des problèmes lors de l'intégration de la connexion facebook, veuillez contacter notre équipe via le chat ! 4 ajouter la connexion avec facebook maintenant que vous avez configuré le projet, nous pouvons obtenir les données utilisateur et nous connecter à parse selon la documentation, nous devons envoyer une carte avec les données d'authentification de l'utilisateur 1 //make a login request 2 final loginresult result = await facebookauth instance login(); 3 4 if (result status != loginstatus success) { 5 message showerror(context context, message result message!); 6 return; 7 } 8 9 final accesstoken accesstoken = result accesstoken!; 10 11 //https //docs parseplatform org/parse server/guide/#facebook authdata 12 //according to the documentation, we must send a map with user authentication data 13 14 //make sign in with facebook 15 final parseresponse = await parseuser loginwith('facebook', 16 facebook(accesstoken token, accesstoken userid, accesstoken expires)); 5 se connecter avec facebook depuis flutter utilisons maintenant notre exemple pour se connecter avec facebook dans l'application flutter, avec une interface simple ouvrez votre projet flutter, allez dans le fichier main dart, nettoyez tout le code et remplacez le par 1 import 'package\ flutter/foundation dart' show kisweb; 2 import 'package\ flutter/material dart'; 3 import 'package\ flutter facebook auth/flutter facebook auth dart'; 4 import 'package\ parse server sdk flutter/parse server sdk dart'; 5 6 void main() async { 7 widgetsflutterbinding ensureinitialized(); 8 9 final keyapplicationid = 'your app id here'; 10 final keyclientkey = 'your client key here'; 11 final keyparseserverurl = 'https //parseapi back4app com'; 12 13 await parse() initialize(keyapplicationid, keyparseserverurl, 14 clientkey keyclientkey, debug true); 15 16 if (kisweb) { 17 // initialiaze the facebook javascript sdk 18 facebookauth i webinitialize( 19 appid "your facebook app id", //< your app id 20 cookie true, 21 xfbml true, 22 version "v9 0", 23 ); 24 } 25 26 runapp(myapp()); 27 } 28 29 class myapp extends statelesswidget { 30 future\<bool> hasuserlogged() async { 31 parseuser? currentuser = await parseuser currentuser() as parseuser?; 32 if (currentuser == null) { 33 return false; 34 } 35 //checks whether the user's session token is valid 36 final parseresponse? parseresponse = 37 await parseuser getcurrentuserfromserver(currentuser sessiontoken!); 38 39 if (parseresponse? success == null || !parseresponse! success) { 40 //invalid session logout 41 await currentuser logout(); 42 return false; 43 } else { 44 return true; 45 } 46 } 47 48 @override 49 widget build(buildcontext context) { 50 return materialapp( 51 title 'flutter sign in with facebook', 52 theme themedata( 53 primaryswatch colors blue, 54 visualdensity visualdensity adaptiveplatformdensity, 55 ), 56 home futurebuilder\<bool>( 57 future hasuserlogged(), 58 builder (context, snapshot) { 59 switch (snapshot connectionstate) { 60 case connectionstate none 61 case connectionstate waiting 62 return scaffold( 63 body center( 64 child container( 65 width 100, 66 height 100, 67 child circularprogressindicator()), 68 ), 69 ); 70 default 71 if (snapshot hasdata && snapshot data!) { 72 return userpage(); 73 } else { 74 return homepage(); 75 } 76 } 77 }), 78 ); 79 } 80 } 81 82 class homepage extends statefulwidget { 83 @override 84 homepagestate createstate() => homepagestate(); 85 } 86 87 class homepagestate extends state\<homepage> { 88 @override 89 widget build(buildcontext context) { 90 return scaffold( 91 appbar appbar( 92 title const text('flutter sign in with facebook'), 93 ), 94 body center( 95 child singlechildscrollview( 96 padding const edgeinsets all(8), 97 child column( 98 crossaxisalignment crossaxisalignment stretch, 99 children \[ 100 container( 101 height 200, 102 child image network( 103 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 104 ), 105 center( 106 child const text('flutter on back4app', 107 style 108 textstyle(fontsize 18, fontweight fontweight bold)), 109 ), 110 sizedbox( 111 height 100, 112 ), 113 container( 114 height 50, 115 child elevatedbutton( 116 child const text('sign in with facebook'), 117 onpressed () => dosigninfacebook(), 118 ), 119 ), 120 sizedbox( 121 height 16, 122 ), 123 ], 124 ), 125 ), 126 )); 127 } 128 129 void dosigninfacebook() async { 130 late parseresponse parseresponse; 131 try { 132 //check if the user is logged 133 final accesstoken? currentaccesstoken = 134 await facebookauth instance accesstoken; 135 if (currentaccesstoken != null) { 136 //logout 137 await facebookauth instance logout(); 138 } 139 140 //make a login request 141 final loginresult result = await facebookauth instance login(); 142 143 if (result status != loginstatus success) { 144 message showerror(context context, message result message!); 145 return; 146 } 147 148 final accesstoken accesstoken = result accesstoken!; 149 150 //https //docs parseplatform org/parse server/guide/#facebook authdata 151 //according to the documentation, we must send a map with user authentication data 152 153 //make sign in with facebook 154 parseresponse = await parseuser loginwith('facebook', 155 facebook(accesstoken token, accesstoken userid, accesstoken expires)); 156 157 if (parseresponse success) { 158 final parseuser parseuser = await parseuser currentuser() as parseuser; 159 160 //get user data from facebook 161 final userdata = await facebookauth instance getuserdata(); 162 163 //additional information in user 164 if (userdata containskey('email')) { 165 parseuser emailaddress = userdata\['email']; 166 } 167 168 if (userdata containskey('name')) { 169 parseuser set\<string>('name', userdata\['name']); 170 } 171 if (userdata\["picture"]\["data"]\["url"] != null) { 172 parseuser set\<string>('photourl', userdata\["picture"]\["data"]\["url"]); 173 } 174 175 await facebookauth instance logout(); 176 parseresponse = await parseuser save(); 177 178 if (parseresponse success) { 179 message showsuccess( 180 context context, 181 message 'user was successfully with sign in facebook!', 182 onpressed () async { 183 navigator pushandremoveuntil( 184 context, 185 materialpageroute(builder (context) => userpage()), 186 (route\<dynamic> route) => false, 187 ); 188 }); 189 } else { 190 message showerror( 191 context context, message parseresponse error! message); 192 } 193 } else { 194 message showerror( 195 context context, message parseresponse error! message); 196 } 197 } on exception catch (e) { 198 print(e tostring()); 199 message showerror(context context, message e tostring()); 200 } 201 } 202 } 203 204 class userpage extends statelesswidget { 205 future\<parseuser?> getuser() async { 206 return await parseuser currentuser() as parseuser?; 207 } 208 209 @override 210 widget build(buildcontext context) { 211 void douserlogout() async { 212 final currentuser = await parseuser currentuser() as parseuser; 213 var response = await currentuser logout(); 214 if (response success) { 215 message showsuccess( 216 context context, 217 message 'user was successfully logout!', 218 onpressed () { 219 navigator pushandremoveuntil( 220 context, 221 materialpageroute(builder (context) => homepage()), 222 (route\<dynamic> route) => false, 223 ); 224 }); 225 } else { 226 message showerror(context context, message response error! message); 227 } 228 } 229 230 return scaffold( 231 appbar appbar( 232 title text('flutter sign in with facebook'), 233 ), 234 body futurebuilder\<parseuser?>( 235 future getuser(), 236 builder (context, snapshot) { 237 switch (snapshot connectionstate) { 238 case connectionstate none 239 case connectionstate waiting 240 return center( 241 child container( 242 width 100, 243 height 100, 244 child circularprogressindicator()), 245 ); 246 default 247 return padding( 248 padding const edgeinsets all(8 0), 249 child column( 250 crossaxisalignment crossaxisalignment stretch, 251 mainaxisalignment mainaxisalignment center, 252 children \[ 253 center( 254 child text( 255 'hello, ${snapshot data! get\<string>('name')}')), 256 sizedbox( 257 height 16, 258 ), 259 container( 260 height 50, 261 child elevatedbutton( 262 child const text('logout'), 263 onpressed () => douserlogout(), 264 ), 265 ), 266 ], 267 ), 268 ); 269 } 270 })); 271 } 272 } 273 274 class message { 275 static void showsuccess( 276 {required buildcontext context, 277 required string message, 278 voidcallback? onpressed}) { 279 showdialog( 280 context context, 281 builder (buildcontext context) { 282 return alertdialog( 283 title const text("success!"), 284 content text(message), 285 actions \<widget>\[ 286 new elevatedbutton( 287 child const text("ok"), 288 onpressed () { 289 navigator of(context) pop(); 290 if (onpressed != null) { 291 onpressed(); 292 } 293 }, 294 ), 295 ], 296 ); 297 }, 298 ); 299 } 300 301 static void showerror( 302 {required buildcontext context, 303 required string message, 304 voidcallback? onpressed}) { 305 showdialog( 306 context context, 307 builder (buildcontext context) { 308 return alertdialog( 309 title const text("error!"), 310 content text(message), 311 actions \<widget>\[ 312 new elevatedbutton( 313 child const text("ok"), 314 onpressed () { 315 navigator of(context) pop(); 316 if (onpressed != null) { 317 onpressed(); 318 } 319 }, 320 ), 321 ], 322 ); 323 }, 324 ); 325 } 326 } trouvez votre identifiant d'application et vos clés de client en naviguant vers le tableau de bord de votre application à site web de back4app https //www back4app com/ mettez à jour votre code dans main dart main dart avec les valeurs de l'applicationid et du clientkey de votre projet dans back4app keyapplicationid = app id app id keyclientkey = client key client key exécutez le projet, et l'application se chargera comme indiqué dans l'image conclusion à ce stade, vous êtes en mesure d'utiliser se connecter avec facebook dans flutter sur back4app