Implementação Técnica de Verificação de E-mail em React Native

verificação de e mail do usuário para react native introdução ter um aplicativo móvel com registro de usuário irrestrito pode causar problemas de segurança e spam em seu servidor de aplicativo a verificação de e mail pode ajudá lo a prevenir essa situação, exigindo que qualquer usuário registrado em seu aplicativo tenha um endereço de e mail válido neste guia, você aprenderá como configurar a verificação de e mail em seu \<font color="#2166ae">back4app\</font> servidor, que lidará automaticamente com essa verificação você também aprenderá como garantir em seu aplicativo que o usuário está realmente verificado a qualquer momento, você pode acessar o projeto android completo construído com este tutorial em nossos repositórios do github repositório de exemplo em kotlin https //github com/templates back4app/android parse sdk kotlin repositório de exemplo em java https //github com/templates back4app/android parse sdk java objetivo construir um recurso de login de usuário usando o apple sign in no parse para um aplicativo react native pré requisitos para completar este tutorial, você precisará um aplicativo react native criado e conectado ao back4app https //www back4app com/docs/react native/parse sdk/react native sdk complete os guias anteriores para que você possa ter uma melhor compreensão de a classe parse user https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 configurar verificação de email agora você irá configurar seu parse server no back4app para exigir verificação de email do usuário abra seu painel do back4app https //dashboard back4app com/apps e navegue até o painel de controle das configurações do seu servidor encontre a \<font color="#2166ae">verificação de emails\</font> e clique em \<font color="#2166ae">configurações\</font> vá em frente e verifique os \<font color="#2166ae">verificar e mails de usuário\</font> e \<font color="#2166ae">impedir login se o e mail não estiver verificado\</font> sinta se à vontade para atualizar e personalizar qualquer configuração nesta tela, como o corpo da mensagem do e mail de verificação e o endereço de resposta após configurar isso, sua \<font color="#2166ae">parse\</font> a instância do servidor agora lidará automaticamente com a verificação de e mail do usuário nota ativar \<font color="#2166ae">impedir login se o e mail não estiver verificado\</font> não é obrigatório, mas é uma boa prática exigir que seus novos usuários verifiquem antes de realizar qualquer ação em seu aplicativo 2 atualize seu componente userregistration você precisa fazer algumas alterações no seu \<font color="#2166ae">userregistration\</font> componente para registrar usuários corretamente com verificação de e mail primeiro, adicione um novo campo de entrada para o valor do e mail do seu usuário atualize a função de registro de usuário no \<font color="#2166ae">userregistration js\</font> ( \<font color="#2166ae">userregistration tsx\</font> se você estiver usando typescript) para que agora você esteja definindo o atributo de e mail nos dados do usuário userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; observe que, como seu usuário não deve fazer login sem verificar seu e mail, você precisa desconectá lo após o registro para evitar quaisquer erros na aplicação atual \<font color="#2166ae">sessão\</font> teste sua aplicação e agora você deve ver uma mensagem como esta após registrar um novo usuário após registrar com sucesso seu novo usuário, o parse enviará um e mail contendo um link de verificação, parecido com este 3 configure seu componente userlogin seu \<font color="#2166ae">parse\</font> servidor agora está bloqueando automaticamente tentativas de login que não são de usuários verificados no entanto, também é uma boa prática garantir que não haja como seu usuário não verificado acessar sua aplicação, então vamos adicionar uma nova condição dentro do seu \<font color="#2166ae">userlogin\</font> componente no \<font color="#2166ae">userlogin js\</font> ( \<font color="#2166ae">userlogin tsx\</font> se você estiver usando typescript) arquivo userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 teste a verificação de e mail vá em frente e teste seu aplicativo, tentando fazer login usando o usuário não autorizado criado antes se você não clicou no link de verificação no e mail, deve receber uma mensagem de erro como esta após clicar no link de verificação, você poderá fazer login e será redirecionado para a sua tela inicial você também pode verificar seu usuário abrindo sua \<font color="#2166ae">usuários\</font> tabela dentro do seu painel do back4app e editando a \<font color="#2166ae">emailverificado\</font> coluna manualmente conclusão no final deste guia, você aprendeu como configurar seu \<font color="#2166ae">parse\</font> servidor para exigir verificação de e mail do usuário e também para impor essa restrição dentro da sua aplicação react native no próximo guia, mostraremos como realizar consultas úteis de usuários