Facebook integration in ionic project

Hello,

If your App needs Login or Registration functionality, then using 3rd party services such as Facebook Authentication are useful tools to utilize.

Creating a Facebook Developer App-

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:

Visit the Facebook Developer Apps Page and click Add a New App. Select Website as the platform.

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...

$rootScope in angularjs

Hi,

$rootScope-

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility. 

The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

Example-

Please run the following sets of command-

ionic start myApp blank

cd myApp

ionic platform add android

In your index.html file add following lines of code-

<div ng-controller="MyAppController" style="border:2px solid blue; padding:5px">

 Hello {{msg}}!

 <br />

 Hello {{name}}!

 (rootScope)

</div>

In your app.js file add following lines of code-

myApp.controller('MyAppController', function ($scope, $rootScope) {

 $scope.msg = 'World';

 $rootScope.name = 'AngularJS';

 });

Note-

When you use ng-model with $rootScope objects then AngularJS updates those objects under a specific $scope of a controller but not at global level $rootScope.

Create a private $scope for each controller to bind it to the view.

Thanks...

Drop down data binding from view to controller in Ionic

Hi,

Here i am sharing a way by which, we can bind data from view to controller by using drop down.

Run following sets of command in your terminal-

ionic start myApp blank
cd myApp
ionic platform add android

Add following lines of code in your index.html file-

<div ng-controller="MyAppCtrl">
<select
    ng-change="changed()"
    ng-model="regions"
    ng-options="data.name for data in options">
</select>
    <pre>{{ regions | json }}</pre>
</div>

  

And add following lines of code in your app.js file-

var myApp = angular.module('myApp',[]);

myApp.controller('MyAppCtrl',function( $scope){
 $scope.options = [
        {id: 1, name: 'A'},
        {id: 2, name: 'B'},
        {id: 3, name: 'C'}
    ];
 
    $scope.changed = function() {
        console.log($scope.regions);
    }
});

Here when you change option in your html page, you will get that value in your controller.

Thanks...