I wanted to know how people would go about having a sign in page for an Angular app that was completely separate from the app and once authenticated would be passed through into the main angular app. So something like a Signin.html page that once authenticated passed onto index.html.
The thing I can't get my head around is having the moules loaded into the main app on signin.html and how you then handle moving to index.html that has its own modules and whether you can pass user information between the modules on signin -> index.html.
The way my app currently works is a modal for sign in that is part of the main ng-app and simply has the app behind it.
One approach you may want to explore is, provided both pages are from the same origin (ex www.myapp.com/app) you may be able to store authenticated user information in local storage. Upon succesfull authentication, your signup page will save the user information in local storage using $localStorage and will direct the call to index.html. Your index will not have access to whatever stored by signup.html via local storage.
Related
I currently have ionic/angular app that allows users to sign up as varying roles. Based on the role they sign up as I would like them to be redirected to a specific angular component. I have a signup form in my index.html file and the redirect logic in my script.js file however, I don't know how to write the redirect logic. In other words, how do I navigate to a specific component, based on the users role, from a javascript file?
You could load a 'dispatcher' component. And decide what to load next (based on users' role). This component can be smart enough to handle the logic.
I have a challenge that I can't solve. I have made a website with node.js and have all of the code written for the routing including routing for sub-domains. Some location only some users can access, some locations only logged in users can access. I wanted to include a chat for my users so I went along and created one with socket.io and some client side js.
Now I need the site to keep the chat element open which in on a bar across the screen when the client goes to another portion of the website. I have looked into many solutions but almost all of them include some js library like angular.js with the ng-model or ui technique but all include writing code for the client side that handles the url and what to load.
I don't really want to do this method because:
I don't want to re-write all my routes and I am not even sure how to handle the authentication of the users.
I find the client method to be a security issue
My website isn't a single page app, I just want one portion of the website to stay loaded.
Here is some images of what I am wanting:
State 1:
State1
State 2:
State2
Notice that the chat stays but other content was loaded. Also that it went to a different sub domain and a location that is only accessible by logged in users.
Thanks!
I guess you want to maintain state across page refresh, much like e.g. Facebook does. A true and trusted way of doing this is setting a cookie that stores the chat state: open/closed, or store the state on the server. Then on page load, initialize the chat based on this data.
I searched a lot in here, and i couldnt find an answer to the questions I ask myself. Here is the thing :
On one side , I want to have a static landing page (with login/sign up form ), and on the other side, I have an angular app that handles all the things related to the authenticated user. It's like that because my app is kind of "private", so users that cant register or login do not have to load the entire angular app and can't go further than the landing.
On the landing page, the login request hits on my API, and with the given credentials I store the user access token in the local storage, which allows him to do all the future requests inside the angular app.
What I want to do is to have the same URL for both the landing and the angular app. Let's say the base url is www.myproject.com, when I go to this url, depending on if i'm logged or not, i want to be redirected to the landing page or the angular app. It's also based on a "Remember me" checkbox.
So how do I do to share www.myproject.com between the landing and the angular app, depending on the user state ( logged or not ) ? Is it some kind of server routing ? Or can I achieved this with angular ui-router ?
It's only a matter of fanciness, i could also have urls like www.myproject.com for the landing, and www.myproject.com/app for the angular app, but the real problem here is how to do the logged/not logged based routing. If it simpler to explain with two differents urls, I'm interested too.
Thank you for your answers, i feel really lost here !
EDIT
Since ALL the requests inside the angular app need the access token, what if I catch 401 error that i might get from oAuth when entering the angular app, with an http interceptor ? Could I use this to redirect to my external landing page file ?
I don't really need the share of the root url between the landing and the app, all I want to know is : is catching 401 code a good way to redirect to the landing/login page ?
Both Derick Bailey and David Sulc are very conclusive at the time to have the Landing page and auth logic (+ login/signup forms) separed from the actual Marionette app. However, I haven't been able to find any example nor explanation of how should this be handled and thus, I have few doubts:
CHANGING THE INDEX.HTML
The index.html won't be loading the Marionette app anymore. This means that when loading example.com we will end up in a simple landing page even if the user is authenticated (localStorage has his token credentials stored). I understand that this simple landing should somehow handle that if the user has stored credentials, the user should be immediately redirected to a app.html that will actually load the Marionette app, with the users account and the initially accessed route. In other words:
The url fragment is stored.
Check if user is logged in
If the user is logged in, then load app.html which will load the app (how to load the app for a certain route?)
If the user is not logged in, then do nothing
LOGGING IN
In the case the user is not logged in and logs in. Independently of if index.html has the login form or we have redirected the user to login.html, our auth logic has to be independant of the app. This means login.html has to include a .js that will make an ajax call against out API.
User enters credentials
AJAX call to check credentials
If API returns token, then store credentials in localStorage and load app.html (which will load the marionette app)
SIGNING UP
The user signs up at /signup signup.html or index.html if this includes a sign up form. Whichever HTML is loaded, it must include the necessary js logic to make an ajax call to the API for a new user.
User enters new account data
Our independant js makes an ajax call to the API
If creation successful we store the data to localStorage and load app.html (which loads the app)
If not, we show errors
And you'll say I'm missing the question. My question is, are these workflows correct?
Which workflow do you normally use?
How do you structure this code inside the marionette app project folder?
If you know of any simple examples on github on how to approach this I'd be very happy to learn about them!
Well, in case someone stumbles upon this question, I finally decided to have the landing/auth logic inside the Marionette app. This way I keep my backend to be only an API REST, and I don't need of any further backend to serve me more pages.
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.