Parse SDK로 Flutter에 Facebook 로그인 통합하기 가이드

parse를 사용하여 flutter 앱에서 facebook 로그인을 설정하기 소개 parse server는 제3자 인증을 지원합니다 이 가이드에서는 parse를 사용하여 flutter 앱에서 facebook 인증/로그인을 설정하는 방법을 배웁니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 버전 2 2 x 이상 https //flutter dev/docs/get started/install android studio https //developer android com/studio 또는 vs code 설치 ( 플러그인 dart 및 flutter 포함) back4app에 연결된 flutter 앱 참고 flutter 프로젝트에 parse sdk 설치 를 따라 back4app에 연결된 flutter 프로젝트를 생성합니다 \[facebook for developers 계정] (https //developers facebook com) 프로젝트에 flutter facebook auth 플러그인을 설정합니다 android 또는 ios에서 실행되는 장치(시뮬레이터 아님) 목표 parse server를 사용하여 flutter 앱에 facebook 로그인을 추가하기 1 android용 facebook 로그인 구성 빠른 시작 플러그인 지침을 따르세요 flutter facebook auth https //pub dev/packages/flutter facebook auth 에 대한 android의 링크 https //facebook meedu app/#/android https //facebook meedu app/#/android 2 android용 facebook 로그인 구성 빠른 시작 플러그인 지침을 따르세요 flutter facebook auth https //pub dev/packages/flutter facebook auth 에 대한 ios의 링크 https //facebook meedu app/#/ios https //facebook meedu app/#/ios 3 facebook을 위한 parse auth 설정 back4app 웹사이트로 이동하여 로그인한 후 앱을 찾으세요 그 후, 서버 설정 서버 설정 을 클릭하고 facebook 로그인 facebook 로그인 블록을 검색한 후 설정 설정 을 선택하세요 facebook 로그인 facebook 로그인 섹션은 다음과 같습니다 이제 아래 필드에 facebook appid facebook appid 를 붙여넣고 저장 버튼을 클릭하면 됩니다 facebook 로그인을 통합하는 동안 문제가 발생하면, 채팅을 통해 저희 팀에 연락해 주세요! 4 facebook으로 로그인 추가하기 프로젝트가 설정되었으므로, 사용자 데이터를 가져오고 parse에 로그인할 수 있습니다 문서에 따르면, 사용자 인증 데이터가 포함된 map을 전송해야 합니다 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 flutter에서 facebook으로 로그인하기 이제 flutter 앱에서 facebook으로 로그인하는 예제를 사용해 보겠습니다 간단한 인터페이스로 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 } 애플리케이션 id와 클라이언트 키 자격 증명을 찾으려면 back4app 웹사이트 https //www back4app com/ 로 이동하세요 코드를 다음으로 업데이트하세요 main dart main dart back4app의 프로젝트의 applicationid와 clientkey 값으로 keyapplicationid = 앱 id 앱 id keyclientkey = 클라이언트 키 클라이언트 키 프로젝트를 실행하면 앱이 이미지와 같이 로드됩니다 결론 이 단계에서, 당신은 back4app에서 flutter로 facebook으로 로그인 기능을 사용할 수 있습니다