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

  1. <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. 
  1. <script id="facebook-jssdk" async="" src="//connect.facebook.net/en_US/sdk.js"></script>  
  2. <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.

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

Step 3 

  1. $scope.loginStatus = 'disconnected';  
  2. $scope.facebookIsReady = false;  
  3. $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.
  1. $scope.login = function() {  
  2.     Facebook.login(function(response) {  
  3.         $scope.loginStatus = response.status;  
  4.         testAPI();  
  5.     });  
  6. };  

AngularJS

Step 5

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

  1. Facebook.api('/me'function(response) {  
  2.     $scope.user = response;  
  3. });  
  4. };  

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.
  1. $scope.$watch(function() {  
  2.     return Facebook.isReady();  
  3. }, function(newVal) {  
  4.     if (newVal) {  
  5.         $scope.facebookIsReady = true;  
  6.     }  
  7. });  

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.

  1. function testAPI {  
  2.     console.log('Welcome! Fetching your information.... ');  
  3.     FB.api('/me?fields=id,name,email,first_name,last_name,age_range,picture.type(large)'function(response) {  
  4.         console.log(response);  
  5.         $scope.first_name = response.first_name;  
  6.         $scope.last_name = response.last_name;  
  7.         $scope.gender = response.gender;  
  8.         $scope.email = response.email;  
  9.         $scope.name = response.name;  
  10.     });  
  11. }  

AngularJS
Step 7

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

  1. $scope.removeAuth = function() {  
  2.     Facebook.api({  
  3.         method: 'Auth.revokeAuthorization'  
  4.     }, function(response) {  
  5.         Facebook.logout(function(response) {  
  6.             console.log(JSON.stringify(response));  
  7.         });  
  8.     });  
  9. };  

Step 8

Desgin HTML code

  1. <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>  
  2. //Controller  
  3. $scope.loginStatus = 'disconnected';  
  4. $scope.facebookIsReady = false;  
  5. $scope.user = null;  
  6. $scope.login = function() {  
  7.     Facebook.login(function(response) {  
  8.         $scope.loginStatus = response.status;  
  9.         testAPI();  
  10.     });  
  11. };  
  12. $scope.removeAuth = function() {  
  13.     Facebook.api({  
  14.         method: 'Auth.revokeAuthorization'  
  15.     }, function(response) {  
  16.         Facebook.logout(function(response) {  
  17.             console.log(JSON.stringify(response));  
  18.         });  
  19.     });  
  20. };  
  21. $scope.api = function() {  
  22.     Facebook.api('/me'function(response) {  
  23.         $scope.user = response;  
  24.     });  
  25. };  
  26. $scope.$watch(function() {  
  27.     return Facebook.isReady();  
  28. }, function(newVal) {  
  29.     if (newVal) {  
  30.         $scope.facebookIsReady = true;  
  31.     }  
  32. });  
  33.   
  34. function testAPI() {  
  35.     console.log('Welcome Fetching your information.... ');  
  36.     FB.api('/me?fields=id,name,email,first_name,last_name,age_range,picture.type(large)'function(response) {  
  37.         console.log(response);  
  38.         $scope.first_name = response.first_name;  
  39.         $scope.last_name = response.last_name;  
  40.         $scope.gender = response.gender;  
  41.         $scope.email = response.email;  
  42.         $scope.name = response.name;  
  43.         $scope.id = response.id;  
  44.     });  
  45. }  

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