FACEBOOK INTEGRATION USING ANGULARJS



Facebook enables easy, efficient and powerful multi-platform integration of it’s services with almost everything you can imagine using Facebook SDK.

This blog is going to be all about Facebook authentication for apps, or simply said: “How to integrate Facebook Sign In into your app”. Although, Facebook SDK Documentation is very good and reading through it will give you not only a clue, but good insights about the functionality of API with some nice examples, it does’t cover some specific details when it comes to AngularJS integration.


Firstly, we need to follow below steps to get API key:

1.Login to facebook developer console( https://developers.facebook.com ).

2. Click on create App,provide name of the app,your email address and choose the category as app for pages and click create App Id as shown below:


3.Then select facebook login from add product page and click on Get Started changes as shown below:






















4. Click on settings and provide app domain and click on add platform and select website and click on save changes as shown below:














5.Now click on App Review and change your app status to public to enable online options as shown below:













6.Click on Tools and support on top of the page and select GraphAPI explorer as shown below:



7.Now click on get Token for your app as shown below and select the fields that you require to get from facebook and click on GetAccessToken as shown below:








8. Now once you select the fields from the left column as shown below, click on submit to verify if you are getting the response for the  fields requested as shown below:






9.Coming to angular js coding, first add the below code in app.js for facebook to be initialised.

window.fbAsyncInit = function() {

FB.init({

appId: 'XXXXXX',

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

oauth: true, // enable OAuth 2.0

xfbml: true, // parse XFBML// App ID

version : 'v2.8'

});

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

10. Later, add the below code in logincontroller.js.


$scope.FBlogin=function ()

{

alert('hi');

FB.login(function(response) {

if (response.authResponse) {

console.log('Welcome! Fetching your information.... ');

FB.api('/me','GET',

{fields:'name,email,first_name,last_name,gender,birthday,picture'}, 

function(response) {

console.log('Good to see you, ' + response.name + '.');

$rootScope.myUserObject.displayName = response.name;

$cookieStore.put('UserObj',$rootScope.myUserObject);

var accessToken=FB.getAuthResponse().accessToken;

console.log(accessToken);

$location.path("/home");

$scope.$apply();

});

} else {

console.log('User cancelled login or did not fully authorize.');

}

},{scope: 'email,public_profile',

return_scopes: true});

};


11.Add below functionality for facebook logout:

FB.logout(function(response) {

});


12.Finally, coming to html page use the below code for facebook button :

<a class="btn btn-block btn-social btn-lg btn-facebook" ng-

click="FBlogin();"><i class="fa fa-facebook"></i>Login</a>


13.Below is the css code for facebook button:


.btn-facebook {

color: #fff;

background-color#3b5998;

border-color: rgba(0,0,0,0.2);

}

.btn-social.btn-sm {

padding-left: 30px;

}

.btn-block + .btn-block {

margin-top: 5px;

}

.btn-social {

position: relative;

padding-left: 44px;

text-align: left;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.btn-block {

display: block;

width: 20%;

}

.btn-sm, .btn-group-sm > .btn {

padding: 1px 5px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

.btn {

display: inline-block;

padding: 6px 12px;

margin-bottom: 0;

margin-left:20px;

font-size: 14px;

font-weight: normal;

line-height: 1.42857143;

text-align: center;

white-space: nowrap;

vertical-align: middle;

cursor: pointer;

background-image: none;

border: 1px solid transparent;

border-radius: 4px;

}

Thanks,

Lakshmi Alekhya Vaddi

alekhya4c4@gmail.com

Mouritech Pvt Ltd
www.mouritech.com


Comments