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
www.mouritech.com
Comments
Post a Comment