JS Framework
Ionic
Добавление Facebook-входа в Android приложение Ionic
11 мин
как добавить вход через facebook в ваше ionic приложение введение в этом разделе объясняется, как вы можете создать приложение с регистрацией пользователей с использованием входа через facebook и 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 facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f для создания приложения 1 настройка facebook чтобы начать использовать функции facebook, вам нужно перейдите на https //developers facebook com/ и создайте учетную запись и войдите в систему перейдите в https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f и нажмите на добавить новое приложение добавить новое приложение в левой панели нажмите на настройки настройки > основные основные на этой странице запишите ваш id приложения id приложения добавьте url политики конфиденциальности url политики конфиденциальности выберите категорию категорию прокрутите вниз и нажмите сохранить изменения сохранить изменения 4\ в верхней части той же страницы нажмите на выкл выкл кнопку и подтвердить чтобы сделать ваше приложение активным 5\ прокрутите вниз на той же странице и нажмите на добавить платформу добавить платформу для этого руководства давайте выберем android добавьте ваш google play package name google play package name который в нашем случае равен com back4app myapp добавьте key hashes key hashes вашего компьютера (выполните keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 чтобы узнать свои) сохранить изменения сохранить изменения 6\ в левой панели вернитесь к панели управления панели управления , прокрутите вниз и нажмите на facebook login facebook login 2 свяжите ваше приложение facebook с back4app перейдите на панель управления вашего приложения по адресу https //www back4app com/ и нажмите на настройки сервера настройки сервера найдите блок “facebook login” и нажмите на настройки настройки блок “facebook login” выглядит так 3\ добавьте id приложения 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() 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 страницу и сделаем так, чтобы она вызывала метод, который мы только что создали login html 1 2 3 log in with facebook 4 5 5 протестируйте ваше приложение поскольку вход в facebook не работает в браузере, протестируйте ваше приложение, запустив ionic cordova run android ionic cordova run android войдите на https //www back4app com/ найдите ваше приложение и нажмите на панель управления панель управления > основные основные > браузер браузер > пользователь пользователь чтобы увидеть созданного вами пользователя! готово! на этом этапе вы можете войти, зарегистрироваться и выйти из вашего приложения с помощью facebook, используя основные функции parse server через back4app!