Регистрация и верификация email в Ionic с Parse Server

10 мин

регистрация пользователя с подтверждением электронной почты введение в этом разделе объясняется, как вы можете создать приложение с регистрацией пользователя и подтверждением электронной почты с помощью основных функций parse server https //www back4app com/product/parse server через back4app вот как это будет выглядеть в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем репозитории github https //github com/back4app/ionic email verification предварительные требования чтобы завершить этот быстрый старт, вам нужно visual studio code https //code visualstudio com/download (или любой веб ide, который вам нравится) ionic framework https //ionicframework com/getting started/ приложение, созданное на back4app следуйте учебнику по созданию нового parse приложения https //www back4app com/docs/get started/new parse app , чтобы узнать, как создать приложение parse на back4app следовали учебнику по регистрации пользователей https //www back4app com/docs/js framework/ionic/ionic framework login , чтобы узнать, как реализовать регистрацию, вход и выход с помощью back4app 1 настройка в этом учебнике мы начнем с того места, где остановились в предыдущем учебнике по регистрации пользователей https //www back4app com/docs/ionic/ionic framework login screen 2 включите проверку электронной почты перейдите в ваше приложение на сайт back4app https //www back4app com/ и нажмите на \настройки сервера\ найдите блок “письма для проверки” и нажмите на \настройки\ блок “письма для проверки” выглядит так 3\ нажмите на \проверить электронную почту пользователя\ это прямо здесь 4\ заполните пустые поля и измените уже заполненные в соответствии с вашими предпочтениями 5\ нажмите на кнопку \сохранить\ 3 регистрация два основных атрибута класса \parseuser\ это имя пользователя и пароль существует третий специальный атрибут, который вы также должны установить, т е электронная почта чтобы реализовать регистрацию с подтверждением электронной почты, вы будете использовать тот же метод, что и для базовой регистрации пользователя но на этот раз, вместо того чтобы отправить пользователя на главную страницу, вы попросите его/ее подтвердить свою электронную почту для входа после завершения создания пользователя он автоматически добавляется в parse \dashboard\ и его emailverified логический атрибут установлен как ложь на этом этапе пользователю не должно быть разрешено входить на вашу платформу как только он/она подтвердит свою электронную почту, кликнув по ссылке, отправленной на его/ее почтовый ящик, логический атрибут emailverified будет автоматически установлен на истина , что позволит ему/ей полностью получить доступ к вашей платформе чтобы сделать \signupactivity\ работающим, выполните следующие шаги добавьте переменные \issigningup\ и \email\ в \login ts\ для переключения и удержания ввода электронной почты login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; сделайте так, чтобы метод \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 \ добавив \ 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()\ он/она не может получить доступ к приложению, пока не будет выполнена проверка электронной почты также, поскольку объект сессии создается в базе данных при вызове login(), важно вызывать \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\ , создайте пару пользователей, также попробуйте войти после регистрации без подтверждения электронной почты, чтобы увидеть, отображается ли ошибка войдите на сайт back4app https //www back4app com/ найдите ваше приложение и нажмите на \панель управления\ > \основные\ > \браузер\ > \пользователь\ чтобы увидеть созданных вами пользователей! готово! на этом этапе вы можете войти, зарегистрироваться или выйти из вашего приложения, используя проверку электронной почты с основными функциями parse server через back4app!