Serving images from AWS S3 - javascript

I am having an issue that I cant solve in my head for some reason.
I have a client (Angular) and server (Node). They should run in same domain.
Idea is that when the user is logged in he can change his profile image and store it DB.
Angular client (which is SPA) is served by Apache, however Angular talks to Node.js which runs on different port, but they are running on the same instance.
So, user changes the image which is save on S3 and the link to the image is stored in users DB. When the user is logged in, his image will be shown on the page.
Is there a flow with this design?

Related

Upload image from frontend and display it on user’s profile page

On my website I let registered members create multiple profiles, each of these with their own avatar picture.
On the Create Profile page, I have this input to submit the avatar...
... and get it displayed on the Profile page:
How can I recreate the same, uploading one more picture from Create Profile and display it on Profile page?
I know where the source files for each page are located, but unfortunately I’m unable to recreate it..
Thanks.
You need a 3 step process to upload the image file, store it and send it to the front-end users.
If your app is an SPA and you don't want to reload the page in the user's browser, you'll need a JS process to read the file from a file button and send it to your server (through AJAX as a FormData object for example)
Then your server should be able to handle the formdata object request and read file content from it. Once done, you have to save it in a secure server-side location.
Finally (again in case of an SPA) your server should be able to answer the picture data when the client asks it
The server should be able to give the avatar's URL when asked by the client (with a Restful API for example)
The server should be able to give access to the image when the client uses the image's url

Upload blob to dropbox from client-side javascript

I have an app that runs in the client browser and doesn't have any server side (http/js is served, but nothing posts to the server). the app is redeployed on many servers (iis, apache, nginx, sometimes localhost, sometimes on an intranet) and are served using http (not https). My app generates files such as zip files and pdf's in the clients browser as blobs BEFORE I want to save, so having them navigate away on the same page then back to the app defeats the purpose; and I can't post the generated data to dropbox anymore, since they have to start over... I want to be able to send these blobs directly to files in the end users dropbox (and later google drive).
https://www.dropbox.com/developers-v1/dropins/saver performs exactly as I would like. It pops up. It lets the user authenticate in the popup. It lets the user choose where they want to put my file. But I can't send it a data uri, or base64-encoded data, or a bytearray, or whatever. It only works with files previously saved somewhere accessible on the net. So it does not work for me.
https://www.newfangled.com/direct-javascript-dropbox-api-usage/ shows how I could embed the oauth data, which I don't have.
https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ seems like it should work, except that it's trying to perform an oauth session and it uses the same window as my app (which is undesired).
My current tabs I'm looking at (includes entries from a few years ago, so things might have since changed). Some articles indicate that it isn't possible. Other articles incidate that it IS possible - i mean this particular comment https://github.com/dropbox/dropbox-js/issues/144# doesn't help me much. Neither does "I'll be sure to pass this along as feedback" - was it passed along? To whom?
https://github.com/dropbox/dropbox-js/issues/144
https://stackoverflow.com/questions/30094403/save-input-text-to-dropbox
https://blogs.dropbox.com/developers/2015/06/programmatically-saving-a-url-to-dropbox/
How can I upload files to dropbox using JavaScript?
upload file to dropBox using /files_put javascript
https://github.com/morrishopkins/DropBox-Uploader/blob/master/js/reader.js
https://www.dropbox.com/developers/saver
https://www.dropboxforum.com/hc/en-us/community/posts/202339309-Can-I-save-a-JSON-stream-object-to-Dropbox-file-with-Dropbox-Post-Rest-API-
https://github.com/smarx/othw
Can Dropbox Saver accept data from createObjectURL()?
It sounds like the code from https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ works fine for you, but you want to do the auth in a separate browser window/tab.
If so, I'd suggest just changing that code to use the Popup auth driver instead.

Cache Website after login

Let me explain my situation
I have a website that is connected with mysql to verify login credentials so the user can login to his profile page. I have read about HTML 5 App cache and it suits me,but how can i force App cache to cache files for offline use after the login verification?
I know that i can store (username and password) in javascript but this is wrong because anyone can see the username and password after.
So to summarise, is it possible my Website to be stored offline with app cache but after the login page?
App Cache (or manifest) is a list of files you want to make available for offline. It usually isn't related to being logged in or not.
I suppose, there's nothing to stop you dynamically generating the file after the user is logged in, with all files related to that user. For example, if you have a website where a user uploads art, you could generate a manifest for their collection.
However, when you change the manifest file, the browser will try to redownload everything which may not be the desired effect.
For logins, store a randomly generated cookie.

Deauthentication of user from Dropbox API

I am developing a chrome application for storing encrypted user files. It uses Dropbox as a backend cloud storage file system. For simplicity the user logs in to the app using OAuth2 protocol of Dropbox API. Now for logging out the user I used the /disable_access_token as mentioned on the API page. This revokes the access_token but does not completely logs out the user because the next time I launch the app and click on login the app does not prompts for user credentials hence automatically logging in the previous/same user again.
Same question was asked at this link: Deauthentication through Dropbox JSON API (webhooks) but I did not get a satisfactory working answer over there and because of low reputation points currently could not even comment there.
EDIT: I tried removing all cookies set from the domains of dropbox.com as well.

nest PIN-based authentication and PIN extraction

Background on the Application:
Embedded system that will connect to nest-api as a client to retrieve required data. This embedded system can connect to a wifi network and provides a web interface through which user can carry out authentication.
For authentication, currently the user is directed to
https://home.nest.com/login/oauth2...
and user can carry out the authorization procedure and get an 8-char PIN.
The user is then asked to input this PIN in a text box and submit it to the embedded web server which then requests the access_token (using C platform).
There are two questions related to this issue:
1) Is there a way to carry out request for access_token also from the client browser, and only return the access_token back to the embedded system? Any Javascript code that can request access_token after user inputs the PIN and submits?
2) The second issue is related to lack of automation. The user needs to type the PIN back in the web interface. Is there a way to extract the PIN from the website automatically using some script. For example, open the /login/oauth2 page embedded within another page and run a script on the main page to keep scanning the embedded page until the PIN becomes available (i.e. the user logs in and grants permissions). As soon as it becomes available, it can be copied and returned back to device web and access_token requested automatically.
I understand that this type of automation can be achieved by web-based authentication, but from my understanding that would require a proxy server for redirect URI. The idea is to make the device self-sufficient without a need for maintaining another server.
Yes, see the control-jquery sample code for an example of how to work with OAuth tokens in JavaScript
Nest allows you to use addresses that start with http://localhost or https:// as the OAuth Redirect URI. You can either run a web server locally, or monitor the WebView for a redirect URI pattern of your choice and parse the results.

Categories

Resources