Flutter로 Parse 서버에서 사용자 등록 구현하기

플러터를 위한 사용자 등록 (parse server 사용) 소개 많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다 parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 전문화된 사용자 클래스 사용자 클래스 를 제공합니다 이 클래스를 사용하면 앱에 사용자 계정 기능을 추가할 수 있습니다 parseuser parseuser 는 parseobject parseobject 의 하위 클래스이며, 동일한 기능을 가지고 있습니다 parseobject에 있는 모든 메서드는 parseuser에도 존재합니다 차이점은 parseuser parseuser 가 사용자 계정에 특정한 몇 가지 특별한 추가 기능을 가지고 있다는 것입니다 parseuser parseuser 는 parseobject와 구별되는 여러 속성을 가지고 있습니다 사용자 이름 사용자의 사용자 이름 (필수) 비밀번호 사용자의 비밀번호 (가입 시 필수) 이메일 사용자의 이메일 주소 (선택 사항) 사용자는 이메일 주소 이메일 주소 를 사용자 이름 사용자 이름 으로 사용할 수 있습니다 사용자에게 이메일 이메일 을 입력하도록 요청하되, 사용자 이름 사용자 이름 속성에 입력하세요 — parseuser는 정상적으로 작동합니다 이 가이드에서는 parse server를 위한 flutter 플러그인 을 사용하여 parseuser parseuser 클래스를 사용하여 flutter 앱을 위한 사용자 등록 기능을 만드는 방법을 배울 것입니다 목표 flutter 앱을 위한 사용자 등록 기능을 parse를 사용하여 구축합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 버전 2 2 x 이상 https //flutter dev/docs/get started/install android studio https //developer android com/studio 또는 vs code 설치 ( 플러그인 dart 및 flutter 포함) back4app에서 생성된 앱 참고 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 back4app에 연결된 flutter 앱 참고 flutter 프로젝트에 parse sdk 설치 를 따라 back4app에 연결된 flutter 프로젝트를 만드세요 android 또는 ios를 실행하는 장치(또는 가상 장치) 회원가입 앱 이해하기 회원가입 프로세스를 더 잘 이해하기 위해, 사용자 데이터를 등록하고 계정을 생성하는 앱을 만들 것입니다 이 가이드의 주요 초점이 flutter와 parse를 사용하는 것이기 때문에 flutter 애플리케이션 코드는 설명하지 않겠습니다 다음 단계를 따르면, back4app 데이터베이스에 작업을 저장하는 todo 앱을 구축할 것입니다 시작해봅시다! 다음 단계를 따르면 back4app 데이터베이스에 사용자 계정을 생성하는 sign app을 구축할 수 있습니다 1 sign app 템플릿 만들기 이전 가이드에서 parse server용 flutter 플러그인 으로 flutter 프로젝트를 엽니다 main dart main dart 파일을 열고 모든 코드를 정리한 후 다음으로 교체합니다 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter signup', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 final controlleremail = texteditingcontroller(); 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter signup'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user registration', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 keyboardtype textinputtype text, 76 textcapitalization textcapitalization none, 77 autocorrect false, 78 decoration inputdecoration( 79 border outlineinputborder( 80 borderside borderside(color colors black)), 81 labeltext 'username'), 82 ), 83 sizedbox( 84 height 8, 85 ), 86 textfield( 87 controller controlleremail, 88 keyboardtype textinputtype emailaddress, 89 textcapitalization textcapitalization none, 90 autocorrect false, 91 decoration inputdecoration( 92 border outlineinputborder( 93 borderside borderside(color colors black)), 94 labeltext 'e mail'), 95 ), 96 sizedbox( 97 height 8, 98 ), 99 textfield( 100 controller controllerpassword, 101 obscuretext true, 102 keyboardtype textinputtype text, 103 textcapitalization textcapitalization none, 104 autocorrect false, 105 decoration inputdecoration( 106 border outlineinputborder( 107 borderside borderside(color colors black)), 108 labeltext 'password'), 109 ), 110 sizedbox( 111 height 8, 112 ), 113 container( 114 height 50, 115 child textbutton( 116 child const text('sign up'), 117 onpressed () => douserregistration(), 118 ), 119 ) 120 ], 121 ), 122 ), 123 )); 124 } 125 126 void showsuccess() { 127 showdialog( 128 context context, 129 builder (buildcontext context) { 130 return alertdialog( 131 title const text("success!"), 132 content const text("user was successfully created!"), 133 actions \<widget>\[ 134 new flatbutton( 135 child const text("ok"), 136 onpressed () { 137 navigator of(context) pop(); 138 }, 139 ), 140 ], 141 ); 142 }, 143 ); 144 } 145 146 void showerror(string errormessage) { 147 showdialog( 148 context context, 149 builder (buildcontext context) { 150 return alertdialog( 151 title const text("error!"), 152 content text(errormessage), 153 actions \<widget>\[ 154 new flatbutton( 155 child const text("ok"), 156 onpressed () { 157 navigator of(context) pop(); 158 }, 159 ), 160 ], 161 ); 162 }, 163 ); 164 } 165 166 void douserregistration() async { 167 //sigup code here 168 } 169 } 170 함수 debug debug 의 매개변수 parse() initialize parse() initialize 가 true true , parse api 호출을 콘솔에 표시할 수 있습니다 이 설정은 코드 디버깅에 도움이 될 수 있습니다 릴리스 버전에서는 디버그를 비활성화하는 것이 좋습니다 2 back4app 프로젝트에 템플릿 연결하기 애플리케이션 id와 클라이언트 키 자격 증명을 찾으려면 back4app 웹사이트 https //www back4app com/ 로 이동하여 앱 대시보드에서 확인하세요 back4app에서 프로젝트의 applicationid와 clientkey 값을 사용하여 main dart main dart 의 코드를 업데이트하세요 keyapplicationid = 앱 id keyclientkey = 클라이언트 키 프로젝트를 실행하면 앱이 이미지와 같이 로드됩니다 3 사용자 등록 코드 사용자 등록 기능은 parse 앱에 새 사용자를 생성합니다 그 전에 사용자 이름과 이메일이 고유한지 확인합니다 등록이 성공하지 않으면 반환된 오류 객체를 확인해야 합니다 가장 가능성이 높은 원인은 다른 사용자가 이미 사용자 이름이나 이메일을 사용하고 있기 때문입니다 이를 사용자에게 알리고 다른 사용자 이름을 시도해 보도록 요청해야 합니다 파일에서 douserregistration douserregistration 함수를 검색하십시오 main dart main dart 안의 코드를 douserregistration douserregistration 로 교체하십시오 1 final username = controllerusername text trim(); 2 final email = controlleremail text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser createuser(username, password, email); 6 7 var response = await user signup(); 8 9 if (response success) { 10 showsuccess(); 11 } else { 12 showerror(response error! message); 13 } 이 기능을 구축하려면 다음 단계를 따르세요 다음 명령으로 parseuser parseuser 클래스의 새 인스턴스를 만듭니다 parseuser createuser(username, password, email) parseuser createuser(username, password, email) , 앱에 입력된 데이터로 다음 signup signup 함수를 호출하여 사용자를 parse 대시보드의 데이터베이스에 등록합니다 사용자가 성공적으로 가입했는지 확인합니다 성공하지 않으면 오류 설명 메시지를 표시합니다 전체 코드는 다음과 같아야 합니다 1 void douserregistration() async { 2 final username = controllerusername text trim(); 3 final email = controlleremail text trim(); 4 final password = controllerpassword text trim(); 5 6 final user = parseuser createuser(username, password, email); 7 8 var response = await user signup(); 9 10 if (response success) { 11 showsuccess(); 12 } else { 13 showerror(response error! message); 14 } 15 } 테스트하려면 android studio/vscode에서 run run 버튼을 클릭하세요 원하는 사용자 자격 증명을 제공한 후, 모든 것이 성공적이었다면 가입 버튼을 누른 후 이 메시지를 볼 수 있습니다 이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다 비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다 4 대시보드에서 사용자 등록 확인하기 다음에서 로그인하세요 back4app 웹사이트 https //www back4app com/ 앱을 찾아서 대시보드 대시보드 > 코어 코어 > 브라우저 브라우저 > 사용자 사용자 이 시점에서 아래와 같이 사용자가 표시되어야 합니다 완료되었습니다! 이 가이드의 끝에서, flutter에서 새로운 parse 사용자를 등록하는 방법을 배웠습니다 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다