I was not sure how to name the question but here is what I need to do and I'm looking for some advice how to handle it architecture-wise. I'm Java / Kotlin developer very familiar with Spring Boot and very basic knowledge of front end as a whole - just so you know my origin.
Here is the flow of my new application:
user retrieves a generated link with lots of params that he can click in his browser
when he clicks on that link I want to retrieve those params in backend, run some longish external API calls & calculations (up to 10 seconds) and then return results one by one (some websocket or server sent events) and present them in SPA application (preferably React) with results nicely presented so he can pick one of the options I calculated, fill out some form and pay for it.
Maybe I'm confused - I've worked with many front end developers but I never thought how to actually "start" a SPA when someone clicks on some URL with params and then handle all those passed params via backend.
Is what I just wrote doable with React rendered on client side and Spring Boot as the backend? Or do I have to use React server side rendered because I have this static URL with params?
Could someone clarify how I should approach this?
Generally when a SPA is hosted on a domain, the webserver will be configured to redirect all requests on all paths to the root url. So it doesn't matter what path on your domain the user is trying to access, the SPA will still get loaded.
Then in your React SPA you inspect window.location to find the path and params in the url. You then call the backend (most likely on another domain) sending it the params via a web request. It then sends back a response with a random key, and continues to start the time consuming process in the background. When results come in, they are persisted globally in a dictionary against the random key (could be to a database, could be held in memory if you only are going to need one back-end server). Then on another API endpoint, the React front end can poll with the random key and get the current status of the processing, displaying it to the user.
Related
I'm new to NextJS.
Is it possible to run client side code for every sub-route in an app? I want to be able to check if a user is authenticated every time they hit a route in the /admin directory.
I'm using firebase for authentication so this would have to be done client side after the auth.currentUser object has been populated. I mention this as I'm aware of next12's middleware functionality, correct me if I'm wrong but I don't think it would fit this use case.
Currently, my team and I have a website up and running.
Our current method of storing API keys is placing them in a .env file. However, this method still allows the API keys to be accessed through this method of inspecting a web page.
API key is visible
Any suggestions or fixes that could prevent this key from being visible to the public?
You cannot hide your keys anywhere in the browser, frontend, or client-side. They should always be on your server.
What you need is a server env with an API, here's how you will do it:
Any request made from your client/browser will be sent to your server.
Your server will then extract the original request URL add the keys
(that were previously stored on your browser) and forwards the
request to the original URL.
And lastly, your server will forward the response received from the
request to your browser.
If the data being fetched is static (not reliant on user input) it can be fetched during build time using the Next.js getStaticProps method and thus avoid being detected in the frontend altogether.
Users will never be able to see the actual endpoints which were originally called during build time to be stored for later retrieval in a lib/ directory.
Next is React-based, so it's relatively "easy" to migrate to from React.
As getStaticProps runs only on the server-side, it will never run on
the client-side. It won’t even be included in the JS bundle for the
browser, so you can write direct database queries without them being
sent to browsers.
This means that instead of fetching an API route from getStaticProps
(that itself fetches data from an external source), you can write the
server-side code directly in getStaticProps.
Take the following example. An API route is used to fetch some data
from a CMS. That API route is then called directly from
getStaticProps. This produces an additional call, reducing
performance. Instead, the logic for fetching the data from the CMS can
be shared by using a lib/ directory. Then it can be shared with
getStaticProps.
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
I am using ionic framework as a matter of course I use angular.js for front end. on the back end, I use spring-boot for data handling and API management.
I have used a single session and csrf token exchange between client and server.
However, I have been asked to use in some sections one extra security control. as an example one section of application can take as long as server is alive. Another section can stay alive till couple of weeks and another section will ask in every single request or every single.
How can I handle this design problem?
Modern webapps use JSON Web Tokens (JWT)
there is also an angular package you can use.
These tokens are sent with every request and contain arbitrary information about the user or other data. They are issued by your API on successful login and stored in your frontend. The issued token is then attached to every request header when requesting your API. You can then in the backend decode the token and determine if the user has all the required rights to continue, if the token is still valid our outdated for your different use cases.
I am not familiar with your backend solution but i am sure you can find some jwt packages for it or implement an easy solution yourself. (Googling for spring jwt gave quite some results)
When user clicks "Share on Twitter" button on my site, I'd like to prepopulate that tweet with an image (let's assume that image is served from my server).
It would be great if I could do it with Twitter's web intent, but that's apparently not possible: https://twittercommunity.com/t/tweet-intent-with-image/18740
It seems like I could use Twitter's POST media/upload API, but in that case I would have to implement 3-legged oAuth authorization? It also seems that is not possible to do it directly from the client (due to CORS issues and I'd have to expose my app's secret key in JavaScript code).
So I guess for this to work I'd need to have some server as middleman between the client running my API and Twitter's oAuth provider?
Is there any service that you could recommend that takes care of it - I found about oAuth.io, I guess they act as a described middleman?
The third possible approach I found would be via Twitter Cards. Is it possible to make it work since I dynamically generate the content via AJAX calls?
This lit a beam of hope in me, but I'm not totally sure what it means yet: https://twittercommunity.com/t/crawler-ajax-escaped-fragment-support/16129
My actual situation: I'm developing an Angular app that displays Highcharts charts and I'd like my users to be able to share their screenshots.
My current high-level idea is: Highcharts' export feature sends request to their server to generate the image, it creates an image and serves it there for 30 seconds - and I'm given it's link in a callback on client.
Now I can store that image somewhere else (my or Twitter's server?) and then we come to the problem described above.
I'd be grateful on any advice how to do this in a most elegant way that would also be as frictionless as possible for the users. (e.g. oAuth requires that they authorize the app to post on their behalf)
I am trying to use Play 2.x with backbone.js for a project. My intention is to create RESTful APIs at the server end (all response bodies are in JSON and all request bodies are in JSON also).
I would like to use Facebook OAuth (server side) to authenticate my requests. For this purpose I'm using play-authorize for OAuth. The issue I am having is that the user session information is stored in the Session Object in Play. I don't really want to use play-templates in my HTML code, how can I use the Session Object on the client side without the play-templates.
Also what measures can I use to prevent CSRF/XSS attacks while using Play.
Maybe I'm misunderstanding your question, but be aware that Play is stateless. That means that the "Session" is stored in a cookie that gets sent to the server. You can store string values to that cookie and access them from the browser.
Now, you don't want to store critical values in there, but something that the server side code recognizes and lets you work with to solve your problem.