Integración de inicio de sesión Facebook en Parse con Flutter

configurando el inicio de sesión de facebook en tu aplicación flutter usando parse introducción parse server soporta la autenticación de terceros en esta guía aprenderás cómo configurar la autenticación/inicio de sesión de facebook en tu aplicación flutter usando parse requisitos previos para completar este tutorial, necesitarás flutter versión 2 2 x o posterior https //flutter dev/docs/get started/install android studio https //developer android com/studio o vs code instalado (con plugins dart y flutter) una aplicación flutter creada y conectada a back4app nota sigue el instalar parse sdk en el proyecto flutter para crear un proyecto flutter conectado a back4app \[cuenta de facebook para desarrolladores] (https //developers facebook com) configura el plugin flutter facebook auth en el proyecto un dispositivo (no simulador) que ejecute android o ios objetivo agregar inicio de sesión de facebook en tu aplicación flutter usando parse server 1 configurar el inicio de sesión de facebook para android guía rápida sigue las instrucciones del plugin flutter facebook auth https //pub dev/packages/flutter facebook auth para android en el enlace https //facebook meedu app/#/android https //facebook meedu app/#/android 2 configurar el inicio de sesión de facebook para android guía rápida sigue las instrucciones del plugin flutter facebook auth https //pub dev/packages/flutter facebook auth para ios en el enlace https //facebook meedu app/#/ios https //facebook meedu app/#/ios 3 configurar parse auth para facebook ve al sitio web de back4app, inicia sesión y luego encuentra tu aplicación después de eso, haz clic en configuración del servidor configuración del servidor y busca el bloque de inicio de sesión de facebook inicio de sesión de facebook y selecciona configuración configuración la sección de inicio de sesión de facebook inicio de sesión de facebook se ve así ahora, solo necesitas pegar tu appid de facebook appid de facebook en el campo de abajo y hacer clic en el botón para guardar ¡en caso de que enfrente algún problema al integrar el inicio de sesión de facebook, comuníquese con nuestro equipo a través del chat! 4 agregar el inicio de sesión con facebook ahora que tiene el proyecto configurado, podemos obtener los datos del usuario e iniciar sesión en parse según la documentación, debemos enviar un mapa con los datos de autenticación del usuario 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 iniciar sesión con facebook desde flutter ahora usemos nuestro ejemplo para iniciar sesión con facebook en la aplicación flutter, con una interfaz simple abra su proyecto de flutter, vaya al archivo main dart, limpie todo el código y reemplácelo con 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 } encuentra tu id de aplicación y las credenciales de clave de cliente navegando a tu panel de control de la aplicación en sitio web de back4app https //www back4app com/ actualiza tu código en main dart main dart con los valores de applicationid y clientkey de tu proyecto en back4app keyapplicationid = app id app id keyclientkey = client key client key ejecuta el proyecto, y la aplicación se cargará como se muestra en la imagen conclusión en esta etapa, puedes usar iniciar sesión con facebook en flutter en back4app