Parse 서버와 Flutter에서 Apple 로그인을 구현하는 방법

parse에서 flutter로 apple로 로그인하기 소개 parse server는 제3자 인증을 지원합니다 이 가이드에서는 parse에서 flutter 앱에 apple로 로그인을 지원하는 방법을 배웁니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 버전 2 2 x 이상 https //flutter dev/docs/get started/install android studio https //developer android com/studio 또는 vs code 설치 (과 플러그인 dart 및 flutter) back4app에 연결된 flutter 앱 참고 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 apple developer program 에 대한 유료 회원가입 프로젝트에 sign in with apple sign in with apple 플러그인을 설정하세요 ios에서 실행되는 장치(시뮬레이터 아님) 목표 parse server에서 flutter 앱으로 apple로 로그인하기 1 ios 기본 프로젝트에 apple로 로그인 기능 추가하기 xcode에서 ios/runner xcworkspace ios/runner xcworkspace 열기 플러그인 sign in with apple sign in with apple 설정을 위한 apple로 로그인 apple로 로그인 을 확인하세요 프로젝트에 대한 팀 팀 선택하기 xcode 저장 후 닫기 2 개발자 포털에서 앱 id 구성하기 당신의 apple developer 계정 https //developer apple com/ 에 로그인하고 식별자 식별자 섹션으로 이동하세요 생성한 번들 식별자 번들 식별자 가 있는지 확인하세요 번들 식별자 번들 식별자 를 클릭하고 아래로 스크롤하세요 apple로 로그인 apple로 로그인 이 선택되어 있는지 확인하세요 편집 편집 을 클릭하고 기본 앱 id로 활성화 기본 앱 id로 활성화 가 선택되어 있는지 확인하세요 모든 것이 올바르면 저장하고 종료하세요 3 apple을 위한 parse auth 설정하기 back4app 웹사이트로 이동하여 로그인한 후 앱을 찾으세요 그 후, 서버 설정 서버 설정 을 클릭하고 apple 로그인 apple 로그인 블록을 검색한 후 설정 설정 을 선택하세요 apple 로그인 apple 로그인 섹션은 다음과 같습니다 이제 아래 필드에 번들 id 번들 id 를 붙여넣고 저장 버튼을 클릭하면 됩니다 apple 로그인 통합 중 문제가 발생하면, 채팅을 통해 저희 팀에 문의해 주세요! 4 apple로 로그인 추가하기 프로젝트가 설정되었으니, 사용자 데이터를 가져오고 parse에 로그인할 수 있습니다 문서에 따르면, 사용자 인증 데이터가 포함된 맵을 전송해야 합니다 1 final credential = await signinwithapple getappleidcredential( 2 scopes \[ 3 appleidauthorizationscopes email, 4 appleidauthorizationscopes fullname, 5 ], 6 ); 7 8 //https //docs parseplatform org/parse server/guide/#apple authdata 9 //according to the documentation, we must send a map with user authentication data 10 //make sign in with apple 11 final parseresponse = await parseuser loginwith('apple', 12 apple(credential identitytoken!, credential useridentifier!)); 5 flutter에서 apple로 로그인하기 이제 flutter 앱에서 apple로 로그인하는 예제를 사용해 보겠습니다 간단한 인터페이스로 flutter 프로젝트를 열고, main dart 파일로 이동하여 모든 코드를 정리한 후 다음으로 교체하세요 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 import 'package\ sign in with apple/sign in with apple dart'; 4 5 void main() async { 6 widgetsflutterbinding ensureinitialized(); 7 8 final keyapplicationid = 'your app id here'; 9 final keyclientkey = 'your client key here'; 10 final keyparseserverurl = 'https //parseapi back4app com'; 11 12 await parse() initialize(keyapplicationid, keyparseserverurl, 13 clientkey keyclientkey, debug true); 14 15 runapp(myapp()); 16 } 17 18 class myapp extends statelesswidget { 19 future\<bool> hasuserlogged() async { 20 parseuser? currentuser = await parseuser currentuser() as parseuser?; 21 if (currentuser == null) { 22 return false; 23 } 24 //checks whether the user's session token is valid 25 final parseresponse? parseresponse = 26 await parseuser getcurrentuserfromserver(currentuser sessiontoken!); 27 28 if (parseresponse? success == null || !parseresponse! success) { 29 //invalid session logout 30 await currentuser logout(); 31 return false; 32 } else { 33 return true; 34 } 35 } 36 37 @override 38 widget build(buildcontext context) { 39 return materialapp( 40 title 'flutter sign in with apple', 41 theme themedata( 42 primaryswatch colors blue, 43 visualdensity visualdensity adaptiveplatformdensity, 44 ), 45 home futurebuilder\<bool>( 46 future hasuserlogged(), 47 builder (context, snapshot) { 48 switch (snapshot connectionstate) { 49 case connectionstate none 50 case connectionstate waiting 51 return scaffold( 52 body center( 53 child container( 54 width 100, 55 height 100, 56 child circularprogressindicator()), 57 ), 58 ); 59 default 60 if (snapshot hasdata && snapshot data!) { 61 return userpage(); 62 } else { 63 return homepage(); 64 } 65 } 66 }), 67 ); 68 } 69 } 70 71 class homepage extends statefulwidget { 72 @override 73 homepagestate createstate() => homepagestate(); 74 } 75 76 class homepagestate extends state\<homepage> { 77 @override 78 widget build(buildcontext context) { 79 return scaffold( 80 appbar appbar( 81 title const text('flutter sign in with apple'), 82 ), 83 body center( 84 child singlechildscrollview( 85 padding const edgeinsets all(8), 86 child column( 87 crossaxisalignment crossaxisalignment stretch, 88 children \[ 89 container( 90 height 200, 91 child image network( 92 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 93 ), 94 center( 95 child const text('flutter on back4app', 96 style 97 textstyle(fontsize 18, fontweight fontweight bold)), 98 ), 99 sizedbox( 100 height 100, 101 ), 102 container( 103 height 50, 104 child elevatedbutton( 105 child const text('sign in with apple'), 106 onpressed () => dosigninapple(), 107 ), 108 ), 109 sizedbox( 110 height 16, 111 ), 112 ], 113 ), 114 ), 115 )); 116 } 117 118 void dosigninapple() async { 119 late parseresponse parseresponse; 120 try { 121 //set scope 122 final credential = await signinwithapple getappleidcredential( 123 scopes \[ 124 appleidauthorizationscopes email, 125 appleidauthorizationscopes fullname, 126 ], 127 ); 128 129 //https //docs parseplatform org/parse server/guide/#apple authdata 130 //according to the documentation, we must send a map with user authentication data 131 //make sign in with apple 132 parseresponse = await parseuser loginwith('apple', 133 apple(credential identitytoken!, credential useridentifier!)); 134 135 if (parseresponse success) { 136 final parseuser parseuser = await parseuser currentuser() as parseuser; 137 138 //additional information in user 139 if (credential email != null) { 140 parseuser emailaddress = credential email; 141 } 142 if (credential givenname != null && credential familyname != null) { 143 parseuser set\<string>( 144 'name', '${credential givenname} ${credential familyname}'); 145 } 146 parseresponse = await parseuser save(); 147 if (parseresponse success) { 148 message showsuccess( 149 context context, 150 message 'user was successfully with sign in apple!', 151 onpressed () async { 152 navigator pushandremoveuntil( 153 context, 154 materialpageroute(builder (context) => userpage()), 155 (route\<dynamic> route) => false, 156 ); 157 }); 158 } else { 159 message showerror( 160 context context, message parseresponse error! message); 161 } 162 } else { 163 message showerror( 164 context context, message parseresponse error! message); 165 } 166 } on exception catch (e) { 167 print(e tostring()); 168 message showerror(context context, message e tostring()); 169 } 170 } 171 } 172 173 class userpage extends statelesswidget { 174 future\<parseuser?> getuser() async { 175 return await parseuser currentuser() as parseuser?; 176 } 177 178 @override 179 widget build(buildcontext context) { 180 void douserlogout() async { 181 final currentuser = await parseuser currentuser() as parseuser; 182 var response = await currentuser logout(); 183 if (response success) { 184 message showsuccess( 185 context context, 186 message 'user was successfully logout!', 187 onpressed () { 188 navigator pushandremoveuntil( 189 context, 190 materialpageroute(builder (context) => homepage()), 191 (route\<dynamic> route) => false, 192 ); 193 }); 194 } else { 195 message showerror(context context, message response error! message); 196 } 197 } 198 199 return scaffold( 200 appbar appbar( 201 title text('flutter sign in with apple'), 202 ), 203 body futurebuilder\<parseuser?>( 204 future getuser(), 205 builder (context, snapshot) { 206 switch (snapshot connectionstate) { 207 case connectionstate none 208 case connectionstate waiting 209 return center( 210 child container( 211 width 100, 212 height 100, 213 child circularprogressindicator()), 214 ); 215 default 216 return padding( 217 padding const edgeinsets all(8 0), 218 child column( 219 crossaxisalignment crossaxisalignment stretch, 220 mainaxisalignment mainaxisalignment center, 221 children \[ 222 center( 223 child text( 224 'hello, ${snapshot data! get\<string>('name')}')), 225 sizedbox( 226 height 16, 227 ), 228 container( 229 height 50, 230 child elevatedbutton( 231 child const text('logout'), 232 onpressed () => douserlogout(), 233 ), 234 ), 235 ], 236 ), 237 ); 238 } 239 })); 240 } 241 } 242 243 class message { 244 static void showsuccess( 245 {required buildcontext context, 246 required string message, 247 voidcallback? onpressed}) { 248 showdialog( 249 context context, 250 builder (buildcontext context) { 251 return alertdialog( 252 title const text("success!"), 253 content text(message), 254 actions \<widget>\[ 255 new elevatedbutton( 256 child const text("ok"), 257 onpressed () { 258 navigator of(context) pop(); 259 if (onpressed != null) { 260 onpressed(); 261 } 262 }, 263 ), 264 ], 265 ); 266 }, 267 ); 268 } 269 270 static void showerror( 271 {required buildcontext context, 272 required string message, 273 voidcallback? onpressed}) { 274 showdialog( 275 context context, 276 builder (buildcontext context) { 277 return alertdialog( 278 title const text("error!"), 279 content text(message), 280 actions \<widget>\[ 281 new elevatedbutton( 282 child const text("ok"), 283 onpressed () { 284 navigator of(context) pop(); 285 if (onpressed != null) { 286 onpressed(); 287 } 288 }, 289 ), 290 ], 291 ); 292 }, 293 ); 294 } 295 } 애플리케이션 id와 클라이언트 키 자격 증명을 찾으려면 back4app 웹사이트 https //www back4app com/ 로 이동하세요 코드를 main dart main dart 에서 back4app의 애플리케이션 id와 클라이언트 키 값으로 업데이트하세요 keyapplicationid = 앱 id 앱 id keyclientkey = 클라이언트 키 클라이언트 키 프로젝트를 실행하면 앱이 이미지와 같이 로드됩니다 결론 이 단계에서, 당신은 back4app에서 flutter로 apple로 로그인 기능을 사용할 수 있습니다