Facebook Login-Integration in Flutter mit Parse

einrichten der facebook anmeldung in ihrer flutter app mit parse einführung parse server unterstützt die authentifizierung von drittanbietern in diesem leitfaden erfahren sie, wie sie die facebook authentifizierung/anmeldung in ihrer flutter app mit parse einrichten voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter version 2 2 x oder höher https //flutter dev/docs/get started/install android studio https //developer android com/studio oder vs code installiert (mit plugins dart und flutter) eine flutter app, die erstellt und mit back4app verbunden ist hinweis befolgen sie die installation des parse sdk im flutter projekt um ein flutter projekt zu erstellen, das mit back4app verbunden ist \[facebook für entwickler konto] (https //developers facebook com) richten sie das plugin flutter facebook auth im projekt ein ein gerät (nicht simulator), das android oder ios ausführt ziel um die facebook anmeldung in ihrer flutter app mit parse server hinzuzufügen 1 konfigurieren sie die facebook anmeldung für android schnellstart befolgen sie die anweisungen des plugins flutter facebook auth https //pub dev/packages/flutter facebook auth für android unter dem link https //facebook meedu app/#/android https //facebook meedu app/#/android 2 konfigurieren sie die facebook anmeldung für android schnellstart befolgen sie die anweisungen des plugins flutter facebook auth https //pub dev/packages/flutter facebook auth für ios unter dem link https //facebook meedu app/#/ios https //facebook meedu app/#/ios 3 richten sie die parse authentifizierung für facebook ein gehen sie zur back4app website, melden sie sich an und suchen sie ihre app klicken sie dann auf servereinstellungen servereinstellungen und suchen sie den facebook anmeldung facebook anmeldung block und wählen sie einstellungen einstellungen der facebook anmeldung facebook anmeldung bereich sieht so aus jetzt müssen sie nur noch ihre facebook appid facebook appid in das feld unten einfügen und auf die schaltfläche klicken, um zu speichern falls sie probleme bei der integration von facebook login haben, kontaktieren sie bitte unser team über den chat! 4 fügen sie die anmeldung mit facebook hinzu jetzt, da sie das projekt eingerichtet haben, können wir die benutzerdaten abrufen und uns bei parse anmelden laut der dokumentation müssen wir eine map mit benutzerauthentifizierungsdaten senden 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 anmeldung mit facebook von flutter lassen sie uns jetzt unser beispiel für die anmeldung mit facebook in der flutter app verwenden, mit einer einfachen benutzeroberfläche öffnen sie ihr flutter projekt, gehen sie zur main dart datei, bereinigen sie den gesamten code und ersetzen sie ihn durch 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 } finden sie ihre anwendungs id und client schlüssel anmeldeinformationen, indem sie zu ihrem app dashboard navigieren unter back4app website https //www back4app com/ aktualisieren sie ihren code in main dart main dart mit den werten der applicationid und des clientkey ihres projekts in back4app keyapplicationid = app id app id keyclientkey = client key client key führen sie das projekt aus, und die app wird wie im bild angezeigt fazit in diesem stadium sind sie in der lage, sich mit facebook in flutter auf back4app anzumelden