We Keep Coding

Login on Facebook - Angular

I would like to connection to Facebook account. So i created a simple method to login on facebook.
Code looks like that:
startFacebook() {
window['fbAsyncInit'] = function() {
FB.init({
appId: environment.facebookAppId,
cookie: true,
xfbml: true,
version: 'v10.0',
});
FB.AppEvents.logPageView();
};
(function(d, s, id) {
let js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
}
loginFacebook(userService: UserService) {
FB.getLoginStatus((response) => {
if (response.status === 'connected') {
userService.loginFacebookUser(response);
} else {
FB.login((responseLogin) => {
console.log(responseLogin);
if (responseLogin.authResponse) {
userService.loginFacebookUser(responseLogin);
}
});
}
});
}
Everything was working fine to about Monday.
Now when I call "loginFacebook" I can see a dialog window by Facebook but immediately I got a message from Facebook. I mean call "FB.login((responseLogin) => {" not waiting for login user but immediately send status "unknown" to me.
When the user is logged before - call "loginFacebook" is working fine.
Facebook changed something or am I doing something wrong?
edit: I discovered that a problem exists only on Google Chrome but on a few computers.
Best Regards,
Kris.

facebook login web autotriggering js script

I am trying to embed the Facebook login functionality to grant users access to my website. My issue is that the script auto-triggers the login (and the redirect to the "/views/test_view.php") but I only want this triggered when someone clicks the facebook button.
As you can see in the code I tried to add a on-click event and override the standard function in the login button but it didn't work.
Any ideas on how to change the script to only be executed "on click" would be greatly appreciated! Thanks!
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: '1783721038549063',
xfbml: true,
version: 'v2.6'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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'));
function testAPI() {
window.location.href = "/views/test_view.php";
};
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {};
function wait() {
console.log("wait called");
}
}
</script>
<fb:login-button id="facebook" auto_logout_link=true scope="public_profile,email" size=large onlogin="wait():">
</fb:login-button>
<div id="status">
</div>

Found the solution:
first load the FB api
them wrap everything else in the onclick listener
window.fbAsyncInit = function() {
FB.init({
appId : '1783721038549063',
xfbml : true,
version : 'v2.6'
});
};
(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'));
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
}
function statusChangeCallback(response)
{
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected')
{
// Logged into your app and Facebook.
testAPI();
}
else if (response.status === 'not_authorized')
{
// The person is logged into Facebook, but not your app.
FB.login(function(response)
{
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
});
}
else
{
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
FB.login(function(response){
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
});
}
}
function testAPI() {
window.location.href= "/views/landing_view.php";
}
</script>

Facebook Javascript SDK - Cannot access user email

I have implemented a facebook login on my website, and authentication works fine. I can access my users name, but nothing else implying my permissions are not working correctly. I have tried a few fixes and looked around, but it seems like nothing is fixing it :/ Here is my code:
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="true" data-auto-logout-link="false" data-scope="public_profile,email,user_friends" onlogin="checkLoginState()";>
</div>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
loggedIn();
} else if (response.status === 'not_authorized') {
//User is logged into FB, but not my app
} else {
//User is not logged into FB
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'ID',
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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'));
</script>
If anyone could lend a hand that would be great :)
Thanks!

i see you have a LoggedIn(); but its not declared anywhere in your code yet
so do just that can call the FB.api from there.
Heres how:
*create LoggedIn(): I recommend after your checkLoginState();
function LoggedIn(){
FB.api('/me),function(response){
console.log(JSON.stringify(response));
});
}
//i assume u have firebug running, so from here u can view the info u asked permission for.
//Note that if you're running on local host, it will ony show ur id and name
to get other, you would have to display them manually: like this
FB.api('/me', {locale: 'tr_TR', fields: 'id,name,first_name,last_name,gender,age_range,link,locale,email'}, function(response) {
console.log(JSON.stringify(response));
console.log(response.name);
console.log(response.email);
});
Hope this is clear enough
Read up:
https://developers.facebook.com/docs/facebook-login/web#steps

