I have create a PWA with VueJS and the plugin workbox.
The user can navigate in the application if is offline with the service worker cache.
I cache the request POST and PATCH if the user is offline, but I would like notify the user in this case.
If I use import or require the service worker sends a error message so I cannot use the VueX store to display a message.
Anyone have an idea to solve this problem?
Related
I have an xAPI content made by storyline I want for the statement to be sent to a webapp instead of the LRS.
this webapp is developped using laravel, and user should be authenticated with email and password to use it.
what I did to send the statement to this app:
1.in the webapp I created an API endpoint route that use POST method.
2.in the xAPI wrapper I changed the endpoint in the configuration to the route I made in the webapp.
const conf = {
"endpoint":"here I added my api endpoint route of the webapp",
"auth":"Basic " + toBase64(""),
}
now whith any interaction with the content where a statement should be sent the request making cors error like in the picture down, I think this is authentication error, how can I add my authentication credentials to the xAPI wrapper?
Your non-LRS LRS is probably not handling preflight requests which are necessary for CORS handling. Most common LRSs will handle those requests appropriately since they expect to be accessed from additional origins. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests
Also note that you'll likely run into issues unless you also handle state requests.
Additionally unless you are requesting the credentials from the user during runtime then hard coding the credentials into the package isn't a great idea from a security perspective.
We have developped a SPA SaaS and went to a soft production launch recently.
Everything was fine until one of our customers told us they had trouble using the app.
Once they open the app, the first request to our backend triggers their proxy credential prompt. Hopefully on the login request.
They have to enter their proxy credentials to let the request go. All subsequent requests are passing properly and they can use the app.
The problem is:
When they stop using the app, close the browser and then come back the day after, the persistent login tries to connect them to our backend, but the proxy credentials prompt is not triggered and the request fails. All subsquent requests fail also.
For it work again, they have to delete all app data in chrome (so the service worker is unregistered, the localstorage and cache are cleared). The next api call will trigger their proxy credentials prompt and they will be able to work again.
So is there any way for the app to know if the proxy is set or not ? Any way of triggering the proxy prompt if not set or whatever ?
I don't exactly know how those proxies work and we have zero access to the proxy settings.
It surely is something with the credentials expiration after some time but that's all we can figure out right now. Maybe we could monitor some params in the request headers ?
We are using VueJS with axios for the requests.
My guess is when user session credentials get expired, your UI is not handling redirection to login page. When the user login for the first time you should store that the user has logged in successfully in browser localstorage. If your server returns 401 error code, you can delete the flag and redirect the user to login page. You can achieve that using meta fields in router.
Check out this link on how to use meta fields https://router.vuejs.org/guide/advanced/meta.html
I have deployed an Express app on Heroku, set my web hook on the address and use my DG agent to make post request to the endpoint on Heroku.
The webhook passes over parameters's body to another web service and that's fine. I need to keep track of the cookie the web service passes back in order to send it back to keep the context of the conversation.
At the moment I am saving a file on the server with the Express's session id (req.session.id) and the cookie value. Everything works if I make POST call via Postman or via form, so let's say the web application is tracking sessions properly.
On the contrary, if I test my webhook with the DialogFlow agent, I receive a new session id per each request to my endpoint on Heroku.
I don't understand why... What am i missing?
I do not believe you can rely on the request from DialogFlow maintaining a cookie for you.
We are using DialogFlow, Google Actions, and Node.js. We retain session information by including data in the response we send back, which we then read when the next request comes in. When writing a response we put our session data (JSON) on the assistant.data attribute. When receiving a request we get session data from the incoming event.body.
We had considered trying to live off a unique ID of the incoming request, such as a user ID or device ID, but did not pursue it.
I have a React app rendering client-side, in which I handle authentication the following way:
Upon loading, the app fires an AJAX request to the backend, basically asking whether the user's session is valid ;
It updates the app's state with the server's response ;
It renders the "/" route accordingly (the homepage if the session is invalid, a dashboard if it is valid).
(Maybe there are better solutions for handling this in front-end applications, I'm all ears if you have ideas)
This works pretty well, but introducing Service Workers into the mix and trying to turn the app into an offline-first progressive web app seems... complicated.
On the one hand, if I don't cache the "Am I logged in ?" request and the app is offline, the app will always render the homepage.
On the other hand, if I do cache the AJAX request, the users will eventually be shown an empty dashboard because their sessions will have expired and the server will be throwing 403s.
Is there a way to handle this effectively?
I solved my problem by taking a different approach: I now persist the state in localStorage.
This way, when the user arrives on the app, he is presented with stale data from his last visit. Meanwhile, a "Am I logged in?" request is fired in the background.
If it is succesful and returns true, the other AJAX requests get fired and fill the app with fresh data ;
If it is successful and returns false, the state is updated accordingly and the user redirected to the homepage ;
If the request is unsuccessful (i.e. the app is offline) the app keeps showing stale data from last session in the dashboard. We don't know if the user's session is still valid, but we can't retreive any data so it does not matter.
One way of doing it is adding a /verifyToken (assuming you are using some kind of token to validate the session) in your back-end api to check if the token is valid.
So you cache your session token. If the app is offline it shows the dashboard.
If the app is online, you fire a request to /verifyToken to check is the session is still valid. If it is then you continue to dashboard. If it isn't you redirect them back to homepage (or the sign in page).
Edit:
When your app is online, you can technically fire a request to any authorized route and check if the response was 403 (in case you can't modify the backend). If it is then you can send them back to sign in page.
I have an API which I consume from a VueJS app, backend is handled through Laravel 5.2.
I have setup automatic session timeout after 15min, but if happens you're in the site and try to do anything, I have a loading screen, and it freezes as you're unauthorized.
I wanted to know if there's any global method to read Unauthorized response when all requests are made.
I don't know what this is called, so I wouldn't know how to properly Google the feature.
I'm using VueJS Resource $http library to manage all requests.
Thanks!
I've finally made my way to the right documentation, it was under Vue-Resource, and these are called Interceptors.
https://github.com/vuejs/vue-resource/blob/master/docs/http.md