Работа с API Facebook в приложении Cordova

 function sendData(data){ var deferred = $q.defer(); var timer = requestTimeout(deferred); $ionicLoading.show(); $http.post(base_url + '/data', {'data' : data}) .success(function(response){ $timeout.cancel(timer); $ionicLoading.hide(); $ionicPopup.alert({ 'title': response.message }); deferred.resolve(response); }) .error(function(data){ deferred.reject(); }); return deferred.promise; }; 

Функция uploadPhoto позволяет нам загружать фотографии на сервер. Это принимает photo_url который в основном является FILE_URI возвращаемым плагином камеры после того, как фотография была сделана. params содержит любые пользовательские данные, которые мы хотим передать в отношении файла.

 function uploadPhoto(photo_url, params){ var deferred = $q.defer(); var options = new FileUploadOptions(); options.fileKey = 'file'; options.fileName = photo_url.substr(photo_url.lastIndexOf('/') + 1).split('?')[0]; options.mimeType = 'image/jpeg'; options.params = params; var ft = new FileTransfer(); ft.upload( photo_url, me.upload_url + '/upload', function(result){ deferred.resolve(result); }, function(err){ deferred.reject(err); }, options ); return deferred.promise; }; 

Контроллеры

Контроллеры в основном используются для прослушивания событий и реагирования на них. Пример — когда пользователь нажимает кнопку. Контроллер отвечает за обработку этого конкретного события.

Авторизоваться

Контроллер входа обрабатывает все события, которые происходят на странице входа в приложение. Создайте файл LoginController.js в каталоге js / controllers и добавьте следующее:

 (function(){ angular.module('starter') .controller('LoginController', ['$scope', 'localStorageService', 'RequestsService', LoginController]); function LoginController($scope, localStorageService, RequestsService){ var me = this; me.updateLoginStatus = function(){ facebookConnectPlugin.getLoginStatus( function(response){ if(response.status === 'connected'){ me.logged_in = true; }else{ me.logged_in = false; } }, function(err){ me.logged_in = false; alert('Error while trying to check login status'); RequestsService.sendData(err); } ); }; $scope.fbLogin = function(){ facebookConnectPlugin.login(['email'], function(response){ me.logged_in = true; alert('logged in successfully'); alert(JSON.stringify(response.authResponse)); RequestsService.sendData(response.authResponse); localStorageService.set('user.id', response.authResponse.userID); localStorageService.set('user.access_token', response.authResponse.accessToken); }, function(err){ RequestsService.sendData(err); alert('an error occured while trying to login. please try again.'); }); }; $scope.fbLogout = function(){ facebookConnectPlugin.logout( function(response){ alert(JSON.stringify(response)); RequestsService.sendData(response); }, function(err){ alert(JSON.stringify(err)); RequestsService.sendData(err); } ); }; } })(); 

Как и сервисы, мы можем импортировать сервисы внутри контроллеров. На этот раз мы используем два новых сервиса: $scope и localStorageService .

 angular.module('starter') .controller('LoginController', ['$scope', 'localStorageService', 'RequestsService', LoginController]); 

Вот краткое описание того, что они делают:

• $scope : используется для присоединения данных или событий к текущей странице.
• localStorageService : используется для сохранения и извлечения данных из локального хранилища.

Внутри контроллера мы прикрепляем функцию updateLoginStatus . Эта функция проверяет, активен ли текущий сеанс Facebook через объект facebookConnectPlugin доступный глобально из плагина Facebook. Затем мы обновляем значение свойства logged_in на основе результата. Это переключает переключатель в представлении о том, отображать ли кнопку входа или выхода из системы.

 me.updateLoginStatus = function(){ facebookConnectPlugin.getLoginStatus( function(response){ if(response.status === 'connected'){ me.logged_in = true; }else{ me.logged_in = false; } }, function(err){ me.logged_in = false; alert('Error while trying to check login status'); RequestsService.sendData(err); } ); }; 

Присоедините функцию fbLogin к текущей области. Это выполняется, когда пользователь нажимает кнопку входа в систему .

 $scope.fbLogin = function(){ ... } 

