I've set up ASP.NET Identity 2 in my MVC app to authorize users for both standard pages and Web API calls. Simply adding the [Authorize] attribute (with a few fixes) works just fine for preventing unauthorized access, but I also need the ability to get the current IPrinicple in the same way that I would use User.Identity in my MVC views and controllers. There are some things I can accomplish by using it in my views and controllers before they are handed off to Angular, but I also need to be able to read this value for things like creating menus based on the current user's role.
I've considered reading the ASP.NET Idenity cookies, but this requires decryption of the cookie, which I obviously won't be able to accomplish on the client side without revealing the decryption key.
Is there a way to pass off the User.Identity to Angular.js in a way that's consumable by the client side code?
Related
I am reading a website project created on VS 2010 vb.net, where they have implemented a webservice.asmx in the same project to be called in javascript methods. In other words: the webservice is not implemented as API, it is a webservice.asmx where I can add methods to call database, and those methods are used in javascript functions.My questions are:
What is the importance of calling a webservice from javascript instead of making a postback to the server and retrieve data form there?
What about sessions? Does the webservice can view sessions of the user? I am asking this question because I can view some sessions filled as: HttpContext.Current.Session("UserID") = userId.
If it is possible to catch and fill sessions of the user pages, is it possible to have access to controls in asp pages of the same user? And Why?
I am a little bit confused with this webservice, what I know is that webservice runs on a server and is used as API in applications... this is the first time that I work with a webservice and website written in the same project, thank you.
1
Calling a WebService is a lot quicker than doing a PostBack, so if you want to only do partial updates of your website, a WebService is a good option to use (if you'd create the project from scratch, you'd use a Web API instead of an ASMX WebService). Of course, you have to integrate the result into the Web page on the client side. If you want to have asynchronous requests that lead to changes in the UI, you could also use an UpdatePanel on the ASPX-page.
It is also common to host the WebService in the same application as the Web frontend to avoid CORS issues.
2
The WebService can also access the session of the user if you set EnableSession on the WebMethod attribute to true. See this question for some pitfalls.
3
As the request to the WebService is a separate request it does not have direct access to a page's controls on the server (read in C#/VB.NET code), but you can change the HTML document tree on the client by using JavaScript.
If you need to share code on the server between the pages and the WebService, you should create separate methods in a helper/business logic class that are called by both the pages and the WebService.
To give an example, if both a page and the WebService need to get data from the database, you'd move the code for the database access from the ASPX page into a separate class (which is a good idea for many other reasons) and use the class both in the ASPX page and the WebService.
As my App frontend would be in angular. Below is a flow I have considered for the webapp.
User types in the browser http://www.example.com
Server serves a dummy page with no HTML with the only javascript in angular
Now in the code client makes an ajax http get request to may be http://www.example.com/start
Now if the user is logged in server sends a JSON response with the user info
for angular to route into the users homepage. Otherwise, an appropriate response is sent and angular routes into the sites normal homepage with options to log in.
As I am new in angular , I was asking is this a good design and if not how do experts do it?
My problem is not the authentication , my problem is , when I serve static page I have to pass the user info to the client somehow. When client types it in a browser url bar , I don't have any way to capture the response in a javascript code. That's why I have to send a dummy page first so that I can capture create an ajax request to capture the responses in javascript and act accodringly
And also in the angular $http.get does angular automatically sends the previous session info(cookies) or I have to explicitly send it ?
I am using express,nodejs as server in my backend.
Server serves a dummy page with no HTML with the only javascript in angular
You should really read a little bit about AngularJS before you start trying to build out a frontend implementation with it - most specific single-page application design.
This is a great tutorial for building a single page app with AngularJS.
Essentially, you'll need to render some HTML just to load the Angular application and controller(s) required to validate a user's logged in status.
Borrowing some principles from mobile-first design, if you design your interfaces to first look great without data - you'll have a decent experience between #3 and #4 while your AngularJS controller decides whether to redirect the user or adjust $scope to affect the UI in some way based on your business logic.
You can use a ton of different treatments for #3 to communicate to the user the status of the application (in terms of verifying their login, re-routing them to some secure area, or declining their access)
It's definitely possible to do this, but I would recommend against it. Depending on your user base, there are still enough places in the world and devices with network latency and poor rendering capability, so I would not recommend a completely 'empty' page load w/o javascript. At a minimum, have some static welcome text or something that gets replaced when your angular app is done loading.
The cookies should get passed if you configure it correctly, but I tend to use token-based auth for single page apps.
I have the requirement to try out with converting an existing page in the project to use angularjs/bootstrap. Please correct me if I am wrong in my approach.
My project uses asp webforms, where I am planning to change one aspx page(which has grids, radiotbuttons and other asp controls as well ) to use angularjs controls .
What I have understood so far is that we need to have webmethods in the serverside which provide the data for the controls. So what all controls now declared in the serverside is not needed and I need to have the respective html controls in the client side and clientside angularjs calls the webmethod and returns the serialized data to controls in client side.I won't be able to access the server side controls in the webmethod as webmethods are static .
So in short we need to move all the logics that are in the existing aspx.vb for the controls to the client side angularjs code and only thing we can make use of with the aspx.vb is to provide the webmethods to provide data for the controls in client side.
Can someone correct me please ?
All your controls will need to be built using HTML and not ASP.Net controls.
You are correct in saying you will need to bind your HTML controls to the data you have sent back from the server. With regards to the logic of your form, that can sit in an angular service that your angular controller calls.
This will allow your logic to be encapsulated and be called from any angular controller.
You may use WCF, ASP.Net Web API or any server side technology that will allow http requests to provide/modify your data.
Moving a page at a time from ASP(X) to angular is probably a lot of effort. You would first want to start exposing your business logic via WCF/Web Api first and then move your application to use Angular.
I have an AngularJS app running on a node/express backend. I'm using passport for user authentication.
When a user signs in or signs up, my angular controllers communicate with express via $http ajax/xhr calls. The form data is sent, node/express/passport process the data, and they return json data with the user's info (i.e. username).
Angular then uses the user info to update my templates, i.e. {{user.username}}
The problem is that if the user refreshes the entire page, Angular loses this user information. They're still logged in - req.user still contains their info - but angular doesn't know about it.
I'd like to avoid an ajax call just to check if the user is logged in. That'll be an extra http call every new visit...
I can pass the user data to the jade template directly, but that can't be updated by angular later.
I prefer ngStorage
Just check this sample example given below, enter anything you want into the text field and refresh the browser and see
Working Demo Preview
JSFiddle
Since An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.
Differences with Other Implementations
No Getter 'n' Setter Bullshit - Right from AngularJS homepage: "Unlike other frameworks, there is no need to [...] wrap the model in accessors methods. Just plain old JavaScript here." Now you can enjoy the same benefit while achieving data persistence with Web Storage.
sessionStorage - We got this often-overlooked buddy covered.
Cleanly-Authored Code - Written in the Angular Way, well-structured with testability in mind.
No Cookie Fallback - With Web Storage being readily available in all the browsers AngularJS officially supports, such fallback is largely redundant.
I think the easiest way to solve your problem is to use ngCookies.
I am writing a web application in AngularJS with the server code written in Java. The client code talks to server via HTTP API. The web application is mainly to show statistics and basically contain graphs.
The web page contains fields like from-date, to-date and the name of the country for which the statistics are to be shown. So after selecting a few graphs ( say I have a dashboard of 5 - 10 graphs ), the web page provides an option to save the web page's state, so that, I can open the page with the same graphs still being shown. i.e., I need not have to select the name, date, etc. again to have the dashboard of graphs.
I can easily contain the from date, to date and name in Angular models. But to save the page and reopen again, I need to persist the model data into some storage media and upon reopen, I need to read from the storage media and populate the Angular model, right?
How can I do this? Should I go with some frameworks, like django, etc. where I have a separate database server such as sqlite running? But I don't want such a complicated work. I need to have the simple client side coding ( HTML + JS ) and keep it neat.
Is there a solution for this?
Angular is a client side framework. In order to persist or retrieve data you'll have to use a server-side data base. Talk to it via a RESTful interface using $resource or $http.