Need a workaround to stop Safari browser blocking Facebook authentication pop up box for allowing users to login to my site

I've set up the Parse/Facebook login workflow (JavaScript SDK) for my site as seen here https://parse.com/docs/js/guide#users-facebook-users This works on desktop , but on mobile devices because of the Fb authentication using a pop up box in the workflow, I'm unable to make this work (Unless I adjust my browser settings manually, which isn't of course isn't an option for other users)
I've researched it, but can't seem to find a solution I've been able to implement. Has any one been able to solve this?
I've followed the guidance seen in the following places:
Facebook Login not open in Safari/ iPhone
Prevent pop-ups from being blocked
Error/blank page with Chrome and Safar browser apps for iphone when using javascript FB login code
My current code for this is
Function FBLogin() {
//Fb app information//
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'XXXXX',
xfbml : true,
version : 'v2.3'
});
//FB user authentication script//
var uri = encodeURI('http://XXXXX/user_home.html');
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
window.location.href=uri;
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=XXXXXXXXX&redirect_uri="+uri+"&response_type=token");
}
},
error: function(user, error) {
}
});
};
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}

I found the answer on this site for a pure FB JS SDK link, my code below is adjusted to make it work for Parse.
function getUserData() {
FB.api('/me', function(response) {
document.getElementById('response').innerHTML = 'Hello ' + response.name;
});
}
window.fbAsyncInit = function() {
//SDK loaded, initialize it
Parse.FacebookUtils.init({
appId : 'XXXXXX',
xfbml : true,
version : 'v2.2'
});
//check user session and refresh it
var uri = encodeURI('http://XXXXX/XXXXXX.html');
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//user is authorized
document.getElementById('loginBtn').style.display = 'none';
getUserData();
} else {
//user is not authorized
}
});
};
//load the JavaScript SDK
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {
//do the login
var uri = encodeURI('http://XXXXX/XXXXX.html');
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
window.location.href=uri;
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=ADDYOURAPPIDHERE&redirect_uri="+uri+"&response_type=token");
}
},
error: function(user, error) {
}
});
}, false);

How to get user feeds from facebook using angular js.

I had referred many articles but It couldnt solve this issue. Im trying to get the user feeds from facebook.How can i get it.
Here is my code:
var newMod = angular.module('newapp', []);
newMod.controller('mainCtrl', function ($scope) {
window.fbAsyncInit = function () {
//SDK loaded, initialize it
FB.init({
appId: 'your app id',
xfbml: true,
version: 'v2.3'
});
//check user session and refresh it
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
//user is authorized
document.getElementById('loginBtn').style.display = 'none';
getUserData();
} else {
//user is not authorized
}
});
function getUserData() {
FB.api('/me', function (response) {
document.getElementById('response').innerHTML = 'Hello ' + response.name;
document.getElementById('dialog_div').style.border = '1px solid red';
document.getElementById('dialog_div').innerHTML = response;
});
}
};
//load the JavaScript SDK
(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'));
$scope.loginClick = function () {
FB.login(function (response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
getUserData();
}
}, { scope: 'email,public_profile', return_scopes: true });
}
});
my html code:
<body ng-app="newapp">
<div ng-controller="mainCtrl">
<button id='loginBtn' ng-click="loginClick()" >FacebookLOGin</button>
<div id="response"></div>
<div id="dialog_div"></div>
</div>
from getuserdata() Im able to get the user details. Now how to access the user feeds. I had tried to use the below code but it outputs empty array.
FB.api("/me/feed",function(response){
if(response !="" ){
// access the feed data
}
})
Can anyone explain me the way to get the user feeds after user login.

I got to know the mistake that was done.
Here the session will be expired when the person tries to access the feeds.
So include the FB.api('/me/feed',function(response){}) in the code section FB.login(function(response) {})
Now the session will be able to access the userfeeds.

Your app needs the user_posts to get the user's feed. The /user/feed doc explains that pretty well. In any case, you need to implement facebook login, ask for user_posts permission from your user and go from them to get the user's feed.