I'm converting part of my Python Flask application to be used as a kiosk via a progressive web app (simplest way I've been able to find to deploy it as an "app" to my managed tablets). What I'm struggling to wrap my head around is how to handle registration/assigning a device to a group so that when the app is downloaded, it caches the correct group information. Currently, my web app expects group info to be passed as a request parameter and then renders the correct information. Normally I can give that link to a client and they're good to go.
Here's expected setup process:
New tablet is provisioned, put into group and group policy loads Example PWA onto desktop.
Client receives new tablet, loads Example PWA
Example PWA looks for a registered device ID (UUID) and can't find it so redirects user to registration endpoint.
Client logs in with credentials, configures settings.
UUID is generated on the device (or server), saved on server side and saved in localStorage client side.
Client logs out
PWA now sees it's registered, requests resource from server (start_url) and renders correct landing page for the client based on device UUID.
End users can now use the kiosk
Is there a way to do step 7 without rewriting vast swaths of code to be driven by JS. What's the easiest way to get a uuid to the server so the right content is loaded? Ideally, I'd like to pass the device ID in the header but I think that means I have to intercept every request to inject that but I can't find a good tutorial on doing so. Suggestions?
I ended up pointing the start_url to a dedicated landing page and storing a uuid for each new device in IndexedDB while modifying the Fetch event listener to add that uuid (device_id) to the headers. New devices won't have a device ID, so server side for the landing page sees an empty device ID and redirects to a registration page. If device ID exists, it looks that value up in the database and redirects to the real start page for that client.
Related
I hope you are doing well!
We are working on a project that consists of 3 projects/websites. It's basically something like a Management Platform for the resources, a Platform to display information and updates, and a Platform to manage both those platforms. (Something like Office365 and PowerPoint, Word, Excel where Office365 is the main application between them).
In our project, we want to integrate a navigation drawer in which the user can navigate to the different application from our 3 websites without having to re-login. In this case it would be easy. However, would there be a way that if the user access the other website from the browser (ex:"www.exameplwebsite.website2.com") we login the user directly if he was already logged in to a previous application from ours?
We thought about local storage however the local storage and cookies accessible depend on the domain we are accessing.
Is there a way to make this happen? Or would using a navigation drawer the only way possible?
(For context we will be using ReactJS)
I think it wouldn't be that hard with JSON Web Token (JWT) for authentication. When you redirect the user from one site to the other do it with a post request and include a JWT token in it. The new site can capture that token and send the token to the browser and the browser can catch it and saves it into its own localstorage.
I can think of two solutions ->
Use micro frontends (Recommended)
If all three apps have different domain names (app1.com, app2.com, app3.com) then you're right you cannot share any token using cookies and local storage.
Here, You can take the login/signup pages and the navigation drawer into one parent app and load all your other apps using micro frontends.
Use SSO
SAML and OIDC are made for this specific purpose but this is a very complex topic. Basically, your users will need to log in once(at someplace like google or OneLogin or your own identity server)
To provide security layer on top of loading Web Application.
Scenario:
Implement a .exe file (client side) which will ask for a password -
1) If the password is correct - it will grant the access to Web Application to load on browser whenever the URL gets hit.
2) If the password is NOT correct - it will not allow the Web Application to load ever.
NOTE:
1) Running .exe and feeding password is just the one time process (except formatting the system).
2) Later the group/user only hit URL of Web Application any number of time (Loads only when he has filled the password section correctly - one time process)
3) The purpose of .exe is to provide the access of Web Appication only to those group/user who have this .exe file and have that unique password.
Please explain in detailed view.
THANKS in advance.
Not a very regular use case but let me try if I can be of any help!
First thing is you'll need to connect your exe's output with the web application(I assume it will be browser on the client side).
Once the user launches the exe, get the input and validate them by sending a request to your server. If the credentials are correct you'll need to save a file preferably with some auth token or may be username:password pair in an encrypted form on the disk. This is required so that user can use this while accessing the application using a browser.
Now when user launches the application in a browser, ask her to chose the exe's generated file and read the details there(one time activity). Can be done using How to open a local disk file with Javascript?
Once you get the details, store it in the browser's local storage so that you don't have to ask the user to do this exercise again and again.
From next access onwards, if you have those details in the local storage just pass it the server so that it can authenticate the requests. Local storage doesn't have a expiration time so this should work. However it can be cleared using other means. Besides you'll need to take of the security. I would say it's a huge risk to keep the credentials on your local disk permanently.
I have to display a third party site, say site X, upon successful authentication from my existing APIs, as it is, on my web site. But due to certain reasons, I cannot afford to use an iframe, which is the most obvious solution in this case, as that will expose the site X's URL when inspected in browser. So, I landed up on another idea to create a web app whose front end is written in AngularJS and use existing back end APIs written in C#. The application will basically have two pages, login and main page. Upon successful authentication from API on login page, user is navigated to main page. Now main page, I have to show another site. So, instead of using iframe on main page having source as site X, I will display an iframe with source Url as one of my API endpoint, say baseURL/data. So, this API will basically fetch the site X data and do something like server side rendering and return me an exact replica of site X which I will load in my webapp. When user will navigate on site X and route to any path, that route will be sent to same API and now the response will be replica of baseURL/data/route. Even though my API endpoint is now exposed instead of site X url in browser console, I am okay with this because that API is protected somehow and cannot be accessed as it is without proper authentication which I am doing in my case on login page.
I want to get more thoughts on this entire scenario and possible alternatives. Also, if anyone can suggest if/how it is possible to write such an API. I can think about changing AngularJS or C# as technologies in my project but definitely that's not the most go-to-solution for me. Any suggestions and thoughts are welcome!
Edit: I have created a site using a static site generator. I want my users to be able to access that site only if they are 'my users' i.e. authenticated by my APIs. But, that generator is not allowing me to integrate my API and neither I can get the static assets like .html, .css and .js files that I can host on my own server and integrate my authentication API. Hence, I had to think about a workaround like this.
We are developing in-house web-based application for viewing data reports while targeting on smartphones and tablets. Our customer asked us for possibility that only certain devices could access the content. Hence we use technologies based on javascript/HTML5 we are no capable of reading unique ID like IMEI or device uuid. The idea is to be able to automatically create time-independent fingerprint of device with above mentioned technologies.
The question is are we able to create unique device fingerprint with javascript/HTML5?
The clue might be information available or known by browser (e.g. http://browserspy.dk/)
You can use the fingerprintJS2 library, it helps a lot with calculating a browser fingerprint.
By the way, on Panopticlick you can see how unique this usually is.
It looks like the phoneGap plugin will allow you to get the device's uid.
http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html#device.uuid
Update: This is dependent on running native code. We used this solution writing javascript that was being compiled to native code for a native phone application we were creating.
You can use this javascript plugin
https://github.com/biggora/device-uuid
It can get a large list of information for you about mobiles and desktop machines including the uuid for example
var uuid = new DeviceUUID().get();
e9dc90ac-d03d-4f01-a7bb-873e14556d8e
var dua = [
du.language,
du.platform,
du.os,
du.cpuCores,
du.isAuthoritative,
du.silkAccelerated,
du.isKindleFire,
du.isDesktop,
du.isMobile,
du.isTablet,
du.isWindows,
du.isLinux,
du.isLinux64,
du.isMac,
du.isiPad,
du.isiPhone,
du.isiPod,
du.isSmartTV,
du.pixelDepth,
du.isTouchScreen
];
I have following idea how you can deal with such Access Device ID (ADID):
Gen ADID
prepare web-page https://mypage.com/manager-login where trusted user e.g. Manager can login from device - that page should show button "Give access to this device"
when user press button, page send request to server to generate ADID
server gen ADID, store it on whitelist and return to page
then page store it in device localstorage
trusted user now logout.
Use device
Then other user e.g. Employee using same device go to https://mypage.com/statistics and page send to server request for statistics including parameter ADID (previous stored in localstorage)
server checks if the ADID is on the whitelist, and if yes then return data
In this approach, as long user use same browser and don't make device reset, the device has access to data. If someone made device-reset then again trusted user need to login and gen ADID.
You can even create some ADID management system for trusted user where on generate ADID he can also input device serial-number and in future in case of device reset he can find this device and regenerate ADID for it (which not increase whitelist size) and he can also drop some ADID from whitelist for devices which he will not longer give access to server data.
In case when sytem use many domains/subdomains te manager after login should see many "Give access from domain xyz.com to this device" buttons - each button will redirect device do proper domain, gent ADID and redirect back.
UPDATE
Simpler approach based on links:
Manager login to system using any device and generate ONE-TIME USE LINK https://mypage.com/access-link/ZD34jse24Sfses3J (which works e.g. 24h).
Then manager send this link to employee (or someone else; e.g. by email) which put that link into device and server returns ADID to device which store it in Local Storage. After that link above stops working - so only the system and device know ADID
Then employee using this device can read data from https://mypage.com/statistics because it has ADID which is on servers whitelist
Is there any way or possibility to update an apps code and have the client adopt it without reloading the app/website? I mean updating live application code, like adding or removing functionality.
The iPad asks for user permission every 24 hours for fullscreen webapps, for native apps it does not. Once you grant permission it will not ask again but if you reload the app, which you usually have to when you push an update, it will ask again if 24h passed.
We are installing iPads into Taxis and want to track connectivity around the city with geolocation data, but we can't do it reliably since the app would ask the guest for permission. We also would like to provide some location based features but wen can't do it because if one guest says "No", it will impact all next guests since the iPad only allows aksing twice and then you have to wait some time before you can ask for using Geolocation again,
By update the code I presume you mean live code reload or changing the modules loaded on a page without changing it.
This would require you to have an infrastructure library that allows you to either reload or add modules of code to your applications. ncore allows this
Next you would need a communication channel from the server or some other remote end point to send new modules or module reload commands to the client browser.
The concept being that you have a websocket open and you send one of two commands
add module : url
reload module : name
The app in the browser would then either load and add that module from an url or reload that module.
This is basically remote control over the state of an application in a users browser.