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

как добавить экран входа в ваш проект на ionic framework введение в этом разделе вы узнаете, как создать страницу, реализовать регистрацию, вход и выход из вашего приложения ionic вот как это будет выглядеть предварительные условия чтобы завершить этот быстрый старт, вам нужно visual studio code (или любой веб ide, который вам нравится) ionic framework приложение, созданное на back4app следуйте учебнику по созданию нового приложения parse чтобы узнать, как создать приложение parse на back4app в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем репозитории github 1 установите parse sdk если у вас уже есть проект ionic, первое, что вам нужно сделать, это установить parse sdk вы можете сделать это, выполнив 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 начать с шаблона 3 создайте страницу входа теперь давайте создадим нашу страницу входа к счастью, ionic делает все за нас все, что нам нужно сделать, это выполнить следующую команду на этом экране мы должны добавить поля для имя пользователя имя пользователя и пароль пароль и две кнопки одна для регистрации и другая для входа 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() на документация parse 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() на документация parse вот как это должно выглядеть 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() на документация parse это должно выглядеть так 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() на документация parse наконец, все настроено! на этом этапе просто запустите ionic serve ionic serve и у вас будут работать функции входа, регистрации и выхода, которые также запоминают вошедшего пользователя, пока он/она не выйдет