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

как добавить экран входа в ваш проект на ionic framework введение в этом разделе вы узнаете, как создать страницу, реализовать регистрацию, вход и выход из вашего приложения ionic вот как это будет выглядеть предварительные условия чтобы завершить этот быстрый старт, вам нужно 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 в любое время вы можете получить доступ к полному проекту ionic, созданному с помощью этого учебника, в нашем репозитории github https //github com/back4app/ionic email verification 1 установите parse sdk если у вас уже есть проект ionic, первое, что вам нужно сделать, это установить parse sdk вы можете сделать это, выполнив $ npm install parse 2 настройте учетные данные приложения откройте ваш \<font color="#2166ae">app component ts\</font> , импортируйте \<font color="#2166ae">parse\</font> и инициализируйте его соединение с сервером 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 на этом экране мы должны добавить поля для \<font color="#2166ae">имя пользователя\</font> и \<font color="#2166ae">пароль\</font> и две кнопки одна для регистрации и другая для входа 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 теперь давайте реализуем методы \<font color="#2166ae">signin()\</font> и \<font color="#2166ae">signup()\</font> упомянутые в нашем \<font color="#2166ae">вход\</font> представлении 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 } узнайте больше о \<font color="#2166ae">signup()\</font> на документация parse 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 } узнайте больше о \<font color="#2166ae">parse user login()\</font> на документация parse 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 теперь давайте реализуем метод \<font color="#2166ae">logout()\</font> и также добавим компонент \<font color="#2166ae">toast\</font> на случай, если запрос не удался 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 } узнайте больше о \<font color="#2166ae">parse user logout()\</font> на документация parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup это должно выглядеть так 5 установите корневую страницу важной особенностью \<font color="#2166ae">parse\</font> является то, что он запоминает, вошел ли пользователь в систему на устройстве это означает, что даже если пользователь закроет приложение, вы все равно можете восстановить его сессию, когда приложение открыто с этим мы можем определить, будет ли начальная страница приложения нашей \<font color="#2166ae">loginpage\</font> или \<font color="#2166ae">homepage\</font> для этого нам просто нужно вызвать \<font color="#2166ae">currentasync()\</font> это вернет пользователя, вошедшего в систему, или \<font color="#2166ae">null\</font> 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 }) узнайте больше о \<font color="#2166ae">parse user currentasync()\</font> на документация parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup наконец, все настроено! на этом этапе просто запустите \<font color="#2166ae">ionic serve\</font> и у вас будут работать функции входа, регистрации и выхода, которые также запоминают вошедшего пользователя, пока он/она не выйдет