Is there a blog, project, gists or seed out there using angularjs and requirejs that provides authentication not based on routes? I'm working on building a site that will show the user the same rendered view, but different data fed from the server based upon their authentication. I have session handling already written into it, but I need angular to check the server for the session on the initial render for changing login buttons to logout and getting only the data the user wants to see that they've selected.
I attempted to use the angular run method to initially grab the session from the server, but when using requirejs, my app module doesn't exist at the time of calling the run method.
From my understanding, please correct me if I'm wrong, I should be creating an injector or using the $rootScope to carry the user information to routed controller and show the user what they is related to them. If so, then I need to have a service that is initially fired during the project instantiation to retrieve the user's session data. I'd prefer to not use the servers template rendering to put the users session data into javascript if possible.
Related
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I'm writing a single-page application in AngularJS that needs to know, whether user is logged-in before running any routes at all.
I'm using Django backend, which supports anonymous sessions, so just looking at cookies I can't figure, if user is logged-in or anonymous. So, to find that out I want to make an Ajax request to backend in Angular application-global .run() and delay any execution of angular application until that request finishes.
How do I do that?
Create a directive that you can put on each view. Our project has a base view using razor so it makes it easier. Let the directive wait for the promise and only make the content visible when it is resolved.
I tried to google the following question, but nothing came up (which is super weird I need to).
What is an Agular app lifetime in a browser?
Or to rephrase when a user opens an Angular website, the app instances in the browser and stays live until the user leaves the website or closes the browser or?
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
Thanks!
What is an Agular app lifetime in a browser?
The angular app persists while that particular tab/site is open. If you navigate away from it and then back to it, for all intents and purposes, that's a fresh instance of the application. You could mimic a persistent session but that would entail a custom implementation on your part.
Here is a post on preserving data on a refresh of the application that you might be interested in - AngualrJS: sustaining data on html refresh
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
This is well documented and you can find myriad sources both here on SO as well as the internet, but it's better to use an angular service to share data among various controllers. It's not recommended that you pollute the $rootScope if you can avoid it.
Here is the same question asked on SO with solutions:
angular set a variable accessible to any scope
How to use variables from a controller in another controller in AngularJS
If you use angular's routing or another way to load views that doesn't reload a page, then an angular application will stay active until you leave the page (closing or refreshing).
Every time you load a page through angular its controller's data is in its initial state so any modification to a controller's data will get lost when you change page (unless you persist it somewhere, that is)
Regarding your second question, the best way should be to get a user's data after every page change (to check if the user is still logged in. Saving a user's data client side without checking if it's still valid might be a security issue). But in any case, a service is a better way to store data than using rootScope
I am using adapter-based authentication that I am trying to implement using AngularJS. I have a single realm that protects the application, and all procedures. I've defined a Login Controller that handles authentication related activities:
Note: Testing with MBS on Chrome and Worklight Development Server
$scope.sampleAppRealmChallengeHandler = WL.Client.createChallengeHandler("LoginBluePageRealm");
$scope.sampleAppRealmChallengeHandler.isCustomResponse = $scope.isCustomResponse;
$scope.sampleAppRealmChallengeHandler.handleChallenge = $scope.handleChallenge;
The Login view is the initial view displayed due to issuing WL.Client.connect(), and authentication works fine collecting credentials, and transitioning from the login view to the main menu view.
I cause the connection to the server to fail (by restarting the WL dev server), and then select an activity in the application that will invoke a protected adapter call. I see in the JavaScript console that $scope.isCustomResponse() is reached, but then there is no entry into the $scope.handleChallenge();.
Is there any issues with defining the challenge support in $scope, or is there a requirement that they be defined at the $rootScope level.
Appreciate any advice defining authentication within AngularJS.
Can you add logs to isCustomResponse to actually see responseText/responseJson property of what it's getting? Also - before returning true/false from isCustomResponse log your response. The handleChallenge function is not invoked in case isCustomResponse returns false, so you might be missing some if.
In general you should not define any javascript object that you would like to persist in Angular via $scope. Angular can destroy $scope variables at any time. Instead, wrap the challenge handler in an Angular service/factory definition since these are singletons that persist. This is a good video I would suggest watching for Worklight + Angular. https://www.youtube.com/watch?v=a89W_atlhjg
Started learning backbone.js and require.js.
Not sure how to structure files for web app with user authentication.
Seems it should flow like this:
On app init, query server to check auth session state;
Q#1: where should I be writing this 'after init' session code - in /js/app.js?
Q#2: should I be using jQuery ajax for this, or is there better backbone.js methods (I've seen references to get(), fetch(), toJSON() in examples)?
If success, store auth data in a model (user_id, username, auth_token).
Q#3: how/where do I init this model so that I can access that data throughout modules? ie. I will have a view to display template for 'isLoggedIn.html' that will read "Hello %username%! Logout". I want to access 'username' field from this model. Currently, I see only how to create a new model by referencing it in the view's define[], so I don't know how to access the model that was created during init.
Will use jQuery $.cookies to save and get this auth data, so if user leaves page and returns, I can query server to check session instead of requiring user to login again.
Q#4: how do I include jquery.cookies.js plugin into this requirejs app, so that I can later use $.cookies as usual? Am I supposed to add this plugin to the define[] list? Do I have to add it to the /js/jquery/loader.js file?
Thank you for your assistance.
Edit: I used the files from modular-backbone example to create my web app. So when I am talking about /js/app.js and js/router.js, that's the files I refer to.
I'm in the same situation as well.
I found this post and it seems like the best option to do something before every request is to use this solution.
Before accessing and URL except /login, I'm going to authenticate by cookie or run the login view.
About the way to include other folders (jQuery cookie)- just use the require.js mechanism:
In your main file 'require.config' -> 'paths' add the plugin location (jqueryCokkie:)
In your view under 'define' add the path name ('jqueryCookie') and pass it to the finction
The .js file should be in the following structure (I tried to paste the code example here, but got problems...).