Создание экрана входа с помощью Ionic и Back4App

как добавить экран входа в ваш проект на ionic framework введение в этом разделе вы узнаете, как создать страницу, реализовать регистрацию, вход и выход из вашего приложения ionic вот как это будет выглядеть предварительные условия чтобы завершить этот быстрый старт, вам нужно https //code visualstudio com/download (или любой веб ide, который вам нравится) https //ionicframework com/getting started/ приложение, созданное на back4app следуйте https //www back4app com/docs/get started/new parse app чтобы узнать, как создать приложение parse на back4app в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем https //github com/back4app/ionic email verification 1 установите parse sdk если у вас уже есть проект ionic, первое, что вам нужно сделать, это установить parse sdk вы можете сделать это, выполнив $ npm install parse 2 настройте учетные данные приложения откройте ваш app component ts app component ts , импортируйте parse parse и инициализируйте его соединение с сервером back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; если вы не знаете, как найти свои ключи, посмотрите первый учебник по ionic https //www back4app com/docs/js framework/ionic/ionic template#setup 3 создайте страницу входа теперь давайте создадим нашу страницу входа к счастью, ionic делает все за нас все, что нам нужно сделать, это выполнить следующую команду $ ionic generate page login на этом экране мы должны добавить поля для имя пользователя имя пользователя и пароль пароль и две кнопки одна для регистрации и другая для входа login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 теперь давайте реализуем методы signin() signin() и signup() signup() упомянутые в нашем вход вход представлении login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } узнайте больше о signup() signup() на https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } узнайте больше о parse user login() parse user login() на https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup вот как это должно выглядеть 4 реализовать выход давайте перейдем к нашей главной странице (или странице, на которую пользователь будет перенаправлен после входа) и реализуем выход из системы сначала откройте home html и добавьте кнопку для этого login html 1 you are logged in! 2 3 4 5 log out 6 7 теперь давайте реализуем метод logout() logout() и также добавим компонент toast toast на случай, если запрос не удался home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } узнайте больше о parse user logout() parse user logout() на https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup это должно выглядеть так 5 установите корневую страницу важной особенностью parse parse является то, что он запоминает, вошел ли пользователь в систему на устройстве это означает, что даже если пользователь закроет приложение, вы все равно можете восстановить его сессию, когда приложение открыто с этим мы можем определить, будет ли начальная страница приложения нашей loginpage loginpage или homepage homepage для этого нам просто нужно вызвать currentasync() currentasync() это вернет пользователя, вошедшего в систему, или null null app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) узнайте больше о parse user currentasync() parse user currentasync() на https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup наконец, все настроено! на этом этапе просто запустите ionic serve ionic serve и у вас будут работать функции входа, регистрации и выхода, которые также запоминают вошедшего пользователя, пока он/она не выйдет