I'm struggling to make JSONP request using vue-resource. Can anybody provide some working examples demonstrating the proper way of defining jsonp callback, handling the call within Vue component and so on.
Thanks
**EDIT:**For other fellows, let’s clarify the situation a bit. What was the point - I have a non-authenticated user on the site and I wanted to let him do some action that requires authentication (create post e.g.). However, at the very end of creating post I wanted to show him sign-in modal window, let him log in using social oAuth providers and on successful login, let the post being approved and so on. Problem was that this call from the front-end toward different domains (social providers) was blocked (CORS issue) and than I tried to use JSONP to overcome the obstacle. Trying to setup JSONP call had spent a really lot of my time and finally I decided to go with totally different approach:
At the end of the process of creating the post, a cookie is created, caring the info what was the action that was interrupted with all necessary details. After that, a login modal is shown. Whole login process is done from the server side, and at the end, when identity of an user is confirmed, redirect to initial page is made. Further on, cookie is checked and based on the data, interrupted action continues execution successfully since the user is authenticated now.
#bryceadams thanks again for the answer!
How you handle it in your component will depend on your implementation, but typically it's done in a method - like if you had a form and then on submitting the form you called a method that made a JSONP request.
Here's an example call. Note that the important part is the jsonp option where you set the callback. This can vary based on where you're making the request to. Often it will be callback, but in my case I was working with MailChimp where it was c.
var options = {
jsonp: 'c'
}
this.$http.jsonp('https://website.com', options).then(function(data){
console.log(data.json());
}, function(error) {
// handle errors
});
Related
I've tried following the sample code on the passport-saml site, and the advanced tutorial on the react-admin site for OAuth, but haven't been able to figure out what I need to do with the authProvider to get an authenticated session available in react-admin using SAML.
I can currently log into my app through OneLogin (clicking on the app in the panel) and write out the user's information (inside the passport.serializeUser function), so I know that piece is working, but I'm not sure how to get that information over to the authProvider.
The login function on authProvider is hit when you submit the form, so if I could replicate what OneLogin is sending over when I click on the app, I could probably make that call in authProvider.login and make a custom login page that submits on load rather than waiting for a submit, but that doesn't seem intentional.
What am I missing here, and is there a better option that I'm not considering?
I ended up writing a getUser function on the server and using the authProvider.login function to hit that endpoint, parse the user data off of the response, and store it in localStorage. Then logout removes the user from localStorage, and checkAuth just gets the user from localStorage.
This is working for my purposes at the moment, although eventually I will want to expire the users. Hope this helps anyone else trying to hook up OneLogin with React-admin.
When a user changes a dropdown, I need to make an ajax call to an endpoint, that grabs the data and return it as a JSON.
I can do the event stuff with Vue, to make the request, but how do I guarantee that Vue is the requestor?
I can't really put an API key or something in the JS as that can be viewed through source. Someone could also watch the network tab in chrome and replay the requests to retrieve the data.
Unless you want to ask people to login first, there is no way you can do this. There is a HTTP header you can look for that most libraries add for Ajax requests, but that can be faked as well.
You cannot hide any information from the request you are making. It's the server side on which you can make your code strong. To prevent fake request you can use CSRF token, you need to also validate if the user is logged in, you can check session etc. before you send the result to the client.
I have made an API with Laravel. There are three URLs, one to check whether the user is logged in or not (GET), one to log in (POST), and one to log out (GET).
I tried the APIs with Postman, and they work just fine. The order of my trying is: Check, Log in, check again. The results are False, ID#, True - in that order.
Now, I created a simple UI in React with three buttons, each one calls a function that implements the respective AJAX request. When I check the status of the user after logging in, it always returns False. I don't seem to find where the problem is. Can anyone help?
jQuery's AJAX didn't send the cookies by default, so I had to add an option to the AJAX call.
Added
xhrFields: {
withCredentials: true
}
and it worked.
I'm using Ember-Simple-Auth on an Ember-CLI project, and I'm also using the provided ember-simple-auth-devise authenticator that comes with 3.1. I'm able to login and logout successful, but I can't figure out where's the best place to put the callback (or when the promise resolves) upon successfully logging in. I want to be able to use the data returned by my API on my app after logging in. Any suggestions and advice would be highly appreciated! If requested, I can also provide code samples (although I figured it wasn't necessary since what I have implemented thus far is nothing custom).
Thanks!
When the session is authenticated successfully, the sessionAuthenticationSucceeded action is triggered (see http://ember-simple-auth.simplabs.com/ember-simple-auth-api-docs.html#Ember-SimpleAuth-ApplicationRouteMixin-sessionAuthenticationSucceeded, there are also more actions for other events). So that's a good place to react to the session becoming authenticated.
As the authenticator will set all values the server responds with as properties on the session you could also define additional properties that depend on these - see example here (where the account property depends on the accountId property that's read from the server response): https://github.com/simplabs/ember-simple-auth/blob/master/examples/4-authenticated-account.html#L101
My application has some features that are accessible to all users, and some other features to which access should be restricted to authenticated users only. All these restricted features exists within some set of GWT Places, thus, all Places available in application can be divided into two groups: "accessible for all", and "restricted". In my opinion, places with restricted access, could implement some interface (let's say it would be RestrictedAccess), and if user proceeds to one of them, and it has not been authenticated yet, it will be redirected to the login screen - it's more OO-approach than applying filters basis on URL.
What I'm trying to achieve is:
Information about if user has been
authenticated or not should be
stored on server (it's not something
that could be stored in a cookie...)
Login page is a standard GWT place+view+activity (!)
User name & password validation is done on the server side.
So far, I've introduced RestrictedAccess interface, which is implemented by some set of places. My FilteredActivityMapper.Filter implementation, which is passed to the FilteredActivityMapper wrapping application activity mapper has the following logic:
Place filter(Place place) {
if (place instanceof RestrictedAccess && !userHasBeenAuthenticated()) {
return new LoginPlace();
}
// return the original place - user has been already authenticated or
// place is accesible for all users
return place;
}
private boolean userHasBeenAuthenticated() {
// remote call - how to do ???
}
The problem is with userHasBeenAuthenticated() method (user should not be redirected to the LoginPlace, if it has been already authenticated). If I want to store this information on the server-side, I have to do GWT RPC/request factory call here, but both are asynchronous, so I cannot work on its result in the filter method.
I know that I can use web.xml filters or some external framework (e.g. spring security), but none of this approach allows me to have login page as a standard GWT - based form, or indicating in the more OO way that access to some place should be restricted.
Thanks in advance for any hints
EDIT: I've started to wondering if places filtering (restricted/not restricted) should take place on the client side at all. If, as it was suggested, there is a possibility to hack code indicating if user has been authenticated or not, there is also possibility to hack places filtering code, so that it will be possible to access restricted places without signing in.
Piotrek,
I think there is a security issue with calling userHasBeenAuthenticated() - it would be possible to hack the client side code to return true every time this function is called.
The solution I've implemented is to simply return SC_UNAUTHORIZED if an unauthenticated user attempts to access any remote service. I've overridden the RequestFactory onResponseReceived function which redirects to a login page if the response is SC_UNAUTHORIZED. Idea taken from:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/expenses/src/main/java/com/google/gwt/sample/gaerequest/client/GaeAuthRequestTransport.java
This works for our situation where the Activities and Places are all data-centric - each place change retrieves data from the server. If a user isn't authenticated they simply don't get the data and get redirected to a login page.
I realize your situation is slightly different in that some places are accessible to everyone, in which case you could configure only the restricted services to return SC_UNAUTHORIZED.
I have a similar application with the same requirements. As yet I have not got round to to the implementation but I was thinking along the same lines.
What I was planning on doing is storing the authentication state client side in an AuthenticationManager class. When the app starts I was going to request the login info from the server (I was thinking of running on app engine so I would get the authentication state and also get the open id login/logout URLs) and store this in the AuthenticationManager. Acegi/Spring Security works in a simlar way so this info is available server side if you use those too.
When the user logs in/out they will be redirected by the server and the new state will be retrieved. This should keep the client authentication state in line with the server. Each RPC request on the server has to be checked for authentication too. I was using the gwt-dispacth library and this has some rudimentary authentication checking and cross site script protection in in too (although I think latest GWT has this for generic RPC).
One issue is session timeouts. Again the gwt-dispath library has some code that detects this and returns session expired exceptions to the client which can be intercepted and the auth manager updated.
Hope that makes some sense.