Angular Facebook User Authentication

Introduction

AngularJS Facebook Login is an easy way for users to log in to the web site once Facebook users can grant permissions to our website; thereby retrieving all the user information.

Step 1

First initially we need to integrate Facebook SDK for JavaScript with an AngularJS.

Use the latest Facebook SDK version

<script id="facebook-jssdk" async="" src="//connect.facebook.net/en_US/sdk.js"></script>

Step 2

After Facebook SDK Integration we should debug and start our Project File once the process starts,

our Project AngularJS SDK Will Connect Automatically. 

<script id="facebook-jssdk" async="" src="//connect.facebook.net/en_US/sdk.js"></script>
<button class="icon icon-facebook btn btn-primary btn-block" style="height:35px;background-color:#365899;border:#365899;"type="button" ng-click="login()"> Sign In With Facebook</button>

Its default click and function authentication is given below.

//module
var App = angular.module('App', ['app.directives', 'facebook']);
App.config(function(FacebookProvider) {
    FacebookProvider.init('xxxxxxxxxxxxxxx'); //Here mention Developer facebook APPID
})
//Controller
App.controller('LoginController', ['$scope', 'Facebook', 'LoginService', '$window', '$location',
    function($scope, Facebook, LoginService, $window, $location) {}
]);

Step 3 

$scope.loginStatus = 'disconnected';
$scope.facebookIsReady = false;
$scope.user = null;

Here, we have to mention default $scope.loginstatus and we should assign the value of the pageload.

Step 4

The user clicks the button directly with the authentication to Facebook and checks the connection status.

were we can see the connections in response.status, which is mentioned below.

$scope.login = function() {
    Facebook.login(function(response) {
        $scope.loginStatus = response.status;
        testAPI();
    });
};

Step 5

If response status value is connected, testAPI will call, where user data can be noted.

Facebook.api('/me', function(response) {
    $scope.user = response;
});
};

When the user uses another tab, we can connect our project at the same time as default page load, and we can check the user connection status on Facebook athauntication .

Now, API will respond to return the connection or it will show as unknow error. ( $scope.facebookIsReady = false; ), Its default page to connect the facebook Is ready to check the auto in status as true or false .

We have to globally assign false in facebookIsReady.

$scope.$watch(function() {
    return Facebook.isReady();
}, function(newVal) {
    if (newVal) {
        $scope.facebookIsReady = true;
    }
});

Step6

When the response.status is connected, it will return the accesss token key & userID. Now we can also get the value by calling testAPI. The necessary details should be mentioned as id,name,first name ,lastname, email,age and picture.

function testAPI {
    console.log('Welcome! Fetching your information.... ');
    FB.api('/me?fields=id,name,email,first_name,last_name,age_range,picture.type(large)', function(response) {
        console.log(response);
        $scope.first_name = response.first_name;
        $scope.last_name = response.last_name;
        $scope.gender = response.gender;
        $scope.email = response.email;
        $scope.name = response.name;
    });
}

Step 7

As the values are noted, the user can disconnect the facebook authentication. The default facebook logout code is mentioned below.

$scope.removeAuth = function() {
    Facebook.api({
        method: 'Auth.revokeAuthorization'
    }, function(response) {
        Facebook.logout(function(response) {
            console.log(JSON.stringify(response));
        });
    });
};

Step 8

Desgin HTML code

<button class="icon icon-facebook btn btn-primary btn-block" style="height:35px;background-color:#365899;border:#365899;" type="button" ng- click="login()">Sign In With Facebook</button>
//Controller
$scope.loginStatus = 'disconnected';
$scope.facebookIsReady = false;
$scope.user = null;
$scope.login = function() {
    Facebook.login(function(response) {
        $scope.loginStatus = response.status;
        testAPI();
    });
};
$scope.removeAuth = function() {
    Facebook.api({
        method: 'Auth.revokeAuthorization'
    }, function(response) {
        Facebook.logout(function(response) {
            console.log(JSON.stringify(response));
        });
    });
};
$scope.api = function() {
    Facebook.api('/me', function(response) {
        $scope.user = response;
    });
};
$scope.$watch(function() {
    return Facebook.isReady();
}, function(newVal) {
    if (newVal) {
        $scope.facebookIsReady = true;
    }
});

function testAPI() {
    console.log('Welcome Fetching your information.... ');
    FB.api('/me?fields=id,name,email,first_name,last_name,age_range,picture.type(large)', function(response) {
        console.log(response);
        $scope.first_name = response.first_name;
        $scope.last_name = response.last_name;
        $scope.gender = response.gender;
        $scope.email = response.email;
        $scope.name = response.name;
        $scope.id = response.id;
    });
}

Finally, the process of creating an AngularJS using Facebook authentication has been successfully completed.