--- title: Flutter로 Parse 서버에서 사용자 등록 구현하기 slug: docs-kr/flutter/parse-sdk/users/flutter-sign-up description: Flutter와 Parse 서버로 사용자 등록 기능을 구현하는 방법에 대해 알아보세요. 기능적인 최신 사용자 계정을 생성하고 테스트하세요. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-18T13:06:05.096Z --- # 플러터를 위한 사용자 등록 (Parse Server 사용) ## 소개 많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다. Parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 전문화된 `사용자 클래스`를 제공합니다. 이 클래스를 사용하면 앱에 사용자 계정 기능을 추가할 수 있습니다. `ParseUser`는 `ParseObject`의 하위 클래스이며, 동일한 기능을 가지고 있습니다. ParseObject에 있는 모든 메서드는 ParseUser에도 존재합니다. 차이점은 `ParseUser`가 사용자 계정에 특정한 몇 가지 특별한 추가 기능을 가지고 있다는 것입니다. `ParseUser`는 ParseObject와 구별되는 여러 속성을 가지고 있습니다: - **사용자 이름: 사용자의 사용자 이름 (필수).** - **비밀번호: 사용자의 비밀번호 (가입 시 필수).** - **이메일: 사용자의 이메일 주소 (선택 사항).** 사용자는 `이메일 주소`를 `사용자 이름`으로 사용할 수 있습니다. 사용자에게 `이메일`을 입력하도록 요청하되, `사용자 이름` 속성에 입력하세요 — ParseUser는 정상적으로 작동합니다. 이 가이드에서는 **Parse Server를 위한 Flutter 플러그인**을 사용하여 `ParseUser` 클래스를 사용하여 Flutter 앱을 위한 사용자 등록 기능을 만드는 방법을 배울 것입니다. ::embed[]{url="https://www.youtube.com/embed/RDRyVhZ_LNg"} ## 목표 Flutter 앱을 위한 사용자 등록 기능을 Parse를 사용하여 구축합니다. ## 전제 조건 **이 튜토리얼을 완료하려면 다음이 필요합니다:** :::hint{type="info"} - [Flutter 버전 2.2.x 이상](https://flutter.dev/docs/get-started/install) - [Android Studio ](https://developer.android.com/studio) 또는 [VS Code 설치](https://code.visualstudio.com/) ( [플러그인](https://docs.flutter.dev/get-started/editor) Dart 및 Flutter 포함) - Back4App에서 [생성된](https://www.back4app.com/docs/get-started/new-parse-app) 앱: - **참고: ** [새 Parse 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요. - Back4app에 연결된 Flutter 앱. - **참고: ** [Flutter 프로젝트에 Parse SDK 설치](https://www.back4app.com/docs/flutter/parse-sdk/parse-flutter-sdk)를 따라 Back4App에 연결된 Flutter 프로젝트를 만드세요. - Android 또는 iOS를 실행하는 장치(또는 가상 장치). ::: ## 회원가입 앱 이해하기 회원가입 프로세스를 더 잘 이해하기 위해, 사용자 데이터를 등록하고 계정을 생성하는 앱을 만들 것입니다. 이 가이드의 주요 초점이 Flutter와 Parse를 사용하는 것이기 때문에 Flutter 애플리케이션 코드는 설명하지 않겠습니다. 다음 단계를 따르면, Back4App 데이터베이스에 작업을 저장하는 Todo 앱을 구축할 것입니다. ## 시작해봅시다! 다음 단계를 따르면 Back4App 데이터베이스에 사용자 계정을 생성하는 Sign App을 구축할 수 있습니다. ## 1 - Sign App 템플릿 만들기 이전 가이드에서 **Parse Server용 Flutter 플러그인**으로 Flutter 프로젝트를 엽니다. `main.dart` 파일을 열고 모든 코드를 정리한 후 다음으로 교체합니다: ```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 { 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: [ 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: [ 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 ``` :::hint{type="info"} 함수 `debug`의 매개변수 `Parse().initialize`가 `true`, Parse API 호출을 콘솔에 표시할 수 있습니다. 이 설정은 코드 디버깅에 도움이 될 수 있습니다. 릴리스 버전에서는 디버그를 비활성화하는 것이 좋습니다. ::: ## 2 - Back4app 프로젝트에 템플릿 연결하기 애플리케이션 ID와 클라이언트 키 자격 증명을 찾으려면 [Back4App 웹사이트](https://www.back4app.com/)로 이동하여 앱 대시보드에서 확인하세요. Back4app에서 프로젝트의 ApplicationId와 ClientKey 값을 사용하여 `main.dart`의 코드를 업데이트하세요. - **keyApplicationId = 앱 ID** - **keyClientKey = 클라이언트 키** 프로젝트를 실행하면 앱이 이미지와 같이 로드됩니다. ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/QdGj6ymZMOwKP3UmZVER-_image.png" size="30" width="321" height="635" position="center" showCaption="false"} ## 3 - 사용자 등록 코드 사용자 등록 기능은 Parse 앱에 새 사용자를 생성합니다. 그 전에 사용자 이름과 이메일이 고유한지 확인합니다. 등록이 성공하지 않으면 반환된 오류 객체를 확인해야 합니다. 가장 가능성이 높은 원인은 다른 사용자가 이미 사용자 이름이나 이메일을 사용하고 있기 때문입니다. 이를 사용자에게 알리고 다른 사용자 이름을 시도해 보도록 요청해야 합니다. 파일에서 `doUserRegistration` 함수를 검색하십시오. `main.dart` 안의 코드를 `doUserRegistration`로 교체하십시오: ```dart 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 } ``` 이 기능을 구축하려면 다음 단계를 따르세요: 1. 다음 명령으로 `ParseUser` 클래스의 새 인스턴스를 만듭니다. `ParseUser.createUser(username, password, email)`, 앱에 입력된 데이터로. 2. 다음 `signUp` 함수를 호출하여 사용자를 Parse 대시보드의 데이터베이스에 등록합니다. 3. 사용자가 성공적으로 가입했는지 확인합니다. 성공하지 않으면 오류 설명 메시지를 표시합니다. 전체 코드는 다음과 같아야 합니다: ```dart 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 } ``` :::hint{type="info"} 테스트하려면 Android Studio/VSCode에서 `Run` 버튼을 클릭하세요. ::: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/FqEORppE07Iq7AQt6FFU6_image.png" size="30" width="321" height="635" position="center" showCaption="false"} 원하는 사용자 자격 증명을 제공한 후, 모든 것이 성공적이었다면 가입 버튼을 누른 후 이 메시지를 볼 수 있습니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/t_Ntw03UeTQXfkX5CJ9A6_image.png" size="30" width="321" height="635" position="center" showCaption="false"} 이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/jPGjfA28-xVzeJhuMT87W_image.png" size="30" width="321" height="635" position="center" showCaption="false"} 비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/1DJKZvpBsQyL-vf-1cPK2_image.png" size="30" width="321" height="635" position="center" showCaption="false"} ## 4 - 대시보드에서 사용자 등록 확인하기 1. 다음에서 로그인하세요 [Back4App 웹사이트](https://www.back4app.com/) 2. 앱을 찾아서 `대시보드`>`코어`>`브라우저`>`사용자`. 이 시점에서 아래와 같이 사용자가 표시되어야 합니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/cX3TvNKX8-ViA8EqWhzuf_image.png) ## 완료되었습니다! 이 가이드의 끝에서, Flutter에서 새로운 Parse 사용자를 등록하는 방법을 배웠습니다. 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다.