Autenticação de Usuário em Flutter com Parse Server

login e logout de usuário para flutter usando parse server introdução após implementar o registro de usuário para flutter no parse no último guia, você aprenderá como fazer login e logout de usuários usando a mesma classe parseuser após um cadastro, a operação de login é realizada automaticamente, e uma nova sessão de usuário é criada a operação de logout exclui o objeto de sessão ativo para o usuário logado neste guia, você aprenderá como usar o plugin flutter para parse server para realizar login/logout usando a classe parseuser para seu app flutter objetivo construir uma funcionalidade de login/logout de usuário usando parse para um app flutter pré requisitos para completar este tutorial, você precisará flutter versão 2 2 x ou posterior https //flutter dev/docs/get started/install android studio https //developer android com/studio ou vs code instalado (com plugins dart e flutter) um app criado no back4app nota siga o tutorial de novo app parse para aprender como criar um app parse no back4app um app flutter conectado ao back4app nota siga o instale o sdk parse no projeto flutter para criar um projeto flutter conectado ao back4app complete o guia anterior para que você possa ter uma melhor compreensão da classe parseuser classe parseuser um dispositivo (ou dispositivo virtual) executando android ou ios entendendo o app de login/logout para entender melhor o processo de login/sair, criaremos um aplicativo para fazer login e logout do usuário em sua conta não explicaremos o código do aplicativo flutter, uma vez que o foco principal deste guia é usar o flutter com o parse seguindo os próximos passos, você construirá um aplicativo de login e logout no banco de dados back4app vamos começar! nos passos seguintes, você poderá construir um aplicativo de login/sair 1 crie o template do aplicativo de login/sair abra seu projeto flutter do guia anterior flutter plugin for parse server vá para o main dart main dart arquivo, limpe todo o código e substitua o por 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 quando debug debug o parâmetro na função parse() initialize parse() initialize é true true , permite exibir chamadas da api parse no console esta configuração pode ajudar na depuração do código é aconselhável desativar o debug na versão de lançamento 2 conectar o template ao projeto back4app encontre seu id de aplicação e credenciais de chave do cliente navegando até o painel do seu aplicativo em site do back4app https //www back4app com/ atualize seu código em main dart main dart com os valores de applicationid e clientkey do seu projeto no back4app keyapplicationid = id do app keyclientkey = chave do cliente execute o projeto e o aplicativo será carregado conforme mostrado na imagem 3 código para login do usuário a função de login do usuário cria um sessão sessão objeto, que aponta para o usuário usuário logado e armazena em seu armazenamento local uma sessão de usuário válida chamadas futuras para métodos como currentuser currentuser irão recuperar com sucesso seus dados de usuário usuário e sessiontoken sessiontoken para o sessão sessão objeto que foi criado no painel painel procure pela função douserlogin douserlogin no arquivo main dart main dart substitua o código dentro de douserlogin douserlogin por 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 } para construir esta função, siga estes passos crie uma nova parseuser parseuser instância da classe com o comando parseuser(username, password, null); parseuser(username, password, null); usando os dados inseridos no aplicativo o campo de e mail não é necessário e deve ser informado como nulo chame a login login função, que criará uma sessão sessão em seu banco de dados no parse dashboard e salvará o token no armazenamento local verifique se o login do usuário foi bem sucedido se não foi bem sucedido, mostre a mensagem de descrição do erro a função completa deve parecer com isso 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 } para testá lo, clique no botão executar executar no android studio/vscode após fornecer as credenciais do usuário desejado, você verá esta mensagem após pressionar em login se tudo foi bem sucedido o tratamento de erros pode ser testado se você tentar fazer login de um usuário com credenciais inválidas você receberá outro erro se tentar fazer login sem senha 4 código para logout do usuário a função de logout do usuário exclui o sessão sessão objeto, que foi criado na função de login isso limpará esta sessão no dispositivo e desconectará de quaisquer serviços vinculados no seu servidor parse procure pela função douserlogout douserlogout no arquivo main dart main dart substitua o código dentro de douserlogout douserlogout por 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 } para construir esta função, siga estas etapas obtenha o usuário logado atual usando a função parseuser currentuser() parseuser currentuser() chame a logout logout função para o parseuser parseuser objeto, que irá deletar session session no seu banco de dados e limpar o token no armazenamento local verifique se a desconexão do usuário foi bem sucedida se não foi bem sucedida, mostre a mensagem de descrição do erro o código completo deve ser assim 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 } para testá lo, clique no botão executar executar no android studio/vscode após fornecer as credenciais de usuário desejadas, você verá esta mensagem após pressionar em login se tudo foi bem sucedido clique no botão “logout” está feito! no final deste guia, você pode fazer login e logout de usuários parse do seu aplicativo usando os recursos principais do parse server através do back4app!