Добавление Facebook-входа в Android приложение Ionic

11 мин

как добавить вход через facebook в ваше ionic приложение введение в этом разделе объясняется, как вы можете создать приложение с регистрацией пользователей с использованием входа через facebook и основными функциями 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 аккаунт facebook https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f для создания приложения 1 настройка facebook чтобы начать использовать функции facebook, вам нужно перейдите на сайт разработчиков facebook https //developers facebook com/ и создайте учетную запись и войдите в систему перейдите в мои приложения https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f и нажмите на \добавить новое приложение\ в левой панели нажмите на \настройки\ > \основные\ на этой странице запишите ваш \id приложения\ добавьте \url политики конфиденциальности\ выберите \категорию\ прокрутите вниз и нажмите \сохранить изменения\ 4\ в верхней части той же страницы нажмите на \выкл\ кнопку и подтвердить чтобы сделать ваше приложение активным 5\ прокрутите вниз на той же странице и нажмите на \добавить платформу\ для этого руководства давайте выберем android добавьте ваш \google play package name\ который в нашем случае равен com back4app myapp добавьте \key hashes\ вашего компьютера (выполните \keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\ чтобы узнать свои) \сохранить изменения\ 6\ в левой панели вернитесь к \панели управления\ , прокрутите вниз и нажмите на \facebook login\ 2 свяжите ваше приложение facebook с back4app перейдите на панель управления вашего приложения по адресу сайт back4app https //www back4app com/ и нажмите на \настройки сервера\ найдите блок “facebook login” и нажмите на \настройки\ блок “facebook login” выглядит так 3\ добавьте \id приложения\ facebook, который вы записали на предыдущем шаге 3 настройка в этом руководстве мы начнем с того места, где остановились в предыдущем регистрация пользователя с подтверждением по электронной почте https //www back4app com/docs/ionic/user registration email verification 4 вход через facebook сначала установим плагины cordova для facebook $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook теперь давайте реализуем метод \facebooklogin()\ login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } наконец, давайте добавим кнопку на нашу \login\ страницу и сделаем так, чтобы она вызывала метод, который мы только что создали login html 1 2 3 log in with facebook 4 5 5 протестируйте ваше приложение поскольку вход в facebook не работает в браузере, протестируйте ваше приложение, запустив \ionic cordova run android\ войдите на сайт back4app https //www back4app com/ найдите ваше приложение и нажмите на \панель управления\ > \основные\ > \браузер\ > \пользователь\ чтобы увидеть созданного вами пользователя! готово! на этом этапе вы можете войти, зарегистрироваться и выйти из вашего приложения с помощью facebook, используя основные функции parse server через back4app!