Angular Facebook User Authentication

Introduction

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

Step 1

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

Now, API will respond to return the connection or it will show as an unknown 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.