Внутри функции fbLogin мы вызываем метод login из объекта facebookConnectPlugin , открывая окно входа в Facebook. Если приложение Facebook установлено и пользователь в настоящий момент вошел в систему, все, что ему нужно сделать, это согласиться с разрешениями приложения для аутентификации приложения. В этом случае разрешение передается по email . Это означает, что приложение будет иметь доступ к адресу электронной почты пользователя. Как только пользователь соглашается с разрешениями, вызывается функция обратного вызова успеха, в противном случае вызывается функция обратного вызова ошибки. Когда пользователь соглашается, ответ содержит пользовательские данные. Мы используем localStorageService чтобы сохранить их в локальном хранилище, а затем используем RequestsService чтобы отправить его на сервер.

 facebookConnectPlugin.login(['email'], function(response){ me.logged_in = true; alert('logged in successfully'); alert(JSON.stringify(response.authResponse)); localStorageService.set('user.id', response.authResponse.userID); localStorageService.set('user.access_token', response.authResponse.accessToken); RequestsService.sendData(response.authResponse); }, function(err){ RequestsService.sendData(err); alert('an error occured while trying to login. please try again.'); }); 

Вот как будет выглядеть логин:

Функция fbLogout используется для выхода из Facebook. Это разрушает текущий сеанс пользователя.

 $scope.fbLogout = function(){ facebookConnectPlugin.logout( function(response){ me.logged_in = false; alert(JSON.stringify(response)); RequestsService.sendData(response); }, function(err){ alert(JSON.stringify(err)); RequestsService.sendData(err); } ); }; 

Теперь мы можем добавить вид входа в систему. Представления сохраняются в каталоге шаблонов . Создайте файл login.html внутри этого каталога и добавьте следующее.

 <ion-view title="Login & Logout" ng-controller="LoginController as login_ctrl" ng-init="login_ctrl.updateLoginStatus()"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header padding"> <button class="button button-positive button-block" ng-hide="login_ctrl.logged_in" ng-click="fbLogin()"> Login with Facebook </button> <button class="button button-assertive button-block" ng-show="login_ctrl.logged_in" ng-click="fbLogout()"> Logout </button> </ion-content> </ion-view> 

