What is a proper way (best code organization) to get user object from JWT in storage on full page refresh (it requires new ajax request) ?
How can I perform an ajax request before my angular app's routing start?
Adding an extra request in resolve part on every route is bad (DRY). How I can simplify that?
Is an abstract view (using UI router) with resolve best solution?
It is a good practice to use ajax with jwt for user experience.
you can set your user object to $rootscope once then use in any route.
using resolve with ui-router is perfect way for your situation as i think .
Related
Let's say when you send a request to this url: ...?query=something&filter=another_thing, I am returning a web page with model attribute let's say model.addAttribute('result', resultList) then just for loop the result and print the values. (Template resolver could be jsp or thymeleaf, but there is no option to load resultList without model fashion - I mean there is no ajax request - )
What I want to do:
before loading the result (or loading the page), I just want to load google recaptcha.js first and
recaptcha will return a token,
then I will send token to the backend via ajax request.
After all if request is not bot, I will print the resultList
Is this requirement possible to implement inside the Spring boot application itself?
NOTE: I could not find anyway to do this. I just though that I could intercept the original get url then redirect to the another page, and this page will load recaptcha and send the token to my backend. If it is not bot then redirect to the original get url. However I do not know how to preserve original request
You're framing it slightly wrong, which may make all the difference.
When making a request, you want to make sure that request is authorized, before you handle
it.
That is where a recaptcha comes in.
To prevent unauthorized access, look into spring-security and recaptcha for that.
Once sufficient authentication has been achieved, your request will then enter your controller, and you can serve the page.
(of course, you could look into it doing it dynamically, but that will be a bit harder)
I have more conteptual question, how exactly should I handle social login in my project.
The use case is that I would like to allow user to login with Facebook, and keep on my backend information about this user (email, firstname, lastname)
I have some proposal Flow, but I'm not sure if it's a proper approach.
Let's say that I have application architecture as above. Now I would like to explain step-by-step full success flow.
Client (Vue application) make a call to AuthProvider (Facebook)
AuthProvider returns access_token
Client after reciving access_token make a call to backend endpoint like /fb_profile with access_token and userID (?)
Backend make a call to AuthProvider to check if given by client access_token is valid or not.
AuthProvider returns information about user. Backend after getting information about user, save it to database and generate new JWT token
Backend returns generated token to user
Now my question is - Is this good approach? Or should i handle it in other way? Like keep more logic to backend part? Instead of make a call to Facebook from Client, maybe should I make a call to backend, and backend make a call to Facebook?
You seem to be on right track. There could me many ways to do the same thing, here is the way which is working for me using vue/laravel/passport/socialite/github.
Trigger redirect in controller from frontend,
Provider(here github app) is triggered in browser with its url using client id/app name saved in back end config/env. Fill out your login details
It will redirect as created in provider and configured in backend-> show it on frontend, in my case its
http://localhost:8080/authorize/github/callback
From frontend now trigger callback in controller, it will check if user details already exist and will insert if its first time user as per logic. Then it will send back access_token to frontend which can be used in frontend for all the operations
DB
The above will be the sequence of the request flow ( same as yours ).
This would be the standard practice we used to integrate with Facebook. In this case, I strictly advise you to use the JavaScript SDK for Facebook.
Refer below link in case if you run into the following issue:
Vuejs component wait for facebook sdk to load
I'm starting to build a next.js application and i'm using redux.
I read a lot about authentication in next.js and specifically with redux.
Let's say I have a /login page and a /private page.
And my redux store contains isAuthenticated state.
So, as i see it, i need to think of the following scenarios:
When navigating to /private through the address bar (SSR) , i should redirect to /login.
When already in /private and the isAuthenticated changed to false.
After logging in successfully in /login, update isAuthenticated state and redirect to /private page.
Did i miss some important possible scenario (UX and security wise)?
Regarding those cases, I have a few questions for the experts here:
For scenario number 1, i implemented an authentication check in getinitialprops (only when ctx.req is not null). If the user is not authenticated, i redirect him with 302 response to the /login page. Is that ok?
About scenario number 2, where should i implement this logic? What is the best practice? I can think of implement the check in getinitialprops, in render() function, in componentDidUpdate...
Should i redirect after calling the redux action (authenticate), or in the redux action?
Should i fire the login request from within the redux action or in the handle function in component, and on success call the redux action.
When redirecting, should i use Router.push or Router.replace?
Please help me to understand the best practice once and for all.
This is based on experience:
For scenario number 1, i implemented an authentication check in getinitialprops (only when ctx.req is not null). If the user is not authenticated, i redirect him with 302 response to the /login page. Is that ok?
Yes, this is okay. It does what it needs to do.
About scenario number 2, where should i implement this logic? What is the best practice? I can think of implement the check in getinitialprops, in render() function, in componentDidUpdate...
Definitely getInitialProps. What we did is we made a helper that can be used by both SSR and CSR components. What the helper does is it accesses the Cookies for both instances, that way, the auth state is consistent. There could be better ways but this is how we implemented it.
Should i redirect after calling the redux action (authenticate), or in the redux action?
Depends on your team's protocol. For us, all side effects such as redirections, are allowed to be done inside the Redux Sagas.
Should i fire the login request from within the redux action or in the handle function in component, and on success call the redux action.
I would suggest using Sagas as it is much more cleaner and gives you another layer to keep all your sideeffects in. But in your case, I would suggest keeping the actions clean and just do what it needs to do: change the state.
When redirecting, should i use Router.push or Router.replace?
I would suggest Router.push. Using replace would overwrite the top of the route stack and that may lead to undesirable effects when hitting back or what not. This would depend on your requirements should it be concerned about what happens when you hit back.
Don't overcomplicate things. Make it work and find better ways to do it after you actually make things work.
Maybe this is not possible...
I have one site, we'll call it club.com
And I have another site called store.com
I have control of both domains. club.com is powered by a Django project, and store.com is a shopify site.
If you're a member of club.com, you get a discount on store.com
We want to do it so that integration is seamless. No need to enter your club.com credentials to store.com, we want the page to do that for you.
How do I implement this?
I already tried simply putting an ajax call on store.com pointing to club.com, and it seems to work with one exception: The browser is not sending the proper cookies along with the request, so when club.com gets this ajax request it can't authenticate it.
You should consider OAuth2 to achieve what you need.
New to AngularJS, and trying to hit a web service with basic auth using either $http or $resource. I haven't written any services or directives and basically just trying to do a call in my controller. Initially I prepended my url with the user/pw separated by an '#' symbol and I also have a callback that does a console out on the returned payload. Now I'm trying to change the $http.defaults.headers.common['Authorization'], but I feel like I should be using $resources. Any assistance on how to do basic auth with $resource (or $http) would be greatly appreciated. Thanks.
$resources is a higher level abstraction that utilizes $http, so regardless of which one you choose to use, adding the Authorization header is a valid solution. Head over to the angular $http docs for information on how to do that.
If you're doing anything more than hard coding a user/password into your application, you might want to take a look at response interceptors as a way to catch 401s and have your user log in. I've studied this blog post in the past when I was looking for a way to build fluid authentication into my app. I'd definitely recommend it if you're thinking about going down that path.