How to extract out several projects into one project using iframes - node.js

In my company there are 3 independent projects written in angular. The customer has asked the company for the following:
create a project which will enable the user to connect to each one of the independent projects.My question is a general question - is iframe the correct technology for this usecase - and what do I need to know when I use iframes for that use case.

This is what we do, the iframe communicates with the apps and gives the token (it is called on init of each app) then you can provide some type of menu (or app picker) inside the header component where the use can choose any app. Keep in mind that the cookies/ls are saved on browser so presumably if the user hasnt logged out and your authentication is setup correctly they should be able to switch between apps just by switching URL's

Related

Microfrontend or how to share smart UI components?

I work in a company where we have many different applications. To reduce code repetition and keep the experience for the users the same across applications we created a component library which is used by all applications.
Now we want to allow the users to switch between applications. Something similar like Google does:
Screenshot of Google Application Drawer
An additional requirement for our "Application Switcher" would be that it "updates" itself. Meaning if we change how this "Application Switcher" looks we don't want all applications which use this Switcher to create a new deployment and be newly deployed.
So currently we use the same header (from our component library) in all our applications. So, my idea was just to simply add a script tag to all the index.html pages of all the applications which should support this "Application Switcher". The Script would parse the DOM, find the header and inject a component for this application switcher. I wanted to host the actual script from a CDN like server and the script tag in the index.html just references this URL. This way we could change this script however we want, and all the applications will always get the latest version.
Now I did a small proof of concept in our environments and solved all the CORS issues but since we were fetching from an authenticated context and the script was also in an authenticated context I always got a 401.
Additionally, we have the requirement, that this "Application Switcher" shows different applications to different users i.e. depending on which apps a user is allowed to access. So, the script itself will also do calls to an "Application Switcher" backend providing it user-specific information.
Now this makes me think that my initial idea of just putting a script tag and fetching from a CDN was too simplistic. Now I'm thinking if it would be better to implement a rest endpoint in all applications to fetch this script. This way I don't have the problems of fetching a resource from an authenticated context from the user's browser and instead can handle all of this in the backend.
So long story short; I feel like a complete noob who just hacks around to get things working (or actually not working) and was wondering if any of the smart internet people out there (who might actually already have experience with this) could give me a hint what would be a clean way to implement this?

Node.JS webapp: Authentication, Create Account, Forgot Password and Change Password

I would like to develop a new web-app in node.js (using express). I am relatively new to node.js world, so I assume there are frameworks that I am not familiar with.
Is there any framework (like Spring for Java) that manages authentication (and save the trouble from the developer)? Or each developer has to write this code over and over again?
Login/Logout is not all. There are other flows:
registration (create account),
forgot-password (and then set new password),
locking/unlocking an account,
change password
and I think I have covered all flows.
I know that each application has its own UI, forms, maybe with its logo, but the flow itself is similar for most applications.
In addition, I know that it is not that hard to implement, but it could be great to have some kind of tool / framework / infrastructure which implements the flows.
Is there such a tool/framework which helps applications' developers and implements these flows?
I've searched this issue but could not find anything.
Thanks!
Long ago I have developed authentication-flows for Java over Spring, and recently I wrote authentication-flows-js.
It is a module that answers most flows - authentication, registration, forgot-password, change password etc., and it is secured enough so applications can use it without the fear that it will be easily hacked.
It is for node.js applications (written in TypeScript) that use express. It is an open source (in GitHub). A release version is on npm, so you can use it as a dependency in your package.json.
In its README (and of course in the npm page) there are detailed explanations for everything and if something is missing - please let me know. An article will be published soon (I will add a link as a comment).
You can find here an example for a hosting application.
NOTE: I have heard comments like "It's not so difficult to implement". True.
But you have to make sure you take care of all cases. For example,
what happens if a user tries to create account that is already exists?
what happens if a user tries to create account that is already exists
but inactive? what about the policy of the password? (too long/too
short/how many capital etc.) what about sending the email with the
activation link to the user? how you create this link? should you
encrypt it? what about the controller that will receive the click on
the link and activate the account? and more...

DocuSign Console within iFrame

I'm currently trying to place the docusign console onto my website. My current method is using an iFrame but I'm wondering if that is secure and the optimal way of doing it. I was also wondering if the docusignAPI has a solution to that implemented already because I couldn't find one after playing around on the website with various code sources.
Preferably, users would be able to go to some part of the website, view the contract or document they need to sign on the website without having the leave the website. This includes viewing the document on the website as well such as using an iFrame allows.
Using iframes to host DocuSign embedded signing is not a good idea for a few reasons.
Typically to have a good experience it is recommended to use a large window.
Security Concerns. The users of your app wouldn't be able to see the DocuSign URL as well as the green check to know they're using a secure website which should make them feel more confident about using your integration.

How to implement and hide admin zone on the website without login/registration system?

I'm new to web development, and I'm currently making a presentation website(home, services, news, vacancies) for a small company. I'm using Node.js,Express and MongoDB.
The client wants to manage certain content on the website, therefore there needs to be a dashboard, where only admins could login/register. But website design does not provide any login/registration system for users.
The question is, where do I put a dashboard and how should I hide it from ordinary users? Should I just use url, like mysite.com/admin, which should be typed by the admin, whenever he wants to get to the admin login/dashboard zone(it seems quite unsafe, since everybody on the internet could type that and get to the login form)? Or maybe I should make a separate desktop app for managing website content?
How should I approach this problem, what are the best practices?
Thanks!
You don't need to reinvent the wheel as i think you can first explore CMS systems and check if the tools covers your requirement . Since CMS tools brings in lot of website admin capabilities as out of the box features.
Following links will get you started.
https://en.wikipedia.org/wiki/Content_management_system
https://en.wikipedia.org/wiki/Web_content_management_system

Yesod - the best way to create users on the web site?

I'm trying to develop a site, where users will be registered directly on it, as opposed to being authenticated by Google mail etc. Beside the usual username/password I need to collect more data from the user - name, address, etc. What would be the quickest way for adding the desired functionality? Short of writing my own Auth plugin I see two options:
Create my own registration form (which I kinda need to do anyway) and use HashDB for storing the passwords and later authentication. However, yesod.auth.hashdb seems to be gone from the latest version (why?) and is only available separately here: https://github.com/ollieh/yesod-auth-bcrypt/ . Is something wrong with it? Security flaws?
Use http://hackage.haskell.org/package/yesod-auth-account - looks much closer to what I need, because it already provides registration page, but it doesn't seem to be supported by the latest yesod 1.2.5 and it is not clear how to integrate my additional fields into the existing registration process

Resources