i wrote for my Node.js Applikation a model (backbone), that realizes the authentication with Facebook Javascript SDK.
My modelcode is here:
define(['jquery','underscore','backbone'], function($,_,Backbone) {
var facebookUserModel = Backbone.Model.extend({
initialize: function() {
console.log('FacebbokUserModel initialized');
// bind statusChange to this context
_.bindAll(this, 'statusChange');
// be notified when the session changes
FB.Event.subscribe('auth.authResponseChange', this.statusChange);
}
//saves actual status
,_loginStatus : null
//return true/false if user is logged in
,isLoggedIn : function() {
return this._loginStatus === 'connected';
}
//check whether user is logged in or not
//used for firsttime invoke
,getLoginStatus : function() {
_this = this;
FB.getLoginStatus(function(response) {
_this.statusChange(response);
});
}
//log user in
,login: function() {
FB.login(function() {});
}
//log user out
,logout: function() {
FB.logout();
}
//treat changes on status
,statusChange: function(response) {
console.log('statuschange');
if(this._loginStatus === response.status) return false;
var event;
if(response.status === 'not_authorized') {
event = 'fb:unauthorized';
}else if(response.status === 'connected') {
event = 'fb:connected';
}else {
event = 'fb:disconnected';
}
console.log(event);
// RESPONSE IS SHOWN CORRECTLY EVEN IN FIREFOX
console.log(response);
this._loginStatus = response.status;
this.trigger(event, this, response);
}
,sync: function(method, model, options) {
if(method !== 'read') throw new Error('FacebookUser is a readonly model, cannot perform ' + method);
var callback = function(response) {
if(response.error) {
options.error(response);
} else {
options.success(model, response, options);
}
return true;
};
FB.api('/me', callback);
},
});
return facebookUserModel;
});
Initfunction
FB.init({
appId : 'myappId', // App ID
channelUrl : 'channelurl', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
When i execute this code it is working fine in Chrome and in IE. On serverside i can validate this cookie really easy but i have a problem with Firefox. Firefox shows the response correctly(clientside) but it does not create an fbsr-cookie. Can somebody give me a hint why? How can i handle this problem?
greets
Related
In the client-side of a METEORJS application, i have a controller that display some users.
I have a problem with Meteor.user() function, the error is : Meteor.user(...) is undefined.
Here is my code :
this.AdminUsersController = RouteController.extend({
template: "Admin",
yieldTemplates: {
'AdminUsers': { to: 'AdminSubcontent'}
},
onBeforeAction: function() {
var permissions = Meteor.user().profile.permissions;
if (permissions && permissions.indexOf('Users') != -1)
this.next();
else this.redirect('/admin/dashboard');
},
action: function() {
if(this.isReady()) { this.render(); } else { this.render("Admin"); this.render("loading", { to: "AdminSubcontent" });}
/*ACTION_FUNCTION*/
},
isReady: function() {
var subs = [
Meteor.subscribe("users")
];
var ready = true;
_.each(subs, function(sub) {
if(!sub.ready())
ready = false;
});
return ready;
},
data: function() {
var data = {
params: this.params || {},
users: Users.find({labo_id: Meteor.user().profile.labo_id}, {sort: {createdAt:-1}})
};
return data;
},
onAfterAction: function() {
}});
It's in the data function.
I try to retrieve all users that are connected to the logged in user and got the same labo_id field...
I don't know why it give me that, because in the onBeforeAction function, i can access to Meteor.user(), and specially his profile...
Someone know what can i do to make it run ?
Thanks for your future answers :)
This is a timing issue. Meteor.user() does not necessarily return data, if it hasn't been loaded yet. Meteor.userId() however will return the _id of the user record (if they are logged in). If you can change your query to rely on that _id, then it can work.
Depending on which router you are using, you can add a resolve: entry to ensure that the route waits for the user record to be loaded before activating it, and then your query will work.
I am using parse to send push notifications and my mobile app is based out of Ionic(angularjs). I am currently sending push notifications through channels. If I want to open specific page when user clicks on notification, how do I do? My current code is
window.parsePlugin.initialize('waDzmmDVt7hNmRCoY50wOFN3lsRoW2xu42WrPYLs', 'IF2RHNA0slYDq8feUhweewmcK2uEnOqDnK8J7jUf', function() {
console.log('Parse initialized successfully.');
window.parsePlugin.subscribe('SampleChannel', function() {
console.log('Successfully subscribed to SampleChannel.');
window.parsePlugin.getInstallationId(function(id) {
// update the view to show that we have the install ID
console.log('Retrieved install id: ' + id);
}, function(e) {
console.log('Failure to retrieve install id.');
});
}, function(e) {
console.log('Failed trying to subscribe to SampleChannel.');
});
}, function(e) {
console.log('Failure to initialize Parse.');
});
you need to register a callback
https://github.com/aaronksaunders/dcww/blob/master/www/js/parseService.js#L60
registerCallback: function (_pushCallback) {
var deferred = $q.defer();
$window.parsePlugin.registerCallback('onNotification', function () {
$window.onNotification = function (pnObj) {
_pushCallback && _pushCallback(pnObj);
alert('We received this push notification: ' + JSON.stringify(pnObj));
if (pnObj.receivedInForeground === false) {
// TODO: route the user to the uri in pnObj
}
};
deferred.resolve(true);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
see the complete example here : https://github.com/aaronksaunders/dcww
use custom receiver as here
and then use flag for your context.startActivity(intent) as here
also you can ask for intent.getAction() to know which intent filter launch your receiver
I have followed Authentication Tutorial, but running into some issues.
I have a php backend api which resides in another domain, http://rest.api {local development}
The ember js application uses ember-app-kit and connects to the rest api.
When the user submits the login form it sends the username/email with password to one of the route defined in the rest api Session Controller
import AuthManager from 'lms/config/auth_manager';
var SessionNewController = Ember.ObjectController.extend({
attemptedTransition : null,
loginText : 'Log In',
actions: {
loginUser : function() {
var self = this;
var router = this.get('target');
var data = this.getProperties('identity', 'password');
var attemptedTrans = this.get('attemptedTransition');
$.post('http://rest.api/login',
data,
function(results) {
console.log(results.session);
console.log(results.user_id);
AuthManager.authenticate(results.session, results.user_id);
if(attemptedTrans) {
attemptedTrans.retry();
self.set('attemptedTransition', null);
} else {
router.transitionTo('index');
}
}
)
}
}
});
export default SessionNewController;
After receiving the api result in the results variable which looks like this :
Object {success: "user login success", session: "2OmwKLPclC.YhYAT3745467my7t0m2uo", user_id: "1"}
But as soon as I capture the data and send it to the AuthManager which resides in Auth Manager Code
import User from 'lms/models/user';
import Application from 'lms/adapters/application';
var AuthManager = Ember.Object.extend({
init: function() {
this._super();
var accessToken = $.cookie('access_token');
var authUserId = $.cookie('auth_user');
if(!Ember.isEmpty(accessToken) || !Ember.isEmpty(authUserId)) {
this.authenticate(accessToken, authUserId);
}
},
isAuthenticated: function() {
return !Ember.isEmpty(this.get('ApiKey.accessToken')) && !Ember.isEmpty(this.get('ApiKey.user'));
},
authenticate: function(accessToken, userId) {
$.ajaxSetup({
headers: { 'Authorization': 'Bearer ' + accessToken }
});
var user = User.store.find(userId);
console.log(user);
this.set('ApiKey', ApiKey.create({
accessToken: accessToken,
user: user
}));
},
reset: function() {
this.set('ApiKey', null);
$.ajaxSetup({
headers: { 'Authorization': 'Bearer None' }
});
},
apiKeyObserver: function() {
Application.accessToken = this.get('apikey.accessToken');
if (Ember.isEmpty(this.get('ApiKey'))) {
$.removeCookie('access_token');
$.removeCookie('auth_user');
} else {
$.cookie('access_token', this.get('ApiKey.accessToken'));
$.cookie('auth_user', this.get('ApiKey.user.id'));
}
}.observes('ApiKey')
});
export default AuthManager;
I got an error in the console saying
Uncaught TypeError: Object function () {
if (!wasApplied) {
Class.proto(); // prepare prototype...
}
o_defineProperty(this, GUID_KEY, undefinedDescriptor);
o_defineProperty(this, '_super', undefinedDescriptor);
var m = met...<omitted>...e' new.js:23
(anonymous function) new.js:23
jQuery.Callbacks.fire jquery.js:1037
jQuery.Callbacks.self.fireWith jquery.js:1148
done jquery.js:8074
jQuery.ajaxTransport.send.callback jquery.js:8598
It is not able to pass the variables to the imported function.
Finally got this working. The error that was I doing is after extending the Ember.Object.extend() on auth_manager.js, I didn't create the object anywhere. Thats why it couldnt set create a cookie and throwing that error message.
All I had to do was, .create() after extending the object.
Don't know whether it is the right method or not. But it certainly works.
I am very new to ember and trying to implement authentication via facebook
I am using ember-facebook.js library to connect with facebook. Once the authentication is successful, I want to transition to some other route e.g. '/index'. This library creates a App.FBUser object in mixin which is populated from the facebook response. The blog say following:
Whenever the user changes (login, logout, app authorization, etc) the method updateFBUser is called, updating the App.FBUser object on your application. You can do whatever you want with this binding, observe it, put it in the DOM, whatever.
Ember.Facebook = Ember.Mixin.create({
FBUser: void 0,
appId: void 0,
fetchPicture: true,
init: function() {
this._super();
return window.FBApp = this;
},
appIdChanged: (function() {
var _this = this;
this.removeObserver('appId');
window.fbAsyncInit = function() {
return _this.fbAsyncInit();
};
return $(function() {
var js;
js = document.createElement('script');
$(js).attr({
id: 'facebook-jssdk',
async: true,
src: "//connect.facebook.net/en_US/all.js"
});
return $('head').append(js);
});
}).observes('appId'),
fbAsyncInit: function() {
var _this = this;
FB.init({
appId: this.get('appId'),
status: true,
cookie: true,
xfbml: true
});
this.set('FBloading', true);
FB.Event.subscribe('auth.authResponseChange', function(response) {
return _this.updateFBUser(response);
});
return FB.getLoginStatus(function(response) {
return _this.updateFBUser(response);
});
},
updateFBUser: function(response) {
console.log("Facebook.updateFBUser: Start");
var _this = this;
if (response.status === 'connected') {
//console.log(_this);
return FB.api('/me', function(user) {
var FBUser;
FBUser = user;
FBUser.accessToken = response.authResponse.accessToken;
if (_this.get('fetchPicture')) {
return FB.api('/me/picture', function(path) {
FBUser.picture = path;
_this.set('FBUser', FBUser);
return _this.set('FBloading', false);
});
} else {
_this.set('FBUser', FBUser);
return _this.set('FBloading', false);
}
});
} else {
this.set('FBUser', false);
return this.set('FBloading', false);
}
}//updateFBUser
});
Update :
Adding following observer in my LoginController, I am able to capture the App.FBUser update event(it is update after getting response from FB; as indicated by the blog).
From this observer method, when I try to 'transitionTo' my index route I get following error
Uncaught TypeError: Object data-size has no method 'transitionTo'. Following is the code
App.LoginController = Ember.Controller.extend({
onSuccess: (function(){
var self = this;
/*
//tried all these method to redirect but error is the same
var attemptedTransition = this.get('attemptedTransition');
attemptedTransition.retry();
*/
/*
//tried all these method to redirect but error is the same
var router = this.get('target.router');
router.transitionTo('index');
*/
//tried all these method to redirect but error is the same
this.transitionToRoute('index');
}).observes('App.FBUser')
});
Index Route
App.AuthenticatedRoute = Ember.Route.extend({
beforeModel: function(transition){
var self = this;
if(!App.FBUser){
self.redirectToLogin(transition);
}
},
redirectToLogin: function(transition){
var loginController = this.controllerFor('login');
loginController.set('attemptedTransition', transition);
this.transitionTo('login');
}
});
I am not able to get my head around it.
Any help is greatly appreciated. Thanks
How can I access this object in my Route.beforeModel() hook.
Depending on what route's beforModel hook you are talking about, this is how you could do it:
App.SomeRoute = Ember.Route.extend({
beforeModel: function(transition) {
if (!Ember.isNone(App.FBUser)) {
// calling 'transitionTo' aborts the transition, redirects to 'index'
this.transitionTo('index');
}
}
});
Update in response to your last comment
The addon you are using is slightly outdated and the proposed implementation method for the mixin in your application will not work with the current version of ember:
App = Ember.Application.create(Ember.Facebook)
App.set('appId', 'yourfacebookappid');
starting from version 1.0.0-rc3 of ember you should rather do it like this:
App = Ember.Application.creatWithMixins(Ember.Facebook);
App.set('appId', 'yourfacebookappid');
After that you should be able to have access to the App.FBUser object as mentioned above.
Update 2
If you want to be able to be notified when some events happend, like login, logout etc. you should (as the Author of the addon states on it's blog post) override the updateFBUser method and do in there your transitions.
Since the addon is trough the mixin available in our App namespace you should be able to do the following:
App = Ember.Application.creatWithMixins(Ember.Facebook, {
updateFBUser: function() {
this._super();
// we are calling super to let the addon
// do it's work but at the same time we get
// notified that something happened, so do at this
// point your transition
}
});
Hope it helps.
As per Issue 1 adding
attributeBindings: [],
to:
return Ember.FacebookView = Ember.View.extend({
solved the issue.
A have trouble with blocking popups which are showed by Facebook JS SDK. After reading documentation, I understand that the call of JS SDK must be after the user's click.
This code works correctly and browser don't block the popup:
function Login() {
FB.login(function (response) {
if (response.authResponse) {
DoSmth(response.authResponse.accessToken);
}
}, { scope:'user_birthday, publish_stream' });
}
But if I will use this code anywhere (for ex. post to wall, get user data), the popup will be displayed in all cases, even if user already logged in in facebook. I consider, it's not fine.
To determine, that user already logged in, I use this code:
function CheckOrLogin() {
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
DoSmth(response.authResponse.accessToken);
}
else {
FB.login(function (response) {
if (response.authResponse) {
DoSmth(response.authResponse.accessToken);
}
}, { scope:'user_birthday, publish_stream' });
}
}, true);
}
In this case popup will not be shown, if user already logged in. But if user hasn't been logged in facebook, this condition (if (response.status ===) returns false. And browser will be BLOCK popup, which will be shown by FB.login. Is there any way to prevent this?
Try to check login status at once when page loaded, and store the result and accessToken in some variable.
var userData = {isConnected: false, token: null};
FB.getLoginStatus(function (response) {
userData.isConnected = (response.status === 'connected');
if (userData.isConnected) {
userData.token = response.authResponse.accessToken;
}
}, true);
When user clicks some button – just check variable's value.
function CheckOrLogin() {
if (userData.isConnected) {
DoSmth(userData.token);
} else {
FB.login(function (response) {
if (response.authResponse) {
DoSmth(response.authResponse.accessToken);
}
}, { scope:'user_birthday, publish_stream' });
}
}