So I'm rather new to the meteor framework and JavaScript in general, but I'm working on a little project using the framework to try and bring myself up to scratch. Basically I'm working on a micro blogging site.
At the moment users are able to log in through several services, fb, google etc. And I retrieve their avatars via the service id inserted into the needed url, all this works fine. But I want the user to be able to see their own avatar as soon as they log in which means I need to run some JavaScript right after login is successful. At this point in time I cant find anything on an onLogin style event. And have hacked together a handlebars template to run the code when a user logs in. However this code appears to only run once and if a user logs out and then back in they don't see their avatar anymore.
Does anyone know of an event I can use to do this?
here is my hacky template
{{#if currentUser}}
{{> userInput}}
{{/if}}
here is the js it calls
$('#inputAvatar').css('background-image', 'url('+avatarUrl+')');
I would really appreciate the help, I'm sure it's something simple that I've overlooked but I cant seem to figure it out!
Thanks, Peter.
I don't know if the way you're doing it is the most appropriate but personally do the following on the client side to detect if a user logged in:
Tracker.autorun(function(){
if(Meteor.userId()){
//do your stuff
}
});
If you are using google login or any other o-auth login, you can pass a callback function which will gets execute after login,
Here is the sample code.
Meteor.loginWithGoogle({
requestPermissions: ['email']
}, function(error) {
if (error) {
console.log(error); //If there is any error, will get error here
}else{
console.log(Meteor.user());// If there is successful login, you will get login details here
}
});
Related
I'm hoping to be able to create a section of a site that is unable to be read/seen by anyone that's not logged in... I am using Firebase and Javascript
I have read that you are unable to set permissions for files (.htmls ect) so i wont be able to block people from seeing the pages as a whole... Ive also read that this isn't the best practice anyway... So my question is...
What is the protocol for doing this sort of thing? And how can this be done in Firebase?
I have managed to create a user only page before from a tutorial, but this was just done by hiding the content of the page with Javascript and also blocking the permissions to the displayed data through Firestore permissions.
But I don't feel this is adequate for my site as I don't want people being able to read the code in the background or get access to the page at all to begin with.
I have also read that a way to go about doing this is to use Firebase Cloud Functions to check weather the user is logged in and if they are then it spits out the code for the pages from the google servers. Is this a good idea? Or is there a better way?
Any help, tips or insights would be greatly appreciated.
Just trying to get a feel for where to begin with this problem.
Hoping there is a solution.
Thanks
Yes, its a good practice hiding or preventing the UI to be rendered for unauthorize users.
Yes, its also a good practice setting the permissions accessing your data from the database.
You should also consider middleware, navigation guards or route guards for preventing unauthorized users to visit the restricted page. It would depend on the stack, or what frontend technology you are using. You can find whatever navigation guard you chosse. For vuejs there is vue-router. Also you can use firebase authState listener. Depends on your choice.
Use firebase auth to signInWithEmailAndPassword, or whatever your authentication method was. Then, you can check the auth state in onAuthStateChange, and set your new userId state:
// somewhere...
const [currentUserId, setCurrentUserId] = useState(null)
// later..
onAuthStateChanged(auth, (user) => {
if (user && user.uid) {
setUserId(user.uid)
}
});
// even later in this component:
return (<Layout userId={currentUserId} />);
// in wherever you have links, I assumed you passed currentUserId to here:
return (
currentUserId != null ? (Give content pls) : routeToLogin();
);
Something like this should be fine and secure enough. Noone is gonna go and flip a variable in your extremely obfuscated, transpiled javascript code generated by your bundler, and even if they did find a place to flip a variable, the code would probably throw an error anyway.
You could lazy load that certain page as well once authenticated, then the code for it it wouldn't even be loaded into the users disk until they've successfully signed in.
I'm using a Javascript SPA to return a query from Microsoft Graph through the Azure AD application, and it works just fine!
The problem is when I try to loggout from the application, it says I was successfully logged out but if try to log in with another user, it logs into the previous one, in this case, me, without even asking for password.
I needed that this application could log in just few people in my organization, but anyone with "#example.com" can access my application, without the need to be signed to it or not.
I've already cleared the browser's cache and cookies and it doesn't work. Already configured the app to store the cache in the session but it also failed.
The code I'm using is available in:
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa
The only differences are that I'm using another querys instead the "https://graph.microsoft.com/v1.0/me" and the permissions needed to get them.
I just needed a way to choose specific people to log into the application instead of all the organization and to fix this logout problem.
If I understood you well, I believe your solution is the option select_account.
Here is a code snippet to illustrate:
const clientApplication = new Msal.UserAgentApplication(config);
const loginRequest = {
scopes: [config.webApiScope],
prompt: "select_account",
}
clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
//your code
});
I'm trying to build a login portal with accounts-password. I have the registration working properly, where users are being created with custom fields in their profile.
I am running into an issue where once I try to log in with the created user, i am getting a Login Forbidden error. I understand that I need to do validation and return a truthy value based on "Login Forbidden" when using Meteor's Accounts.validateLoginAttempt(func), but even when doing something like the following is still giving me an error
Accounts.validateLoginAttempt(function (options) {
return true
});
Is there any examples on how to build a login validation function with basic information? I think I can work with my custom fields after that but a starting point would be great. Thank you
For some reason removing accounts-base did the trick. Not 100% sure why
i have a little problem with Meteor and Twitter.
All i want to do is posting a tweet through a click on a button. For this I have to authenticate myself over Oauth to the Twitterservice.
At the moment i am doing the authentification in a really complicated way springing from client to server and back. But now I found the function Meteor.loginWithTwitter. Originally I thought this function is only for logging you into your own application with the Twitterkeys, now i am not so sure anymore. Probably I can also use it for my problem. Because it seems that the Oauth-Process is completely (and in a simple way) implemented in Meteor.
Sadly i cann't find any documentation or examples for just logging in and getting the final oauth_token. And so all i got from Meteor back then i try the following code, is this errormessage:
Erromessage: Accounts.ConfigError {message: "Service not configured"}
Meteor.loginWithTwitter( function(err){
if (err){
console.log(err)
}else{
console.log("yeah");
}
});
I know i have to enter somewhere my Appinformation like the Consumer key, but i have no idea where. Can someone help me out and knows some examples for me? Or knows if i am even on the right track?
Thanks and greetings
Philipp
The easiest way of doing this: Add the accounts-ui package:
meteor add accounts-ui accounts-twitter
and in your template do
{{loginButtons}}
On the first start of the application, a click on the login button will guide you through the setup process. You will create a Twitter application and copy the consumer key and consumer secret into a form, that meteor presents you. Afterwards you can log in using Twitter.
Make sure to use the latest Meteor version (0.5.2 at this moment)
You can also config your consumer key and secret with code, this is an example with weibo but its work for twitter, google etc... (server side) :
// first, remove configuration entry in case service is already configured
Accounts.loginServiceConfiguration.remove({
service: "weibo"
});
Accounts.loginServiceConfiguration.insert({
service: "weibo",
clientId: "1292962797",
secret: "75a730b58f5691de5522789070c319bc"
});
You need to add what #Tom31 suggested in your server side, i.e., I have a /server/server.js
Accounts.loginServiceConfiguration.remove({"service": "twitter"});
Accounts.loginServiceConfiguration.insert({
"service": "twitter",
"consumerKey" : "<yours>",
"secret" : "<yours>"
});
Finally, your access token are stored in your user at the database but this information it is not propagated to the client and, if you want to have access to it, you new to create a server side method and access it through Meteor.call or Meteor.apply
Updated: Example of my server side method
I've created my server side method like this:
Meteor.methods({
...
userGet: function(id) {
return removeSensibleFields( Meteor.users.findOne({ _id: id }) );
}
...
});
where removeSensibleFields is a method to remove all unnecessary/private information that may not be sent back to the client
I'm getting conflicting results between the facebook javascript SDK and the python requesthandler variables. The Javascript SDK says my user is not logged in, which is correct, while my template variable that comes from the base request handler says that my user is logged in and displays the name of the user. Is there enough info to tell what is wrong or should I paste the code I think is relevant here? A link to the login page that has the error is here. The example I used is called the runwithfriends demo app from facebook and everything with that app worked except using the logic from the app just from a website without requiring the user to be in the iframe of the app.
Plus I can't seem to get the real-time API working. I can only save userID and not refresh user data - why? I have the code but I'm not sure what's most relevant but here's some of the request handler, the relevant code is basically exactly the same as the one from the demo app:
def render(self, name, **data):
logging.debug('render')
"""Render a template"""
if not data:
logging.debug('no data')
data = {}
data[u'js_conf'] = json.dumps({
u'appId': facebookconf.FACEBOOK_APP_ID,
u'canvasName': facebookconf.FACEBOOK_CANVAS_NAME,
u'userIdOnServer': self.user.id if self.user else None,
})
data[u'logged_in_user'] = self.user #variable that is the problem
data[u'message'] = self.get_message()
data[u'csrf_token'] = self.csrf_token
data[u'canvas_name'] = facebookconf.FACEBOOK_CANVAS_NAME
self.response.out.write(template.render(
os.path.join(
os.path.dirname(__file__), 'templates', name + '.html'),
data))
And even more strange, I can also get the application in a state where the javascript SDK says the user is logged in and the template variable logged_in_user says otherwise. Why are the variables conflicting?
Update: Here are screenshots from the strange login flow. I can go to my page and my name from facebook appears:
Then when I go to next page it also looks alright and has my name
But if I log out then I gets in impossible state: my name + logged out
How can I resolve this strange conflict between js and back-end?
Update: Since I only have this problem for one of my apps I can take what works from my other app and integrate. This page seems to work from my other app: http://cyberfaze.appspot.com/file/20985
Your 'user' is probably referring to the Django user not the Facebook user. Make sure you synchronize the two accounts correctly using a custom authentication backend. It's possible that the accounts get out of sync i.e. if the user switches browsers.
Keep in mind that the Facebook Python SDK will stop working after October 1st unless they update it to Oauth2.0 which is unlikely.
I just updated django-facebook-graph to work with the new authentication flow.