This question comes from the following post:
OWIN cookie authentication get roles on client side
I've created a separate thread for the question since it is more general than one in the post above.
In short:
Let's say we have a web application with javascript as client side + ASP.NET web api as server side and also an identity server. Only authenticated users can access web api endpoints, some of them accessible only for specific roles of user.
Now the client side of application should show specific items based on what role user is in. For example: user in administrator role can see an extra tab: manage items. There are two approaches to achieve this:
When rendering client side application, one could call an endpoind in web api which would return what roles user have. Based on that result, show/hide items in html.
When application loads, an endpoint, which returns how the structure should look like (for example: json string) would be returned, and based on that structure client application would be rendered. No show/hide html on client side based on roles in such case.
Now regarding 1st point: some could argue that there is a security leak, since malicious user can modify html to see elements that he is not supposed to see. But in this case he will not see any content from database and will not be able to load/update it since he will not be authorized to do that based on his role which is checked in server side.
2nd point seems more valid since we keep all identity related information logic on server side. And also all unnecessary content is not in html (while in 1st point it's hidden) - so that leads to better performance? In this case though if for example developing angular application, the json structure of application should include such information as name of angular controller and route for example. Would that not add complexity to developing application?
Assume that the application itself have a lot of roles and a lot of items should be visible/not visible based on these roles.
Pros/cons between 1st and 2nd? Thanks!
I stick always with the first suggested point.
As you mentioned the second choice will add more complexity for developing. For the 1st there is no security leak. If you don't want your users to modify the html and to access forbidden areas in your application simply use ng-if instead of ng-show. If you are not familiar - ng-if will not just hide the content with display: none;. It will completely remove it from the DOM and this leading the user unable to show that content as it is not in the DOM.
Read this for more detailed explanation for ng-if and ng-show: what is the difference between ng-if and ng-show/ng-hide
I usually have an endpoint getting information about the user - including it's role and save that user into a service (factory). This gives me the flexibility to use it everywhere in the application and check if the user has access or not to certain parts of it.
Related
My name is Alex.
Sorry for my rather bad Englisch because i come from Germany.
I just started programming with Node.js.
Previously i made some small static HTML and CSS websites.
I have some beginner questions (which might be dump).
I think these questions are very general for now and have therefore not included any code examples.
So far I have written a static HTML website which I host locally on my computer using Node.js and Express.
My Questions are:
Which actions within a web application should take place on the client side and which on the server side. For example, I have several buttons on the start page. With the help of which predefined users can log in. When clicking on a button, the user should be redirected to the login page. The user name of the respective user should be entered directly into the username field on the login page.
How do I implement such a transition?
The username would probably have to be passed to the server using a post call. How does the user get to the next page? Should this be a simple link or should I send the new HTML document to the user via app.sendFile()?
For example, how do I change tags in an HTML document using Node.js. The same example as before a user is logged in and redirected to the next page. Now he should be greeted with his name. The name can be read from a database using the UUID.
How do I get this name into a tag?
Do I need a template engine or are there other ways to change a static HTML page.
Thank you in advance for your help.
In my opinion, security-critical parts logic be placed on the server (logging in, checking balance, authorization, etc.).
Traditionally, no code on the client side is required. You click a link/submit a form, which sends a request to a server, the server responds, the client displays the new page.
Using client side code, however, can make your app smoother and reduce the load of the server. For example: the user clicks on the shopping cart button. Instead of reloading the whole page, the user sends an ajax request, and the server responds with the cart data. Then the client updates the document, displaying the formatted cart data.
You can't "change html tags" from nodejs. You can send a response. If you send a html response, you decide how to produce the response. You can just concatenate html strings, but using a template engine is a better solution.
i want to provide role based route access e.g there is two types of user 1.Admin and 2.normal user.
if normal user try to access admin pages through url then user will redirects to dashboard page and same case for admin.
This is quite a lot of code you're asking for.
One thing you need to look into is Route Guards which let you protect access to routes based on your own written criteria:
https://angular.io/guide/router#milestone-5-route-guards
You also need to pick a way to manage your roles and users. A popular way for Ionic is to use Firebase:
https://firebase.google.com/
A great tutorial for setting this all up is over at AngularFirebase.com (currently rebranding to Fireship.io).
It's a long tutorial, and you will need to follow an additional tutorial for setting up the login system as well, but it will get you to where you want to be.
Role Based Authorization With Firestore and Angular
I am writing a simple mailing application, however I am not yet aware of the full capabilities of HTML editing within the mailing world.
I would like to give the website administrator the choice to accept or to refuse a reservation by sending him an overview of the reservation. Below in the mail I had 2 buttons in mind, accept & refuse.
I tried using a form within the HTML e-mail but almost every mailing client blocks this out.
Is there another method to do a http post command to let's say myserver.com/accept or myserver.com/refuse from within an e-mail without having to open an additional webpage?
If not, what is the best way to achieve such things?
This is a pretty relevant article: https://www.sitepoint.com/forms-in-email/
Basically he concludes that support is not reliable so you should not use forms in emails which I agree with.
Since you say you want to give this choice to a website administrator I think you probably want some sort of authentication. So I could see it working something like this...
Send the admin an email containing two links mysite.com/reservations/:reservation_id/accept and mysite.com/reservations/:reservation_id/refuse.
Admin clicks on one of the links
Link opens in the browser and your site(controller -> ReservationService) accepts or refuses based on the id and action in the url
You will have a few things to consider, such as authentication(I assume you already have this since you have the notion of website admin?), authorization(can this admin accept or deny the reservation?), does the reservation exist, has the admin already accepted or denied the reservation, etc.
Cannot phrase correct term or language that I want, so finding hard to search.
Q: From server side, push line of text to user.
Building MVC 4 (asp.net - c# .net4) application. One page will have a "notifications" coloumn which will be a list of new tasks the user should do.
The tasks stored in a database.
When a new task has been added to the database, I want to push a line of html text to this notifications list with out the user having to refresh the page.
Is this possible, or do I need to have the user client side run on timer to request update of notifications?
thanks,
Please point me to similer questions or resources and the obiouse resource that Im looking for.
You are looking at a timer unfortunately if you need to support a wide range of browsers but you can use web sockets to push the information on clients that have the support. Check the website http://www.websocket.org/
Here is a basic tutorial on web sockets:
http://www.html5rocks.com/en/tutorials/websockets/basics/
I have a simple product catalogue for businesses. There is a catalogue's management interface for adding products. Each business has a unique domain name where all its products are listed.
I would like to extend catagloue's functionality and allow businesses to have their products listed on facebook.
Functionality of the facebook application:
- Each business can install application from catalogue's management interface (I would like to have a button that opens facebook in a new window and prompts user to authorize access to one of user's existing Facebook Pages)
- installing application adds a Tab on selected Facebook Page,
- by clicking on a Tab visitor of the Facebook Page is presented with a list of products specific for this business. Data for that page is dynamic and can be accessed with a REST call and presented as json or html.
We would like each business that have a product catalogue with us to install application and have it automatically configured to use specific domain name when requesting product data.
Is it all technically possible? Could you point me into the right direction on how to
- install application from external website
- configure that application with a parameter (perhaps passed in url when requesting application installation)
- automatically add Page Tab for this application
Cheers,
Michal
Yes it is possible. But it'll be a little different from what you are thinking, i guess.
I recently implemented code to add a tab to a page programmatically, it is as follows(in PHP) :
$tabAdded=$facebook->api("/".$id."/tabs","post", array("access_token" => $access,
"app_id" => $fbconfig['appid']));
From the code we see that we need an app id, an access token, and the page id($id). $facebook is an instance of the FacebookPHPSDK.
So here's how we can get the three things in question:
First app id, you'll need to create a Facebook page tab app, select Page Tab in the app's Basic settings (where you can mention the page tab url. This url will have the content for a page tab.) You'll also need to enable website because you need to ask the user for necessary permissions (namely manage_pages). For your specific requirement you have to give the domain of the catalogue management app.
Second page id and access token, once you have manage_pages permission you can query the graph api to get the pages of the user using : api('me/accounts') this returns data with page name, page category, page id, page access token for all the user's pages.
#thaddeusmt has already mentioned that you can't create new applications, and need to use the same app, you have to read the signed request and get the page id, and serve content. All that will be left to do is link your customer domains to the correct page ids.
Hope this was useful.
You can install/uninstall (add/remove) application tabs to/from Pages using the Facebook API:
http://developers.facebook.com/docs/reference/api/page/#tabs
You cannot create new applications, however. So you will need to use the same application for each Page.
The way you can show different content for each Page in the Tab (using the same application) is by checking the Signed Request. This contains the ID of the Facebook Page. The code that serves up your application Tab can look at the Page ID and serve up the appropriate content for that Page.
I hope this helps get you on the trail. Good luck!
Yes it is possible.
It's a two way process
First you have to get page_access_token through graphAPI.
www.facebook.com/?fields=access_token
This will return Page_access_token.
Use page access token and use post method
www.facebook.com/yourpageid/tabs/
Post Parameters:
app_id= 'YourAppID'
access_token = 'access_token'
That way you can add your facebook app into facebookPage.