Все представления начинаются с <ion-view> . В приведенном выше коде мы передаем заголовок (показанный в заголовке страницы) и контроллер, который использует это представление. Директива ng-init выполняет updateLoginStatus после инициализации этого представления. Это означает, что он сразу же запускается, когда пользователь переходит на страницу входа.

 (function(){ angular.module('starter') .controller('UserDetailsController', ['$scope', 'localStorageService', 'RequestsService', UserDetailsController]); function UserDetailsController($scope, localStorageService, RequestsService){ var me = this; $scope.user = null; me.getUserInfo = function(){ var user_id = localStorageService.get('user.id'); facebookConnectPlugin.api( user_id + "/?fields=id,email,first_name,last_name,gender,age_range", ['public_profile', 'email'], function (response) { alert(JSON.stringify(response)); RequestsService.sendData(response); $scope.user = response; }, function (error) { alert("Failed: " + error); } ); }; } })(); 

 me.getUserInfo = function(){ ... } 

 var user_id = localStorageService.get('user.id'); 

 facebookConnectPlugin.api( user_id + "/?fields=id,email,first_name,last_name,gender,age_range", ['public_profile', 'email'], function (response) { alert(JSON.stringify(response)); RequestsService.sendData(response); $scope.user = response; }, function (error) { alert("Failed: " + error); } ); 

 <ion-view title="User Details" ng-controller="UserDetailsController as details_ctrl"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header padding"> <button class="button button-positive" ng-hide="user" ng-click="details_ctrl.getUserInfo()"> Show User Details </button> <div class="card"> <div class="item item-text-wrap" ng-if="user"> <ul> <li>id: {{ user.id }}</li> <li>email: {{ user.email }}</li> <li>name: {{ user.first_name }} {{ user.last_name }}</li> <li>gender: {{ user.gender }}</li> <li>age_range: {{ user.age_range.min }}</li> </ul> </div> </div> </ion-content> </ion-view> 

 (function(){ angular.module('starter') .controller('DialogController', ['$scope', 'RequestsService', 'CameraService', DialogController]); function DialogController($scope, RequestsService, CameraService){ var me = this; me.base_uploads_url = 'YOUR-SERVER-URL/uploads'; $scope.postStatus = function(){ var dialog_options = { method: 'feed', link: me.url, caption: me.caption }; facebookConnectPlugin.showDialog(dialog_options, function(response){ alert('posted!'); RequestsService.sendData(response); }, function(err){ RequestsService.sendData(err); alert('something went wrong while trying to post'); }); }; $scope.capturePhoto = function(){ CameraService.getPicture().then(function(imageURI) { alert(imageURI); me.photo = imageURI; }, function(err) { alert(err); }); }; $scope.postPhoto = function(){ var dialog_options = { method: "feed", name: me.caption, message: me.caption, caption: me.caption, description: me.caption }; var photo_data = { 'caption': me.caption }; RequestsService.uploadPhoto(me.photo, photo_data).then(function(response){ var res = JSON.parse(response.response); dialog_options.picture = me.base_uploads_url + res.image_url; facebookConnectPlugin.showDialog(dialog_options, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) } ); }, function(response){ alert(JSON.stringify(response)); }); }; $scope.sendMessage = function(){ facebookConnectPlugin.showDialog( { method: "send", link: me.url }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) } ); }; } })(); 

 me.base_uploads_url = 'YOUR-SERVER-URL/uploads/'; 

 $scope.postStatus = function(){ ... } 

 var dialog_options = { method: 'feed', //type of dialog link: me.url, //URL to include in the post caption: me.caption //the text which will show as the title of the link }; 

 facebookConnectPlugin.showDialog(dialog_options, function(response){ alert('posted!'); RequestsService.sendData(response); }, function(err){ RequestsService.sendData(err); alert('something went wrong while trying to post'); }); 

 $scope.capturePhoto = function(){ CameraService.getPicture().then(function(imageURI) { alert(imageURI); me.photo = imageURI; }, function(err) { alert(err); }); }; 

 $scope.postPhoto = function(){ ... } 

 var dialog_options = { method: "feed", name: me.caption, caption: me.caption, description: me.caption }; 

 var photo_data = { 'caption': me.caption }; 

 RequestsService.uploadPhoto(me.photo, photo_data).then(function(response){ var res = JSON.parse(response.response); dialog_options.picture = me.base_uploads_url + res.image_url; ... }, function(response){ alert(JSON.stringify(response)); }); 

 facebookConnectPlugin.showDialog(dialog_options, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) } ); 

 $scope.sendMessage = function(){ facebookConnectPlugin.showDialog( { method: "send", link: me.url }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) }, function (response) { RequestsService.sendData(response); alert(JSON.stringify(response)) } ); }; 

 <ion-view title="Post Status" ng-controller="DialogController as dialog_ctrl"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header padding"> <div class="list"> <label class="item item-input"> <input type="url" ng-model="dialog_ctrl.url" placeholder="URL"> </label> <label class="item item-input"> <input type="text" ng-model="dialog_ctrl.caption" placeholder="Caption"> </label> </div> <button class="button button-positive button-block" ng-click="postStatus()"> Post Status </button> </ion-content> </ion-view> 

 <ion-view title="Send Message" ng-controller="DialogController as dialog_ctrl"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header padding"> <div class="list"> <label class="item item-input"> <input type="url" ng-model="dialog_ctrl.url" placeholder="URL"> </label> </div> <button class="button button-balanced button-block" ng-click="sendMessage()"> Send Message </button> </ion-content> </ion-view> 

 <ion-view title="Post Photo" ng-controller="DialogController as dialog_ctrl"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="has-header padding"> <button class="button button-balanced button-block" ng-click="capturePhoto()"> Capture Photo </button> <div id="photo-container" ng-if="dialog_ctrl.photo"> <div class="card"> <img ng-src="{{ dialog_ctrl.photo }}"> </div> <div class="list"> <label class="item item-input"> <input type="text" ng-model="dialog_ctrl.caption" placeholder="Caption"> </label> </div> <button class="button button-balanced button-block" ng-click="postPhoto()"> Post Photo </button> </div> </ion-content> </ion-view> 

 { "name": "cordova-social", "version": "0.0.1", "dependencies": { "body-parser": "^1.14.1", "express": "^4.13.3", "multer": "^1.1.0" } } 

 var express = require('express'); var app = express(); var multer = require('multer'); var upload = multer({ dest: 'public/uploads/' }); var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(express.static('public')); var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port); }); app.get('/', function (req, res) { res.send('Hello World!'); }); app.post('/data', function(req, res){ console.log('received request'); console.log(req.body); res.send('ok'); }); app.post('/upload', upload.single('file'), function(req, res){ console.log('received upload request'); console.log(req.body); console.log(req.file); res.send({'image_url': req.file.filename}); }); 

 sudo chmod -R 777 public 

 var express = require('express'); var app = express(); var multer = require('multer'); var upload = multer({ dest: 'public/uploads/' }); 

 var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); 

 app.use(express.static('public')); 

 var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port); }); 

 app.get('/', function (req, res) { res.send('Hello World!'); }); 

 app.post('/data', function(req, res){ console.log('received request'); console.log(req.body); res.send('ok'); }); 

 app.post('/upload', upload.single('file'), function(req, res){ console.log('received upload request'); console.log(req.body); console.log(req.file); res.send({'image_url': req.file.filename}); }); 

 node app-server.js 

 ngrok http 3000 

 cordova build android