Настройка проверки email для пользователей в React Native

11 мин

проверка электронной почты пользователя для react native введение наличие мобильного приложения с неограниченной регистрацией пользователей может вызвать проблемы с безопасностью и спам на вашем сервере приложения проверка электронной почты может помочь вам предотвратить эту ситуацию, требуя, чтобы любой зарегистрированный пользователь в вашем приложении имел действующий адрес электронной почты в этом руководстве вы узнаете, как настроить проверку электронной почты на вашем \back4app\ сервере, который будет автоматически обрабатывать эту проверку вы также узнаете, как убедиться в вашем приложении, что пользователь действительно проверен в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого руководства, в наших репозиториях на github репозиторий примера на kotlin https //github com/templates back4app/android parse sdk kotlin репозиторий примера на java https //github com/templates back4app/android parse sdk java цель создать функцию входа пользователя с использованием входа через apple на parse для приложения react native предварительные требования чтобы завершить этот учебник, вам потребуется приложение react native, созданное и подключенное к back4app https //www back4app com/docs/react native/parse sdk/react native sdk завершите предыдущие руководства, чтобы лучше понять класс пользователя parse https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 настройка проверки электронной почты теперь вы настроите свой сервер parse на back4app, чтобы требовать проверку электронной почты пользователя откройте свою панель управления back4app https //dashboard back4app com/apps и перейдите в панель управления настройками вашего сервера найдите функцию \проверочные письма\ и нажмите на \настройки\ продолжайте и проверьте \проверить электронные почты пользователей\ и \запретить вход, если электронная почта не подтверждена\ не стесняйтесь обновлять и настраивать любые параметры на этом экране, такие как текст сообщения электронной почты для подтверждения и адрес для ответа после настройки этого, ваш \parse\ сервер теперь будет автоматически обрабатывать подтверждение электронной почты пользователей примечание активация \запретить вход, если электронная почта не подтверждена\ не является обязательной, но это хорошая практика требовать от ваших новых пользователей подтверждения перед выполнением любых действий в вашем приложении 2 обновите ваш компонент userregistration вам нужно внести некоторые изменения в ваш \userregistration\ компонент, чтобы правильно регистрировать пользователей с подтверждением по электронной почте сначала добавьте новое поле ввода для значения электронной почты вашего пользователя обновите функцию регистрации пользователя в файле \userregistration js\ ( \userregistration tsx\ если вы используете typescript), чтобы теперь вы устанавливали атрибут электронной почты в данных пользователя 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 }; обратите внимание, что поскольку ваш пользователь не должен входить в систему без подтверждения своего адреса электронной почты, вам нужно выйти из системы после регистрации, чтобы избежать каких либо ошибок в текущем приложении \сессия\ протестируйте ваше приложение, и теперь вы должны увидеть сообщение вроде этого после регистрации нового пользователя после успешной регистрации вашего нового пользователя parse отправит электронное письмо с ссылкой для подтверждения, которая будет выглядеть так 3 настройте ваш компонент userlogin ваш \parse\ сервер теперь автоматически блокирует попытки входа, которые не исходят от проверенных пользователей тем не менее, также хорошей практикой является убедиться, что у вашего непроверенного пользователя нет доступа к вашему приложению, поэтому давайте добавим новое условие внутри вашего \userlogin\ компонента в файле \userlogin js\ ( \userlogin tsx\ если вы используете typescript) 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 протестируйте проверку электронной почты продолжайте и протестируйте ваше приложение, пытаясь войти в систему, используя неавторизованного пользователя, созданного ранее если вы не нажали на ссылку подтверждения в электронной почте, вы должны получить сообщение об ошибке, подобное этому после нажатия на ссылку для подтверждения вы сможете войти в систему и будете перенаправлены на главный экран вы также можете подтвердить своего пользователя, открыв свою \пользователи\ таблицу в вашей панели управления back4app и вручную отредактировав колонку \emailverified\ заключение в конце этого руководства вы узнали, как настроить ваш \parse\ сервер для обязательного подтверждения электронной почты пользователя и также для обеспечения этого ограничения внутри вашего приложения react native в следующем руководстве мы покажем вам, как выполнять полезные запросы пользователей