Facebook provides a large set of client-side functionalities that includes Like buttons, Social plugins etc. But what I used is javascript SDK for purposes of authenticate user and fetch information of the user.
In ruby on rails it is not difficult to login with facebook using gem omniauth, but It redirects to next page or next tab. So, to show popup for facebook authentication, i am using javascript sdk provided by facebook.
Steps to Implement:-
- Write the following code in your app/views/layouts/application.html.erb where the the body tag starts.
<body>
<div id="fb-root"></div> // fb-root is facebook standard id. Please do not change it
<script>
$(document).ready(function(){
window.fbAsyncInit = function () {
FB.init({ appId: 'appid', cookie: true, xfbml: true, oauth: true });
if (typeof facebookInit == 'function') {
facebookInit();
}
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
});
</script>
</body>
- This given script will automatically include facebook javascript and css.
- The appid is provided by the facebook.
- Here if condition checks whether the javascript is loaded or not.
- fb-root is id provided by facebook. Please do not change it.
- Now after that, We have to show the login popup on clicking any button. Write this code in html file under the body tag.
<button id="facebook-login" class="button submit-bttn">Facebook Popup</button>
<div id=”status-login”></div>
<div class=”error-vote-poup”></div>
// Using jquery for onclick event
$(‘#facebook-login’).on(‘click’, function(){loginPopup();});
function loginPopup() {FB.login(function(response) {if (response.authResponse){getUserInfo();} else{console.log('User cancelled login or did not fully authorize.');}},{scope: 'email,user_birthday'}); // birthday is important}
function getUserInfo(){FB.api('/me', function(response) {var str="<b>Name</b> : "+response.name+"<br>";str +="<b>Email:</b> "+response.email+"<br>";console.log(str);
// this is other info you can get from facebook.
// email: response.email, name: response.name, bio: response.bio,
// location: response.location.name, uid: response.id, gender:
// response.gender, birthdate: response.birthday
// this ajax is optional (only if you want to hit server with facebook
// info.)
$.ajax({
type: "PUT",url: "sessions/update_facebook_info",data: { email: response.email, name: response.name, bio: response.bio, location: response.location.name, uid: response.id, gender: response.gender, birthdate: response.birthday },
statusCode: {404: function() {alert( "page not found" );},200: function() {$('#status-login').html('Authenticated')},201: function( msg ) {$('.error-vote-poup').html(msg.responseText)},400: function( msg ) {$('.error-vote-poup').html(msg.responseText)}}});
});
}
- In loginPopup function we have to define the scope for the facebook. Reason behind that facebook does not provide us email and birth date untill we define in the scope.
- In getUserInfo function we will get the response from the facebook in which we we have all the information about the authenticated user.
- In this function i also define the ajax call with status codes and if we want to hit the server with this information.
- Now we have all the information regarding the user and we can do the needful.
No comments:
Post a Comment