Аутентификация пользователей в Flutter с сервером Parse

15 мин

вход и выход пользователя для flutter с использованием parse server введение после реализации регистрации пользователя для flutter на parse в последнем руководстве вы узнаете, как входить и выходить из системы, используя тот же класс parseuser после регистрации операция входа выполняется автоматически, и создается новая сессия пользователя операция выхода удаляет активный объект сессии для вошедшего пользователя в этом руководстве вы узнаете, как использовать плагин flutter для parse server для выполнения входа/выхода с использованием класса parseuser для вашего приложения flutter цель создать функцию входа/выхода пользователя с использованием parse для приложения flutter предварительные требования чтобы завершить этот учебник, вам потребуется версия 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) приложение создано https //www back4app com/docs/get started/new parse app на back4app примечание следуйте учебнику по созданию нового parse app https //www back4app com/docs/get started/new parse app чтобы узнать, как создать parse app на back4app flutter приложение, подключенное к back4app примечание следуйте установите parse sdk в проект flutter https //www back4app com/docs/flutter/parse sdk/parse flutter sdk чтобы создать проект flutter, подключенный к back4app завершите предыдущий гид, чтобы лучше понять класс \parseuser\ устройство (или виртуальное устройство), работающее на android или ios понимание приложения для входа/выхода чтобы лучше понять процесс входа/выхода, мы создадим приложение для входа и выхода пользователя из вашей учетной записи мы не будем объяснять код приложения flutter, так как основное внимание в этом руководстве уделяется использованию flutter с parse следуя следующим шагам, вы создадите приложение для входа и выхода в базе данных back4app давайте начнем! в следующих шагах вы сможете создать приложение для входа/выхода 1 создайте шаблон приложения для входа/выхода откройте ваш проект flutter из предыдущего руководства flutter plugin for parse server перейдите к файлу \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 когда \отладка\ параметр в функции \parse() initialize\ равен \истина\ , это позволяет отображать вызовы parse api в консоли эта конфигурация может помочь в отладке кода рекомендуется отключить отладку в релизной версии 2 подключите шаблон к проекту back4app найдите свои учетные данные application id и client key, перейдя на панель управления вашего приложения по адресу сайт back4app https //www back4app com/ обновите свой код в \main dart\ с значениями applicationid и clientkey вашего проекта в back4app keyapplicationid = app id keyclientkey = client key запустите проект, и приложение загрузится, как показано на изображении 3 код для входа пользователя функция входа пользователя создает \сессию\ объект, который указывает на \пользователя\ вошедшего в систему и сохраняет в вашем локальном хранилище действительную сессию пользователя будущие вызовы методов, таких как \currentuser\ успешно получат ваши \данные пользователя\ и \sessiontoken\ для \сессии\ объекта, который был создан в \панели управления\ ищите функцию \douserlogin\ в файле \main dart\ замените код внутри \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(username, password, null);\ с использованием данных, введенных в приложении поле электронной почты не обязательно и должно быть указано как null вызовите функцию \login\ , которая создаст \session\ в вашей базе данных в parse dashboard и сохранит токен в локальном хранилище проверьте, был ли успешным вход пользователя если вход не удался, отобразите сообщение с описанием ошибки полная функция должна выглядеть так 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\ в файле \main dart\ замените код внутри \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()\ вызовите функцию \logout\ для объекта \parseuser\ , которая удалит \сессию\ в вашей базе данных и очистит токен в локальном хранилище проверьте, был ли выход пользователя успешным если это не так, покажите сообщение об ошибке полный код должен выглядеть так 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 после ввода желаемых учетных данных пользователя вы увидите это сообщение после нажатия на войти, если все прошло успешно нажмите кнопку “выйти” готово! в конце этого руководства вы сможете войти и выйти из учетных записей пользователей parse вашего приложения, используя основные функции parse server через back4app!