使用Flutter和Parse实现用户登录与注销功能

使用 parse server 的 flutter 用户登录和注销 介绍 在上一个指南中实现 flutter 上的用户注册后，您将学习如何使用相同的 parseuser 类登录和注销用户。注册后，登录操作会自动执行，并创建一个新的用户会话。注销操作会删除已登录用户的活动会话对象。 在本指南中，您将学习如何使用 flutter 插件用于 parse server 来执行 flutter 应用程序的登录/注销，使用 parseuser 类。 目标 构建一个使用 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 上创建解析应用。 一个连接到 back4app 的 flutter 应用。 注意 请遵循 https //www back4app com/docs/flutter/parse sdk/parse flutter sdk 以创建一个连接到 back4app 的 flutter 项目。 完成之前的指南，以便更好地理解 parseuser parseuser 类。 一台运行 android 或 ios 的设备（或虚拟设备）。 理解登录/注销应用 为了更好地理解登录/登出过程，我们将创建一个应用程序来登录和登出您账户上的用户。 我们不会解释flutter应用程序代码，因为本指南的主要重点是使用flutter与parse。按照以下步骤，您将在back4app数据库中构建一个登录和登出应用。 让我们开始吧！ 在接下来的步骤中，您将能够构建一个登录/登出应用程序。 1 创建登录/登出应用程序模板 从之前的指南中打开您的 flutter 项目 flutter plugin for 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 login/logout', 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 bool isloggedin = false; 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter login/logout'), 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 login/logout', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 enabled !isloggedin, 76 keyboardtype textinputtype text, 77 textcapitalization textcapitalization none, 78 autocorrect false, 79 decoration inputdecoration( 80 border outlineinputborder( 81 borderside borderside(color colors black)), 82 labeltext 'username'), 83 ), 84 sizedbox( 85 height 8, 86 ), 87 textfield( 88 controller controllerpassword, 89 enabled !isloggedin, 90 obscuretext true, 91 keyboardtype textinputtype text, 92 textcapitalization textcapitalization none, 93 autocorrect false, 94 decoration inputdecoration( 95 border outlineinputborder( 96 borderside borderside(color colors black)), 97 labeltext 'password'), 98 ), 99 sizedbox( 100 height 16, 101 ), 102 container( 103 height 50, 104 child textbutton( 105 child const text('login'), 106 onpressed isloggedin ? null () => douserlogin(), 107 ), 108 ), 109 sizedbox( 110 height 16, 111 ), 112 container( 113 height 50, 114 child textbutton( 115 child const text('logout'), 116 onpressed !isloggedin ? null () => douserlogout(), 117 ), 118 ) 119 ], 120 ), 121 ), 122 )); 123 } 124 125 void showsuccess(string message) { 126 showdialog( 127 context context, 128 builder (buildcontext context) { 129 return alertdialog( 130 title const text("success!"), 131 content text(message), 132 actions \<widget>\[ 133 new textbutton( 134 child const text("ok"), 135 onpressed () { 136 navigator of(context) pop(); 137 }, 138 ), 139 ], 140 ); 141 }, 142 ); 143 } 144 145 void showerror(string errormessage) { 146 showdialog( 147 context context, 148 builder (buildcontext context) { 149 return alertdialog( 150 title const text("error!"), 151 content text(errormessage), 152 actions \<widget>\[ 153 new textbutton( 154 child const text("ok"), 155 onpressed () { 156 navigator of(context) pop(); 157 }, 158 ), 159 ], 160 ); 161 }, 162 ); 163 } 164 165 void douserlogin() async { 166 167 } 168 169 void douserlogout() async { 170 171 } 172 } 173 当 debug debug 参数在函数 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 用户登录代码 用户登录功能创建一个 会话 会话 对象，它指向已登录的 用户 用户 并在您的本地存储中存储有效的用户会话。 未来对方法的调用，如 currentuser currentuser 将成功检索您的 用户 用户 数据和 sessiontoken sessiontoken 用于 会话 会话 对象，该对象在 仪表板 仪表板 中创建。 在文件中搜索函数 douserlogin douserlogin main dart main dart 用以下内容替换 douserlogin douserlogin 中的代码 1 final username = controllerusername text trim(); 2 final password = controllerpassword text trim(); 3 4 final user = parseuser(username, password, null); 5 6 var response = await user login(); 7 8 if (response success) { 9 showsuccess("user was successfully login!"); 10 setstate(() { 11 isloggedin = true; 12 }); 13 } else { 14 showerror(response error! message); 15 } 要构建此功能，请按照以下步骤操作： 创建一个新的 parseuser parseuser 类实例，命令为 parseuser(username, password, null); parseuser(username, password, null); ，使用应用中输入的数据。电子邮件字段不是必需的，必须填写为null。 调用 login login 函数，这将会在你的数据库中创建一个 session session ，并将令牌保存到本地存储 检查用户登录是否成功。如果不成功，显示错误描述信息。 完整的函数应如下所示： 1 void douserlogin() async { 2 final username = controllerusername text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser(username, password, null); 6 7 var response = await user login(); 8 9 if (response success) { 10 showsuccess("user was successfully login!"); 11 setstate(() { 12 isloggedin = true; 13 }); 14 } else { 15 showerror(response error! message); 16 } 17 } 要测试它，请点击 android studio/vscode 中的 运行 运行 按钮。 在提供所需的用户凭据后，如果一切顺利，您将在按下登录后看到此消息： 如果您尝试使用无效凭据登录用户，可以测试错误处理 如果您尝试在没有密码的情况下登录，将会出现另一个错误 4 用户注销代码 用户注销功能会删除 会话 会话 对象，该对象是在登录功能中创建的。它将在设备上清除此会话，并注销您在 parse 服务器中链接的任何服务。 搜索文件中的函数 douserlogout douserlogout ，在 main dart main dart 中替换 douserlogout douserlogout 的代码为 1 final user = await parseuser currentuser() as parseuser; 2 var response = await user logout(); 3 4 if (response success) { 5 showsuccess("user was successfully logout!"); 6 setstate(() { 7 isloggedin = false; 8 }); 9 } else { 10 showerror(response error! message); 11 } 要构建此函数，请按照以下步骤操作 使用函数获取当前登录用户 parseuser currentuser() parseuser currentuser() 调用 logout logout 函数以对 parseuser parseuser 对象，这将删除 session session 在您的数据库中并清除本地存储中的令牌 检查用户注销是否成功。如果不成功，显示错误描述信息 完整的代码应如下所示 1 void douserlogout() async { 2 final user = await parseuser currentuser() as parseuser; 3 var response = await user logout(); 4 5 if (response success) { 6 showsuccess("user was successfully logout!"); 7 setstate(() { 8 isloggedin = false; 9 }); 10 } else { 11 showerror(response error! message); 12 } 13 } 要测试它，请单击 android studio/vscode 中的 运行 运行 按钮 在提供所需的用户凭据后，如果一切顺利，您在按下登录后将看到此消息 点击“注销”按钮 完成了! 在本指南的最后，您可以使用 back4app 通过 parse server 核心功能登录和注销您的应用程序的 parse 用户!