使用Flutter插件在Parse Server中实现用户注册

使用 parse server 的 flutter 用户注册 介绍 在许多应用程序的核心，用户帐户具有一种概念，使用户能够安全地访问他们的信息。parse 提供了一个专门的 用户类 用户类 ，自动处理用户帐户管理所需的许多功能。通过这个类，您将能够为您的应用程序添加用户帐户功能。 parseuser parseuser 是 parseobject parseobject 的子类，并具有相同的特性。所有在 parseobject 上的方法也存在于 parseuser 中。不同之处在于 parseuser parseuser 有一些特定于用户帐户的特殊附加功能。 parseuser parseuser 有几个属性使其与 parseobject 区分开来： 用户名：用户的用户名（必填）。 密码：用户的密码（注册时必填）。 电子邮件：用户的电子邮件地址（可选）。 您可以自由使用 电子邮件地址 电子邮件地址 作为 用户名 用户名 请用户输入他们的 电子邮件 电子邮件 ，但在 用户名 用户名 属性中填写它 — parseuser 将正常工作。 在本指南中，您将学习如何使用 flutter 插件用于 parse server 来管理用户，使用 parseuser parseuser 类为您的 flutter 应用程序创建用户注册功能。 目标 使用 parse 为 flutter 应用程序构建用户注册功能。 先决条件 要完成本教程，您需要： https //flutter dev/docs/get started/install https //developer android com/studio 或 https //code visualstudio com/ （带有 https //docs flutter dev/get started/editor dart 和 flutter） 一个在 back4app 上 https //www back4app com/docs/get started/new parse app ： 注意： 请遵循 https //www back4app com/docs/get started/new parse app 以了解如何在 back4app 上创建 parse 应用。 一个连接到 back4app 的 flutter 应用。 注意： 请遵循 https //www back4app com/docs/flutter/parse sdk/parse flutter sdk 以创建一个连接到 back4app 的 flutter 项目。 一台运行 android 或 ios 的设备（或虚拟设备）。 理解注册应用 为了更好地理解注册过程，我们将创建一个应用来注册用户数据并创建您的账户。由于本指南的主要重点是使用flutter与parse，我们不会解释flutter应用程序代码。按照以下步骤，您将构建一个todo应用，该应用将在back4app数据库中存储任务。 让我们开始吧！ 按照以下步骤，您将能够构建一个注册应用，该应用将在back4app数据库中创建用户账户。 1 创建注册应用模板 打开您在之前指南中创建的flutter项目 flutter插件用于parse server 。前往 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 当 调试 调试 参数在函数 parse() initialize parse() initialize 为 true true , 允许在控制台上显示 parse api 调用。此配置可以帮助调试代码。建议在发布版本中禁用调试 2 将模板连接到 back4app 项目 在您的应用程序仪表板中找到您的应用程序 id 和客户端密钥凭据，网址为 https //www back4app com/ 在 main dart main dart 中更新您的代码，使用您在 back4app 中项目的 applicationid 和 clientkey 的值 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 dashboard 数据库中。 检查用户注册是否成功。如果不成功，显示错误描述信息。 完整的代码应如下所示： 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 中的 运行 运行 按钮。 在提供所需的用户凭据后，如果一切顺利，您在按下注册后将看到此消息： 如果您尝试使用与之前相同的用户名注册用户，可以测试错误处理： 如果您尝试注册时没有密码，您将收到另一个错误： 4 在仪表板上检查用户注册 登录到 https //www back4app com/ 找到您的应用并点击 仪表板 仪表板 > 核心 核心 > 浏览器 浏览器 > 用户 用户 此时，您应该看到您的用户，如下所示： 完成！ 在本指南的最后，您学习了如何在 flutter 上注册新的 parse 用户。在下一个指南中，我们将向您展示如何登录和注销用户。