On a user's click a popup is opened :
FB.login(function () {
// My CallBack
}, { scope: 'email,user_birthday,user_location,user_hometown' });
And a facebook login link is generated with a lot of parameters.
I want to add one more parameter of my own , for example UserHasClicked=1 , but
when I added it to the scope
{ scope: 'email,user_birthday,user_location,UserHasClicked=1' }
I got Scope Invalid message.
How can I add my own parameter to the FB link that's generated by the login() mehtod ?
This is the behavior wanted by the login method, why not using the callback to do what you have to do with the userHasClicked logic ?
FB.login(function () {
userHasClicked = true
}, { scope: 'email,user_birthday,user_location,user_hometown' });
I am not sure if that is what you want, but I assume you want to know if a user opened the login popup? Why not just do that in the callback function of your button/link/whatever:
document.getElementById('loginBtn').addEventListener('click', () => {
const someParm = 1;
FB.login(() => {
//this will get called when the user cancels or authorizes the login
console.log(someParam); //do something with the param after auth
}, {scope: 'email,user_birthday,...'});
});
Related
I have a Vue app with Vuex dependency. Program logic is that message should be sent after successful Facebook share.
This is the method getting triggered on button click for sending the message:
onSubmit() {
if(this.shouldShowShareModal){
this.$store.dispatch('openModal', 'SHARE_MODAL');
return;
}
this.$store.dispatch('sendMessage', {
conversation_id: this.conversationId,
message : this.messageText,
message_type_id: 1
}).then(() => {
this.messageText = '';
this.scrollToBottom();
});
},
openModal simply sets the value of the given modal to true, thus v-if shows the modal which has the button which upon share method triggers a Facebook share:
share() {
var self = this;
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/'
}, function(){
self.$store.dispatch('sharedThroughFacebook');
self.$store.dispatch('closeModal', 'SHARE_MODAL');
});
}
Now the issue I have is how can I continue sending the message after Facebook callback is successful? Currently with sharedThroughFacebook I am simply setting the store sharing flag to true, but I am not sure about the best approach for sending the message only after a successful callback? If I push the data to modal, that seems like a dirty solution and that modal should not be aware of message state. On the other hand putting the conversation ID, message, type and text on Vuex store seems like an overhead since this component is the only one using the data.
You can compose your action like this
actions: {
async share ({ dispatch, commit }) {
await dispatch('sharedThroughFacebook') // wait for `sharedThroughFacebook` to finish
await dispatch('closeModal') // close the modal before sending the message
commit('sendMesseage')
},
async sharedThroughFacebook (context, payload) {
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/'
})
}
}
My code is like this :
<script>
export default{
props:['idStore'],
methods:{
addFavoriteStore(event){
$(function () {
$(document).ajaxError(function (e, xhr, settings) {
if (xhr.status == 401) {
window.Laravel.baseUrl+'/login'
}
else {
event.target.disabled = true
const payload= {id_store: this.idStore}
this.$store.dispatch('addFavoriteStore', payload)
setTimeout(function () {
location.reload(true)
}, 1500)
}
});
});
}
}
}
</script>
When click favorite button, it will call addFavoriteStore method
After run addFavoriteStore method, I will call condition to check unauthorized user or not. I try using condition like that, but it does not work. I check on the console, no error
Why the condition not working?
#moses-toh so glad my suggestions worked :-).
So going through it all you as you where using laravel and the blade syntax you can use Blade/PHP to check if the user is logged in or not and supply the relivent Button/Message. So like you have done:
#if (Auth::user())
<favorite-button>&heart; Favorite</favorite-button>
#else
Login To Favorite
#endif
Hope this is ok.
Here's code flow, first is the login and it's work good, but after that i want to immediately call feed function, that's probably the reason why browser blocked it, is there any other way how i can do this? Its work good if the display is set to iframe, but i really want it as a popup. Tahnks.
Share
function
function fblogin() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', {fields: 'last_name, first_name, gender, email, id'}, function(reslog) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
postToFeed(reslog.gender);
}
});
});
} else {
//console.log('X');
}
}, {scope:'email'});
}
postToFeed
function postToFeed(gender) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
}
});
}
You have to call FB.ui dialogs directly on user interaction (= in the callback function of a mouse event). FB.getLoginStatus is asynchronous, that´s why (good) browsers block it.
Use FB.getLoginStatus on page load instead, and store the status. Or better: remove it, because you don´t need to authorized a user for the FB.ui dialogs. And in your code it would not make any sense, because you only use it after FB.login and even after an API call - so the user is surely logged in.
FB.login is asynchronous too, and trying to present a share dialog to the user immediately after login is not only annoying for the user, it´s also against the rules imho. I would count that as "incentivizing":
Only incentivize a person to log into your app, enter a promotion on
your app’s Page, or check-in at a place. Don’t incentivize other
actions.
Source: https://developers.facebook.com/policy/
New code:
HTML:
Share
JavaScript function "postToFeed":
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
In about 0.3% of users, I can't get their FB ID with JS API. On some occasions I have gotten it before for those users. What could be the cause of this and any ideas on how to fix it?
As far as I know most of those users were on Windows and using firefox.
My code:
window.fbAsyncInit = function () {
FB.init({
appId : "xxxx",
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.Canvas.setSize({width:$("#mainbody").outerWidth(),height:$("#mainbody").outerHeight()});
FB.getLoginStatus(function (response) {
if(response.authResponse){
if(response.authResponse.userID){
fbId = response.authResponse.userID;
$("#hiddenFbId").val(fbId);
setSession();
}
}
if (response.status === 'connected') {
FB.api(
"/me?locale=et_EE",
function (response) {
if (response && !response.error) {
fbName = response['name'];
fbId = response['id'];
$("#hiddenFbId").val(fbId);
fbEmail = response['email'];
setSession();
}
});
} else {
FB.login(function (response) {
if (response.authResponse) {
if(response.authResponse.userID){
fbId = response.authResponse.userID;
$("#hiddenFbId").val(fbId);
setSession();
}
FB.api(
"/me?locale=et_EE",
function (response) {
if (response && !response.error) {
fbName = response['name'];
fbId = response['id'];
$("#hiddenFbId").val(fbId);
fbEmail = response['email'];
setSession();
}
});
} else {
fbDenied = true;
}
}, {
scope : 'public_profile,email,user_likes'
});
}
});
}
Never call FB.login in the asynchronous (!) callback function of FB.getLoginStatus. Some browsers block the login popup if you do that, you always need to call FB.login on user interaction - and calling it on page load is a bad idea anyway. Don´t force the user to authorize your App right when they enter your App and before they know what your App is about.
FB.getLoginStatus on page load to refresh the User Token and to check if the user is authorized
FB.login on mouse click
It is also easier that way to remove some redundant code and move your FB.api call to a function.
It may or may not solve your problem, but it´s definitely important and a commong source of errors.
Tutorial: http://www.thinkster.io/angularjs/wBhtRLWHIR/6-authenticating-users-with-a-service
I'm following this tutorial and it seems like I'm losing my user as soon as they register.
Here is my auth.js factory:
'use strict';
app.factory('Auth', function($firebaseSimpleLogin, FIREBASE_URL, $rootScope){
var ref = new Firebase(FIREBASE_URL);
var auth = $firebaseSimpleLogin(ref);
var Auth = {
register : function(user) {
return auth.$createUser(user.email, user.password);
},
signedIn : function() {
// PROBLEM: authUser is always null
console.log(auth.user);
return auth.user !== null;
},
logout : function () {
auth.$logout();
}
};
$rootScope.signedIn = function () {
return Auth.signedIn();
};
return Auth;
});
Here is my auth.js controller:
'use strict';
app.controller('AuthCtrl', function($scope, $location, Auth){
if (Auth.signedIn()) {
$location.path('/');
}
$scope.register = function () {
Auth.register($scope.user).then(function (authUser) {
console.log(authUser);
$location.path('/');
});
};
});
The console.log under signedIn in the factory is always null. Any idea where the disconnect is? The registration itself is working fine, and authUser is populated in the console.log in the controller when registering.
The latest documentation for Angularfire says that the $createUser method of $firebaseSimpleLogin returns a promise but it doesn't mention any parameters being passed to the then callback.
You can use the $getCurrentUser method to get the current user after the user registers.
The tutorial needs to be updated and you should always be checking the documentation for whatever libraries you're using yourself.
Your code for signedIn should look like this:
Auth.signedIn = function() {
auth.$getCurrentUser().then(function(currentUser) {
console.log(currentUser);
}, function() {
console.log('error');
});
};
I found a very similar question that is further along in the tutorial :can't show logout button after $createUser
In the answer I learned that angularfire used to automatically log the user in after it was created. Apparently now it no longer does that which is why the auth.user in signedIn was null.
I am now doing the same tutorial. This code (in auth controller) worked for me:
$scope.register = function () {
Auth.register($scope.user).then(function (authUser) {
console.log(authUser);
Auth.login($scope.user);
$location.path('/');
});
};
I'm a total n00b, but what (I think) this is doing is authenticating the user, then running a function that logs the user in right after. Logout button is now functioning as expected.