A user is logged in to the website and tries to create a post. Whenever a new post is created, this post gets associated with the user who created the post.
Referring to a thinkster.io Tutorial, which uses older API of AngularFire.
When using AngularFire API v0.8.0, this line of code which adds the post breaks:
user.$child('posts').$child(postId).$set(postId);
The Post Factory (post.js) with the method for creating post is:
app.factory('Post',
function ($firebase, FIREBASE_URL, User) {
var ref = new Firebase(FIREBASE_URL + 'posts');
var posts = $firebase(ref).$asArray();
var Post = {
all: posts,
//Starting of create function
create: function (post) {
if (User.signedIn()) {
var user = User.getCurrent(); //Gets the current logged in user
post.owner = user.username;
return posts.$add(post).then(function (ref) {
var postId = ref.name();
user.$child('posts').$child(postId).$set(postId);
//user.$getRecord('posts').$getRecord(postId).$set(postId);
return postId;
});
}
},
//End of create function
Changelog for AngularFire states that
$child() no longer exists. The data already exists in the parent object and creating additional synchronized children is not efficient and discouraged. Use data transformations, flatten your data, or drop down to the Firebase SDK and use its child() method.
I am confused as to how to change the code to work with the update in the API.
After Edit
This is the getCurrent method:
getCurrent: function(){ // retrieves current user
return $rootScope.currentUser;
},
Which belongs to user.js Factory:
'use strict';
app.factory('User', function ($firebase, FIREBASE_URL, Auth, $rootScope) {
var ref = new Firebase(FIREBASE_URL + 'users');
var users = $firebase(ref);
var usersdiv = $firebase(ref).$asArray();
var User = {
create: function (authUser, username) {
users[username] = {
md5_hash: authUser.md5_hash,
username: username
};
users.$update(username, {
md5_hash: authUser.md5_hash,
username: username
}).then(function (dataRef) {
dataRef.setPriority(authUser.uid);
setCurrentUser(username);
});
}, // end of create method
findByUsername: function(username){
if(username){
return usersdiv.$getRecord(username);
}
},
getCurrent: function(){ // retrieves current user
return $rootScope.currentUser;
},
signedIn: function(){ //checks if user is signed in
return $rootScope.currentUser !== undefined;
}
}; // end of User
// so that we can pull info about user when logged in
function setCurrentUser (username){
$rootScope.currentUser = User.findByUsername(username);
}
//for logins and refreshes
$rootScope.$on('$firebaseSimpleLogin:login', function(e, authUser){
var queryRef = ref.startAt(authUser.uid).endAt(authUser.uid);
var queryArray = $firebase(queryRef).$asArray();
queryArray.$loaded().then(function() {
setCurrentUser(queryArray.$keyAt(0));
});
});
//logout
$rootScope.$on('$firebaseSimpleLogin:logout', function(){
delete $rootScope.currentUser;
});
return User;
});
You don't need to create a synchronized object locally (what $child used to do) just to set a value in Firebase. You can do this at any time with the Firebase ref you've already created. I can't tell exactly what the data structure of user is since it wasn't included, but something like this:
new Firebase(FIREBASE_URL).child('...path/to/posts').child(postId).set(postId);
Most likely, this belongs on your user object, so that in the Post factory, you can just do something like user.addPost(postId).
I was facing the same problem. As Kato suggested, you will have to use the child function in the Firebase object. I chose to add the post to the user in the Post factory itself.
Adding Post to User
var usersref = new Firebase(FIREBASE_URL + 'users');
usersref.child(post.owner).child('posts').child(postId).set(postId);
The Entire post.js is as below:
'use strict';
app.factory('Post',
function($firebase, FIREBASE_URL, User){
var ref = new Firebase(FIREBASE_URL + 'posts');
var usersref = new Firebase(FIREBASE_URL + 'users');
var posts = $firebase(ref).$asArray();
var Post = {
all : posts,
create : function(post){
if(User.signedIn()){
var user = User.getCurrent();
post.owner = user.username;
return posts.$add(post).then(function(ref){
var postId = ref.name();
usersref.child(post.owner).child('posts').child(postId).set(postId);
return postId;
});
}
},
find: function(postId){
return $firebase(ref.child(postId)).$asObject();
},
delete: function(postId){
if(User.signedIn()){
var postToDel = Post.find(postId);
postToDel.$loaded().then(function(){
var p = posts[postToDel.$id];
posts.$remove(postId).then(function(){
$firebase(usersref.child(p.owner).child('posts')).$asArray().$remove(p.$id);
});
});
}
}
};
return Post;
});
Correct Answer is:
'use strict';
app.factory('Post',
function ($firebase, FIREBASE_URL, User) {
var postsref = new Firebase(FIREBASE_URL + 'posts');
var usersref = new Firebase(FIREBASE_URL + 'users');
var posts = $firebase(postsref).$asArray();
var Post = {
all: posts,
create: function (post) {
if (User.signedIn()) {
var user = User.getCurrent();
post.owner = user.username;
return posts.$add(post).then(function (ref) {
var postId = ref.name();
//a child in user forge should be made with its key as postID
usersref.child(post.owner).child('posts').child(postId).set(postId);
return postId;
});
}
},
find: function (postId) {
return $firebase(postsref.child(postId)).$asObject();
},
delete: function (postId) {
if (User.signedIn()) {
var postToDel = Post.find(postId);
postToDel.$loaded().then(function(){
var p = posts[postToDel.$id];
posts.$remove(postId).then(function(){
$firebase(usersref.child(p.owner).child('posts')).$remove(p.$id);
});
});
}
},
Thus, child can be used at Firebase SDK Level.
Example:
var ref = new Firebase(FIREBASE_URL);
var userArray = $firebase(ref.child('user')).$asArray();
var userObject = $firebase(ref.child('user')).$asObject();
Related
I'm using the Jason project that you can find at this link in my project.
I'm using AngularJS 1.6.4 with WildFly 10 with Java 8 and SQL Server 2014. I can get the login correction, but when I refresh the page the same does not hold the session.
What could be happening? Besides the adaptations I have to do in 'user.service.js', do I have to change anything else to be able to keep the session?
My code user.service.js
(function () {
'use strict';
angular
.module('app')
.factory('UserService', UserService);
UserService.$inject = ['$http'];
function UserService($http) {
var service = {};
//service.GetAll = GetAll;
//service.GetById = GetById;
service.GetByUsername = GetByUsername;
service.Create = Create;
//service.Update = Update;
//service.Delete = Delete;
return service;
//function GetAll() {
// return $http.get('rest/usuarios/login/').then(handleSuccess, handleError('Error getting all users'));
//}
//function GetById(id) {
// return $http.get('rest/usuarios/login/' + id).then(handleSuccess, handleError('Error getting user by id'));
//}
function GetByUsername(usermatricula, usersenha) {
return $http.post('rest/usuarios/login/' + usermatricula + '/' + usersenha).then(handleSuccess, handleError('Error getting user by username'));
}
function Create(user) {
return $http.post('rest/usuarios/', user).then(handleSuccess, handleError('Error creating user'));
}
//function Update(user) {
// return $http.put('rest/usuarios/login/' + user.id, user).then(handleSuccess, handleError('Error updating user'));
//}
//function Delete(id) {
// return $http.delete('rest/usuarios/login/' + id).then(handleSuccess, handleError('Error deleting user'));
//}
// private functions
function handleSuccess(res) {
console.log(res.data);
return res.data;
}
function handleError(error) {
return function () {
return { success: false, message: error };
};
}
}
})();
You can store user data in localStorage when you get response from request as below
function handleSuccess(res) {
console.log(res.data);
// Put the object into storage
localStorage.setItem('userSession', JSON.stringify(res.data));
return res.data;
}
To check if a session exists you can do
// If an object named userSession exists in the local storage
if(localStorage.getItem('userSession')){
// Retrieve the object from storage
var userSession = JSON.parse(localStorage.getItem('userSession'));
}
And then check data in userSession
I'm creating a simple to-do list app with angular and cannot seem to figure out this strange bug. When the page loads initially, if I add tasks to my to-do list, then try to delete one the whole list disappears. However, if I don't refresh and add more task, they will delete individually afterwards. Can someone help me figure out what I'm missing?
Factory:
//Save user in local storage
AccountFactory.saveUser = function (user) {
var users = getUsers();
var index = this.getUser(user.email, 'index');
users[index] = user;
localStorage.setItem('Users', JSON.stringify(users));
return { status: 200, message: 'User saved', data: user };
};
AccountFactory.setCurrentUser = function (user) {
localStorage.setItem('currentUser', JSON.stringify(user));
return { status: 200, message: 'Current user set', data: user };
};
//Delete Task
AccountFactory.removeTask = function (user, task) {
var index = user.tasks.indexOf(task);
user.tasks.splice(index, 1);
return this.saveUser(user);
}
//Get all users function
function getUsers() {
var users = JSON.parse(localStorage.getItem('Users')) || [];
return users;
}
//Get user function
AccountFactory.getUser = function (email, type) {
var users = getUsers();
var account,
index;
for (var i = 0, user; user = users[i]; i++) {
if (user.email.toLowerCase() === email.toLowerCase()) {
account = user;
index = i;
break;
}
}
if (type === 'account') return account;
if (type === 'index') return index;
};
Controller:
function saveUser(user) {
var response = AccountFactory.saveUser(user);
if (response.status === 200) {
var newUser = new User(response.data);
AccountFactory.setCurrentUser(user);
$scope.user = user;
console.log(response.message);
}
}
$scope.removeTask = function (task) {
var response = AccountFactory.removeTask($scope.user, task);
saveUser(user);
}
This code works well with my app but process.env doesn't work from within this function. Is there a way that I can call process.env instead of having to display my keys? If I leave the code as is now, the API call won't work, but if I add my keys it will work. What are my options, or simply why does process.env not work from here as it does on the command line?
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', 'MyYelpAPI', '$window', function($scope, MyYelpAPI, $window) {
$scope.total = [];
$scope.businesses = [];
MyYelpAPI.retrieveYelp('', function(data) {
$scope.businesses = data.businesses
console.log($scope.businesses)
var array = $scope.businesses
var random = Math.floor((Math.random() * array.length) + 1);
// console.log(array[random])
var result = array[random]
console.log(result)
if (2 > 1) {
$scope.businesses = [result]
}
});
}]).factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
var method = 'GET';
var url = 'http://api.yelp.com/v2/search?';
var params = {
callback: 'angular.callbacks._0',
location: 'New+York',
oauth_consumer_key: process.env.yelp_consumer_key, //Consumer Key
oauth_token: process.env.yelp_token, //Token
oauth_signature_method: "HMAC-SHA1",
oauth_timestamp: new Date().getTime(),
oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
term: 'bakery'
// limit: 15
};
var consumerSecret = process.env.yelp_consumer_secret; //Consumer Secret
var tokenSecret = process.env.yelp_token_secret; //Token Secret
var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
params['oauth_signature'] = signature;
$http.jsonp(url, {params: params}).success(callback);
}
}
});
You don't have access to process.env on the client side, that's only giving you access to the Node environment. What you should do is move the api call functionality to the server (node) part of your application, and have your angular factory query that endpoint provided by your server code. There, in your server, you can access process.env, and securely store your env key pairs, thus never exposing them to the public.
A very basic outline (assuming you are developing locally and hosting your api on http://localhost:3000/api may be:
// client side angular code
.factory("MyYelpAPI", function($http) {
return {
"retrieveYelp": function(name, callback) {
var method = 'GET';
var url = 'localhost:3000/api/search';
var params = {
...
};
...
$http.jsonp(url, {params: params}).success(callback);
}
}
});
// node/express routing
app.get('/api/search', require('./api.js').search)
// server side i.e. node code (api.js)
module.exports = {
search: function(req, res) {
var params = {
oauth_consumer_key: process.env.yelp_consumer_key, //Consumer Key
oauth_token: process.env.yelp_token, //Token
}
...
res.json(something);
}
}
I've built a website where users can log in through Facebook, Google, or Twitter, and then their email, name, and profile picture URL will be saved to a Firebase database. Now, I'm trying to obtain the currently logged in user's profile picture URL from the Firebase database, but I have no idea where to start. I've read Firebase's accessing data documentation, but didn't understand it enough to make it work.
This is the function that checks if the user is logged in and then checks if they're an admin. I need to grab the currently logged in user's profile image on the line labeled "RIGHT HERE".
$(document).ready(function() {
var ref = new Firebase("https://mpacares.firebaseio.com/");
ref.onAuth(function (auth) {
if (auth) {
var userRef = ref.child('users').child(auth.uid);
userRef.on('value', function (snap) {
var user = snap.val();
if (user) {
// RIGHT HERE: set the user image src to user.picture
} else {
// TODO: hide the user image
}
}, function (error) {
console.log(error);
});
var adminRef = ref.child('admins').child(auth.uid);
adminRef.on('value', function (snap) {
var user = snap.val();
if (user) {
console.log("You're an admin!");
// enable admin button
} else {
console.log("Sorry, no access for you.");
// disable admin button
}
}, function (error) {
console.log(error);
});
} else {
// logged out
}
});
});
Additionally, you can view my current Firebase app on https://mpacares.firebaseapp.com/.
Here's what worked for me in the end:
$(document).ready(function() {
var ref = new Firebase("https://mpacares.firebaseio.com/");
ref.onAuth(function (auth) {
if (auth) {
var userRef = ref.child('users').child(auth.uid);
userRef.on('value', function (snap) {
var user = snap.val();
if (user) {
$(document).ready(function() {
var ref = new Firebase("https://mpacares.firebaseio.com/");
var user = ref.getAuth();
console.log(user);
var userRef = ref.child('users').child(user.uid);
userRef.once("value", function(snap) {
var user = snap.val();
console.log(user);
console.log(user.name);
console.log(user.picture);
console.log(user.email);
var userName = user.name;
var userPicURL = user.picture;
var userEmail = user.email;
document.getElementById("account-txt").innerHTML = user.name;
$(".account-img").attr("src", userPicURL);
});
});
} else {
$(".account-txt").hide();
$(".account-img").hide();
}
}, function (error) {
console.log(error);
});
I'm looking to create Parse.com roles programmatically because from what I've gathered you can not create parent/child relationships or roles referencing roles in the data browser. I currently do not have any roles in Parse. When I run the following code I get 400 (Bad Request) in my JS console.
$scope.activateRoles = function(){
console.log("activating vendor");
Parse.Cloud.run("activateVendor ", {
success: function (IDK) {
alert("The user roles were activated");
},
error: function (error) {
alert("The user roles were not activated.", error);
}
});
}()
Parse.Cloud.define("createRoles", function(request, response){
Parse.Cloud.useMasterKey();
var admin = new Parse.ACL();
admin.setPublicReadAccess(false);
admin.setPublicWriteAccess(false);
admin.getReadAccess("Uh792HOaqi");
admin.getWriteAccess("Uh792HOaqi");
admin.setReadAccess("Uh792HOaqi", true);
admin.setWriteAccess("Uh792HOaqi", true);
var adminRole = new Parse.Role("admin", admin);
adminRole.save();
var agentRole = new Parse.Role("agent", admin);
agentRole.getRoles().add(adminRole);
agentRole.save();
var vendorRole = new Parse.Role("vendor", admin);
vendorRole.getRoles().add(adminRole);
vendorRole.save();
})
Got to make sure to call success/error. You also want to watch out for making sure to add users to a role that's already been saved. You also can only add roles to a role if the role your adding has already been saved.
Here's what will work:
Parse.Cloud.define("createRoles", function(request, response){
Parse.Cloud.useMasterKey();
var admin = new Parse.ACL();
var adminRole = new Parse.Role("admin", admin);
adminRole.save().then(function(adminRoleSaved){
var promises = [];
var agentRole = new Parse.Role("agent", admin);
agentRole.getRoles().add(adminRoleSaved);
promises.push(agentRole.save());
var me = new Parse.Query(Parse.User);
me.get(request.params.id, {
success: function(me) {
adminRoleSaved.getUsers().add(me);
adminRoleSaved.save();
},
error: function(error){
}
});
var vendorRole = new Parse.Role("business", admin);
vendorRole.getRoles().add(adminRoleSaved);
promises.push(vendorRole.save());
Parse.Promise.when(promises).then(function() {
response.success();
}, function(error) {
response.error(error);
});
});
});
cloudcode : add child role to parent ... sample working code but maybe not your best implementation... its parse/backbone/marionette impl.
Parse.Cloud.define("addrole", function(request, response) {
var roleParent = request.params.parentName;
var roleChild = request.params.childName.trim();
var _role , _chrole;
var _error = {
};
var _errorch = {
};
var _errorparm = {
};
var cst = {
parent:"parent",
pid:"pid",
child:"child"
};
if(roleParent == roleChild)response.error(_errorparm);
var cst1 = "parnt";
var qp = new Parse.Query(Parse.Role);
qp.equalTo("name", roleParent);
var qc = new Parse.Query(Parse.Role);
qc.equalTo("name", roleChild);
Parse.Cloud.useMasterKey();
qp.first().then(function(role) {
_role = role;
if (typeof _role === "undefined") {
return Parse.Promise.error(_error);
} else {
cst.parent = _role.get("name");
cst.pid = _role.get("objectId");
return qc.first();
};
}
).then(function(rolechld) {
_chrole = rolechld;
if (typeof _chrole === "undefined") {
return Parse.Promise.error(_errorch);
} else {
cst.child = _chrole.get("name");
console.log(cst);
_role.getACL().setRoleReadAccess(_chrole, true);
_role.getRoles().add(_chrole);
return _role.save();
}
}).then(function(hello) {
response.success(_chrole.toJSON());
}, function(error) {
response.error(error);
});
});