Implementando Autenticação no Ionic com Back4App

como adicionar uma tela de login ao seu projeto do ionic framework introdução nesta seção, você aprenderá como criar uma página, implementar cadastro, login e logout em seu aplicativo ionic assim é como ficará pré requisitos para completar este guia rápido, você precisa visual studio code (ou qualquer ide web que você preferir) ionic framework um aplicativo criado no back4app siga o tutorial de novo aplicativo parse para aprender como criar um aplicativo parse no back4app a qualquer momento, você pode acessar o projeto ionic completo construído com este tutorial em nosso repositório do github 1 instalar o sdk do parse considerando que você tem um projeto ionic existente, a primeira coisa que você precisa fazer é instalar o sdk do parse você pode fazer isso executando 2 configurar as credenciais do aplicativo abra seu app component ts app component ts , importe parse parse e inicialize sua conexão com o servidor back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; se você não souber como encontrar suas chaves, confira o primeiro tutorial ionic comece a partir do template 3 criar a página de login agora, vamos criar nossa página de login felizmente, o ionic faz tudo para nós tudo o que precisamos fazer é executar o seguinte comando nesta visualização da página, precisamos adicionar campos para nome de usuário nome de usuário e senha senha e dois botões, um para se inscrever e outro para entrar login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 vamos implementar agora os métodos signin() signin() e signup() signup() mencionados em nossa login login visualização login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } saiba mais sobre signup() signup() em documentação do parse login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } saiba mais sobre parse user login() parse user login() em documentação do parse é assim que deve parecer 4 implementar logout vamos para a nossa homepage (ou a página para a qual o usuário será direcionado após fazer login) e implementar a saída primeiro, abra home html e adicione um botão para fazer isso login html 1 you are logged in! 2 3 4 5 log out 6 7 agora, vamos implementar o logout() logout() método e também adicionar um toast toast componente se a solicitação falhar home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } saiba mais sobre parse user logout() parse user logout() em documentação do parse deve parecer assim 5 definir página raiz uma característica importante do parse parse é que ele lembra se um usuário está logado ou não em um dispositivo isso significa que mesmo que o usuário feche o aplicativo, você ainda pode restaurar sua sessão quando o aplicativo estiver aberto com isso, podemos determinar se a página inicial do aplicativo será nossa loginpage loginpage ou homepage homepage para fazer isso, só precisamos chamar currentasync() currentasync() ele retornará o usuário logado ou null null app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) saiba mais sobre parse user currentasync() parse user currentasync() em documentação do parse finalmente, tudo está configurado! neste ponto, basta executar ionic serve ionic serve e você terá funcionalidades de login, cadastro e logout funcionando, que também lembram o usuário logado até que ele/ela faça logout