Every third party app that integrates Facebook login needs to create a Facebook developer app. A developer app helps Facebook track the third party app and provides additional configuration options.
To create a Facebook developer app for our Cordova app do the following:
Let’s start by creating a fresh Ionic Framework Android application:
ionic start FacebookApp blank
cd FacebookApp
ionic platform add android
There are two requirements to this project. You must include the ngCordova library for $cordovaOauth and the Apache Cordova InAppBrowser plugin
Command to include InAppBrowser plugin-
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
With the file in place, open your www/index.html file and include the library like so:
<script src="js/ng-cordova.min.js"></script>
In your app.js fill add the following lines of code-
var facebookApp = angular.module("starter", ["ionic", "ngCordova"]);
Our Facebook project is going to be composed of the following three screens managed by the
AngularJS UI-Router:
- Login (www/templates/login.html)
- Profile (www/templates/profile.html)
Let’s start by adding the following code to our login template:
Add the following lines of code in login.html page-
<ion-view title="Facebook Example">
<ion-content>
<div class="padding">
<button ng-click="login()" class="button button-block button-balanced">Oauth Sign In</button>
<p>
Clicking the above button will initiate an official browser sign in flow with Facebook. You
will be redirected to the Facebook website to enter your credentials.
</p>
</div>
</ion-content>
</ion-view>
The only purpose the above template serves is to launch the InAppBrowser for the Oauth login flow. The controller code can be demonstrated with the following:
facebookApp.controller("LoginController", function($scope, $cordovaOauth, $localStorage, $location) {
$scope.login = function() {
$cordovaOauth.facebook("CLIENT_ID_HERE", ["email", "read_stream", "user_website", "user_location", "user_relationships"]).then(function(result) {
$localStorage.accessToken = result.access_token;
$location.path("/profile");
}, function(error) {
alert("There was a problem signing in! See the console for logs");
console.log(error);
});
};
});
Notice that after a successful login, the access token is saved and we are redirected to our profile. The access token will be used in every future API request for the application.
Let’s take a look at the profile template. Add the following code to your www/templates/profile.html file:
<ion-view title="Profile" ng-init="init()">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img ng-src="{{profileData.picture.data.url}}">
<h2>{{profileData.name}}</h2>
<p>{{profileData.id}}</p>
</div>
<a href="#" class="item item-icon-left">
<i class="icon ion-earth"></i>
{{profileData.website}}
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
{{profileData.location.name}}
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-heart"></i>
{{profileData.relationship_status}}
</a>
</div>
</ion-content>
</ion-view>
On the profile screen we will display the signed in users name, avatar, website, location, and relationship status. And the controller code for same HTML is-
facebookApp.controller("ProfileController", function($scope, $http, $localStorage, $location) {
$scope.init = function() {
if($localStorage.hasOwnProperty("accessToken") === true) {
$http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id,name,gender,location,website,picture,relationship_status", format: "json" }}).then(function(result) {
$scope.profileData = result.data;
}, function(error) {
alert("There was a problem getting your profile. Check the logs for details.");
console.log(error);
});
} else {
alert("Not signed in");
$location.path("/login");
}
};
});
Thanks...
