การตั้งค่า Facebook Login ในแอป Flutter ด้วย Parse SDK

การตั้งค่าการเข้าสู่ระบบ facebook บนแอป flutter ของคุณโดยใช้ parse บทนำ parse server รองรับการตรวจสอบสิทธิ์จากบุคคลที่สาม ในคู่มือนี้คุณจะได้เรียนรู้วิธีการตั้งค่าการตรวจสอบสิทธิ์/การเข้าสู่ระบบ facebook บนแอป flutter ของคุณโดยใช้ parse ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี flutter เวอร์ชัน 2 2 x หรือใหม่กว่า https //flutter dev/docs/get started/install android studio https //developer android com/studio หรือ vs code ที่ติดตั้งแล้ว (พร้อมกับ ปลั๊กอิน dart และ flutter) แอป flutter ที่สร้างและเชื่อมต่อกับ back4app หมายเหตุ ติดตาม การติดตั้ง parse sdk บนโปรเจกต์ flutter เพื่อสร้างโปรเจกต์ flutter ที่เชื่อมต่อกับ back4app \[บัญชี facebook สำหรับนักพัฒนา] (https //developers facebook com) ติดตั้งปลั๊กอิน flutter facebook auth บนโปรเจกต์ อุปกรณ์ (ไม่ใช่ simulator) ที่รัน android หรือ ios เป้าหมาย เพื่อเพิ่มการเข้าสู่ระบบ facebook บนแอป flutter ของคุณโดยใช้ parse server 1 ตั้งค่าการเข้าสู่ระบบ facebook สำหรับ android เริ่มต้นอย่างรวดเร็ว ปฏิบัติตามคำแนะนำของปลั๊กอิน flutter facebook auth https //pub dev/packages/flutter facebook auth สำหรับ android ที่ลิงก์ https //facebook meedu app/#/android https //facebook meedu app/#/android 2 ตั้งค่าการเข้าสู่ระบบ facebook สำหรับ android เริ่มต้นอย่างรวดเร็ว ปฏิบัติตามคำแนะนำของปลั๊กอิน flutter facebook auth https //pub dev/packages/flutter facebook auth สำหรับ ios ที่ลิงก์ https //facebook meedu app/#/ios https //facebook meedu app/#/ios 3 ตั้งค่า parse auth สำหรับ facebook ไปที่เว็บไซต์ back4app ลงชื่อเข้าใช้และค้นหาแอปของคุณ จากนั้นคลิกที่ การตั้งค่าเซิร์ฟเวอร์ การตั้งค่าเซิร์ฟเวอร์ และค้นหาบล็อก การเข้าสู่ระบบ facebook การเข้าสู่ระบบ facebook และเลือก การตั้งค่า การตั้งค่า ส่วน การเข้าสู่ระบบ facebook การเข้าสู่ระบบ facebook ดูเหมือนจะเป็นแบบนี้ ตอนนี้คุณเพียงแค่ต้องวาง facebook appid facebook appid ของคุณในช่องด้านล่างและคลิกที่ปุ่มเพื่อบันทึก หากคุณพบปัญหาในการรวม facebook login โปรดติดต่อทีมงานของเราผ่านการแชท! 4 เพิ่มการเข้าสู่ระบบด้วย facebook ตอนนี้คุณได้ตั้งค่าโปรเจกต์แล้ว เราสามารถดึงข้อมูลผู้ใช้และเข้าสู่ระบบกับ parse ได้ ตามเอกสาร เราต้องส่งแผนที่ที่มีข้อมูลการตรวจสอบสิทธิ์ของผู้ใช้ 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 เข้าสู่ระบบด้วย facebook จาก flutter ตอนนี้เรามาใช้ตัวอย่างของเราสำหรับการเข้าสู่ระบบด้วย facebook ในแอป flutter โดยมีอินเทอร์เฟซที่เรียบง่าย เปิดโปรเจกต์ flutter ของคุณ ไปที่ไฟล์ main dart ทำความสะอาดโค้ดทั้งหมด และแทนที่ด้วย 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 } ค้นหา application id และ client key ของคุณโดยไปที่แดชบอร์ดแอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ อัปเดตโค้ดของคุณใน main dart main dart ด้วยค่าของ applicationid และ clientkey ของโปรเจกต์ของคุณใน back4app keyapplicationid = app id app id keyclientkey = client key client key เรียกใช้โปรเจกต์ และแอปจะโหลดตามที่แสดงในภาพ บทสรุป ในขั้นตอนนี้ คุณสามารถใช้การลงชื่อเข้าใช้ด้วย facebook ใน flutter บน back4app