JS Framework
Ionic
Регистрация и верификация email в Ionic с Parse Server
10 мин
регистрация пользователя с подтверждением электронной почты введение в этом разделе объясняется, как вы можете создать приложение с регистрацией пользователя и подтверждением электронной почты с помощью основных функций parse server через back4app вот как это будет выглядеть в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем репозитории github предварительные требования чтобы завершить этот быстрый старт, вам нужно visual studio code (или любой веб ide, который вам нравится) ionic framework приложение, созданное на back4app следуйте учебнику по созданию нового parse приложения , чтобы узнать, как создать приложение parse на back4app следовали учебнику по регистрации пользователей , чтобы узнать, как реализовать регистрацию, вход и выход с помощью back4app 1 настройка в этом учебнике мы начнем с того места, где остановились в предыдущем учебнике по регистрации пользователей https //www back4app com/docs/ionic/ionic framework login screen 2 включите проверку электронной почты перейдите в ваше приложение на сайт back4app https //www back4app com/ и нажмите на настройки сервера настройки сервера найдите блок “письма для проверки” и нажмите на настройки настройки блок “письма для проверки” выглядит так 3\ нажмите на проверить электронную почту пользователя проверить электронную почту пользователя это прямо здесь 4\ заполните пустые поля и измените уже заполненные в соответствии с вашими предпочтениями 5\ нажмите на кнопку сохранить сохранить 3 регистрация два основных атрибута класса parseuser parseuser это имя пользователя и пароль существует третий специальный атрибут, который вы также должны установить, т е электронная почта чтобы реализовать регистрацию с подтверждением электронной почты, вы будете использовать тот же метод, что и для базовой регистрации пользователя но на этот раз, вместо того чтобы отправить пользователя на главную страницу, вы попросите его/ее подтвердить свою электронную почту для входа после завершения создания пользователя он автоматически добавляется в parse dashboard dashboard и его emailverified логический атрибут установлен как ложь на этом этапе пользователю не должно быть разрешено входить на вашу платформу как только он/она подтвердит свою электронную почту, кликнув по ссылке, отправленной на его/ее почтовый ящик, логический атрибут emailverified будет автоматически установлен на истина , что позволит ему/ей полностью получить доступ к вашей платформе чтобы сделать signupactivity signupactivity работающим, выполните следующие шаги добавьте переменные issigningup issigningup и email email в login ts login ts для переключения и удержания ввода электронной почты login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; сделайте так, чтобы метод signup() signup() отправлял адрес электронной почты в функцию 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 } теперь давайте отразим эти изменения в представлении login html login html добавив ngif ngif для отображения/скрытия html элементов, когда пользователь регистрируется ( issigningup равно true ) или входит в систему ( issigningup равно 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 вход в систему теперь давайте добавим проверку emailverified булевой переменной перед тем, как отправить пользователя на страницу главная главная примечание хотя пользователь входит в систему, когда вызывается функция parse user login() parse user login() он/она не может получить доступ к приложению, пока не будет выполнена проверка электронной почты также, поскольку объект сессии создается в базе данных при вызове login(), важно вызывать parse user logout() parse user logout() каждый раз, когда пользователь, не подтвердивший свою электронную почту, пытается получить доступ к приложению, чтобы не оставлять открытыми сессии сессии теперь давайте реализуем проверку emailverified для определения, может ли пользователь войти в систему или получить предупреждение о том, что электронная почта должна быть подтверждена 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 протестируйте ваше приложение протестируйте ваше приложение, запустив ionic serve ionic serve , создайте пару пользователей, также попробуйте войти после регистрации без подтверждения электронной почты, чтобы увидеть, отображается ли ошибка войдите на сайт back4app https //www back4app com/ найдите ваше приложение и нажмите на панель управления панель управления > основные основные > браузер браузер > пользователь пользователь чтобы увидеть созданных вами пользователей! готово! на этом этапе вы можете войти, зарегистрироваться или выйти из вашего приложения, используя проверку электронной почты с основными функциями parse server через back4app!