JS Framework
Ionic
Ionic e Back4App: Registro de Email com Verificação Completa
10 min
registro de usuário com verificação de email introdução esta seção explica como você pode criar um aplicativo com registro de usuário e verificação de email usando recursos principais do parse server através do back4app assim é como ficará a qualquer momento, você pode acessar o projeto ionic completo construído com este tutorial em nosso repositório do github pré requisitos para completar este início 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 seguiu o tutorial de registro de usuário para aprender como implementar cadastro, login e logout com back4app 1 configuração neste tutorial, começaremos de onde paramos no anterior registro de usuário https //www back4app com/docs/ionic/ionic framework login screen 2 ativar verificação de email vá para seu app em site do back4app https //www back4app com/ e clique em configurações do servidor configurações do servidor encontre o bloco “emails de verificação” e clique em configurações configurações o bloco “emails de verificação” se parece com isso 3\ clique em verificar email do usuário verificar email do usuário está bem aqui 4\ preencha os campos vazios e modifique os que já foram preenchidos de acordo com suas preferências 5\ clique no botão salvar salvar 3 inscrever se os dois atributos fundamentais da parseuser parseuser classe são nome de usuário e senha há um terceiro atributo especial que você também deve definir, ou seja, o email para implementar o cadastro com verificação de email, você usará o mesmo método que o registro básico de usuário mas desta vez, em vez de enviar o usuário para a página inicial, você pedirá que ele/ela verifique seu email para fazer login uma vez que a criação do usuário é concluída, ele é automaticamente adicionado ao parse dashboard dashboard e seu atributo boolean emailverified é definido como falso neste ponto, o usuário não deve ser permitido fazer login em sua plataforma uma vez que ele/ela verifica seu e mail, clicando no link enviado para sua caixa de entrada, o booleano emailverified será automaticamente definido como verdadeiro , permitindo que ele/ela acesse sua plataforma completamente para fazer signupactivity signupactivity funcionar, siga estas etapas adicione as issigningup issigningup e email email variáveis para login ts login ts para alternar e manter a entrada de e mail login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; faça o signup() signup() método enviar o endereço de e mail para a função user signup() user signup() login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } agora, vamos refletir essas mudanças na visualização login html login html adicionando ngif ngif para mostrar/ocultar elementos html sempre que o usuário estiver se inscrevendo ( issigningup é igual a true ) ou fazendo login ( issigningup é igual a false ) login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 fazer login agora, vamos adicionar a emailverified verificação booleana antes de enviar o usuário para a página inicial página inicial nota embora o usuário faça login quando a função parse user login() parse user login() é chamada, ele/ela não pode acessar o aplicativo até que a verificação de e mail seja concluída além disso, como um objeto de sessão é criado no banco de dados ao chamar login(), é importante chamar parse user logout() parse user logout() toda vez que um usuário que não verificou seu e mail tenta acessar a aplicação, a fim de não deixar sessões sessões abertas agora, vamos implementar a emailverified verificação para decidir se o usuário faz login ou recebe um alerta dizendo que o e mail deve ser verificado login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 teste seu aplicativo teste seu aplicativo executando ionic serve ionic serve e criando alguns usuários, também tente fazer login após se registrar sem verificar o e mail para ver se o erro é realmente exibido faça login em site do back4app https //www back4app com/ encontre seu aplicativo e clique em painel painel > núcleo núcleo > navegador navegador > usuário usuário para ver os usuários que você criou! está feito! nesta fase, você pode fazer login, registrar ou sair do seu aplicativo usando verificação de e mail com os recursos principais do parse server através do back4app!