JS Framework
Ionic
Регистрация и верификация email в Ionic с Parse Server
10 мин
регистрация пользователя с подтверждением электронной почты введение в этом разделе объясняется, как вы можете создать приложение с регистрацией пользователя и подтверждением электронной почты с помощью https //www back4app com/product/parse server через back4app вот как это будет выглядеть в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем https //github com/back4app/ionic email verification предварительные требования чтобы завершить этот быстрый старт, вам нужно https //code visualstudio com/download (или любой веб ide, который вам нравится) https //ionicframework com/getting started/ приложение, созданное на back4app следуйте 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 включите проверку электронной почты перейдите в ваше приложение на 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 , создайте пару пользователей, также попробуйте войти после регистрации без подтверждения электронной почты, чтобы увидеть, отображается ли ошибка войдите на https //www back4app com/ найдите ваше приложение и нажмите на панель управления панель управления > основные основные > браузер браузер > пользователь пользователь чтобы увидеть созданных вами пользователей! готово! на этом этапе вы можете войти, зарегистрироваться или выйти из вашего приложения, используя проверку электронной почты с основными функциями parse server через back4app!