Connecting multiple angular apps for accessing different services provided - javascript

I am new to web development. I am trying to create multiple Angular applications, such as App1, APp2, App3. where App1 and App2 have common features, which i want to add them in the App3 instead of repeating them in both App1 and App2.
For instance the common feature is Authentication. I want to use App3 for authenticating both App1, App2. All three apps are running on different server and i am redirecting to App3 from App1 and App2 for authentication. using
window.open('url', _self)
After the authentication process is successful i want to redirect it to the origin App. It also works fine.
I have some information which i store in local storage during authentication. but when redirecting from one app to another using
window.open('url', _self)
information stored in the local storage is lost.
It will be a great help if someone can guide me a better way to store the information on user browser and access it across apps even when the redirection to other apps happen.

Related

how to allow angular 5 web app to open in multiple tab in same browser

I want to open angular 5 app in multiple tab in chrome.
Is their any method and caching process that can help in this process.
If you try to open angular application to other tab it will behave similar as refresh.
Based on the routing module it will load the component or modules.
If your routing is secured using the guard then it will redirect to base URL or Login page as per the implementation, because it cannot access authentication details from previous tab.
To keep user loggedIn your API must recognize the USER. This can be achieved by Token based authentication or by setting browser cookies.Angular Security - Authentication With JSON Web Tokens (JWT): The Complete Guide

Client cannot access G suit with deployed app

I have deployed my app from app maker and when I have my client access the app through the URL I get once I publish it, the client cannot use the app for its intended purpose.
The app is suppose to take calendar events from their Google calendar when given a specified date, and create folders and documents in the clients google Drive. But when the client uses the UI, nothing happens. I'm not sure if its a permission issue but I have tried giving admin access to clients so they can access/edit any data in the app so I am not sure why the client app does not do anything.
It turns out that the issue was the folder that was specified for the app to place the new folders and docs created by the app was shared to the client but the client had to add it to their drive in order for the app to be able to add folders and docs into the Drive folder.

Managing redirects to a subdomain after authentication in a React/Rails application using React Router

I have a React single page application using React Router that hooks into a Rails 5 API. The Rails application uses devise_token_auth for authentication. I've successfully created an authentication process that stores the user state in a Redux store on the client side.
Each user of the application belongs to a company. Each company has its own unique subdomain (e.g., companya.foo.com, companyb.foo.com). A user should be redirected to their company subdomain after signing in from foo.com. All requests for an authenticated user should keep them on their own subdomain. Users should be redirected back to foo.com when they sign out.
I read that this is impossible with React Router and the browser API but there has to be a way to achieve this. I also saw some .htaccess suggestions but I am unfamiliar with this approach and I'm not sure if this will handle dynamic redirects.
What is the most intuitive approach to solve this problem?
You would need to redirect to the subdomain and pass the authentication token in the params to keep the user logged in

make more than one angular app with the same login page

i am working on a project that contains more than one application.
there are finance app and HR app. i think it is not efficient if i loaded all files for finance and HR for a user that will use only one of them.
i need to split them into two separated applications having the same login page and also accessing the tokens from the login services.
any explanation for how could i separate them , how will route work and ng-view work and also accessing of main app data (tokens).
Have you considered using local storage (I think that might work).
I found this library helpful:
ngStorage
As it allows you to interact with localstorage with usual angular binding. That way you can have both apps read the local storage as they are operating out of the same domain.
It is very simple.
Make your HR and finance two html pages.
Server redirect to each html page by account type.
You can access the same tokens in both html pages because tokens are included in session which is stored in browser cookies. cookies are by default shared in the same domain.
Update
I guess you mean to use the same singleton "angular service" in two different instances of "ng-app".
In this case, I don't think it is possible.
My solution means that don't store the tokens inside an "angular service".(I don't think this is normal way because every new tab will create a new "login service", so every new tab requires a login process)
Instead, store tokens in cookies. Use "login service" to get tokens from cookies. In this way different instances of "login service" will get the same tokens

angularjs - building a login/launchpad that redirects to new app but maintains token info

So far i have on localhost/app1 the main.html page with app.js set up. Inside the main.html i have an a tag that goes to localhost/app2. The app.js contains a generated JWT token (e.g.: containing login or user information). The question is, how can i acces the JWT token on the app2 angularjs application. Using cookies to store the token?
Don't like to use cookies with JWT token style authentication, and don't like to nest app2 inside app1 or load it dynamicly if i make app3 for example.
Right now I'm saving the token with $window.sessionStorage and then referencing from app2 the app.js (calling the module), which works, but is that the correct way to do it? Also any global variables that are set on app.js are undefined on app2.js, should they be inside $window.sessionStorage too?
p.s. Beginner regarding anguarjs and specially this having multiple angularjs apps sharing data :)
First, anything that you want to put into the second app does need to be serialized and "saved" in some way. You can use session storage, local storage or cookies for this task.
The downside to session storage is that it doesn't stick between tabs or in some cases during a refresh of the window.
Also, you may want to use a library to abstract session storage or local storage. I have been using https://github.com/agrublev/angularLocalStorage for my app.

Categories

Resources