Configura la verificación de email en Parse para React Native

verificación de correo electrónico del usuario para react native introducción tener una aplicación móvil con registro de usuarios sin restricciones puede causar problemas de seguridad y spam en el servidor de tu aplicación la verificación de correo electrónico puede ayudarte a prevenir esta situación, exigiendo que cualquier usuario registrado en tu aplicación tenga una dirección de correo electrónico válida en esta guía, aprenderás cómo configurar la verificación de correo electrónico en tu back4app back4app servidor, que manejará automáticamente esta verificación también aprenderás cómo asegurarte en tu aplicación de que el usuario esté efectivamente verificado en cualquier momento, puedes acceder al proyecto android completo construido con este tutorial en nuestros repositorios de github repositorio de ejemplo en kotlin repositorio de ejemplo en java objetivo construir una función de inicio de sesión de usuario utilizando el inicio de sesión de apple en parse para una aplicación react native requisitos previos para completar este tutorial, necesitarás una aplicación de react native creada y conectada a back4app completa las guías anteriores para que puedas tener una mejor comprensión de la clase de usuario de parse 1 configurar la verificación de correo electrónico ahora configurarás tu servidor parse en back4app para requerir la verificación del correo electrónico del usuario abre tu panel de control de back4app https //dashboard back4app com/apps y navega a tu panel de control de configuración del servidor encuentra la verificación de correos electrónicos verificación de correos electrónicos y haz clic en configuración configuración adelante, verifica los verificar correos electrónicos de usuarios verificar correos electrónicos de usuarios y prevenir el inicio de sesión si el correo electrónico no está verificado prevenir el inicio de sesión si el correo electrónico no está verificado casillas de verificación siéntete libre de actualizar y personalizar cualquier configuración en esta pantalla, como el cuerpo del mensaje del correo electrónico de verificación y la dirección de respuesta después de configurar esto, tu parse parse instancia de servidor ahora manejará la verificación de correos electrónicos de usuarios automáticamente nota activar prevenir el inicio de sesión si el correo electrónico no está verificado prevenir el inicio de sesión si el correo electrónico no está verificado no es obligatorio, pero es una buena práctica requerir que tus nuevos usuarios verifiquen antes de realizar cualquier acción en tu aplicación 2 actualiza tu componente userregistration necesitas hacer algunos cambios en tu userregistration userregistration componente para registrar correctamente a los usuarios con verificación de correo electrónico primero, agrega un nuevo campo de entrada para el valor del correo electrónico de tu usuario actualiza la función de registro de usuario en el userregistration js userregistration js ( userregistration tsx userregistration tsx si estás usando typescript) archivo para que ahora estés configurando el atributo de correo electrónico en los datos del usuario 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 }; tenga en cuenta que dado que su usuario no debe iniciar sesión sin verificar su correo electrónico, necesita cerrar sesión después del registro para evitar cualquier error en la aplicación actual sesión sesión pruebe su aplicación y ahora debería ver un mensaje como este después de registrar un nuevo usuario después de registrar exitosamente a su nuevo usuario, parse enviará un correo electrónico que contiene un enlace de verificación, que se verá así 3 configura tu componente userlogin tu parse parse el servidor ahora está bloqueando automáticamente los intentos de inicio de sesión que no son de usuarios verificados sin embargo, también es una buena práctica asegurarse de que no haya forma de que tu usuario no verificado acceda a tu aplicación, así que agreguemos una nueva condición dentro de tu userlogin userlogin componente en el userlogin js userlogin js ( userlogin tsx userlogin tsx si estás usando typescript) archivo 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 prueba la verificación de correo electrónico adelante y prueba tu aplicación, intentando iniciar sesión usando el usuario no autorizado creado antes si no hiciste clic en el enlace de verificación en el correo electrónico, deberías recibir un mensaje de error como este después de hacer clic en el enlace de verificación, podrás iniciar sesión y ser redirigido a tu pantalla de inicio también puedes verificar tu usuario abriendo tu usuarios usuarios tabla dentro de tu panel de control de back4app y editando la emailverificado emailverificado columna manualmente conclusión al final de esta guía, aprendiste cómo configurar tu parse parse servidor para requerir la verificación del correo electrónico del usuario y también para hacer cumplir esta restricción dentro de tu aplicación de react native en la próxima guía, te mostraremos cómo realizar consultas útiles de usuarios