SpringBoot BackboneJs requirejs springsecirity webapp - backbone.js

I am assigned a task to have a poc for using spring security with backbonejs
.The design is that the user should be served a login page and after login our index page has to be rendered and if login is unsuccessful then login template has to be rerendered.Can anyone help me in getting started with this.After a lot of research I am not able to figure out a proper design.

Using backbone often implies a Single Page Application . Security in a Single Page App is different than server (backend) rendered application. Below is a good blog article with some code snippets to get you started. If the server is not rendering the page then all spring security can do is protect the REST endpoints that BackboneJS is calling.
http://patrickgrimard.com/2014/01/03/spring-security-csrf-protection-in-a-backbone-single-page-app/

Related

ASP.NET CORE MVC REACT APP: System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html'

UI PROJECT ENVIRONMENT: ASP.NET CORE MVC
UI PROJECT TYPE: ASP.NET CORE + REACT APPLICATION
ERROR NAME/ FORUM TITLE:
ASP.NET CORE MVC REACT PROJECT: System.InvalidOperationException: SPA default page middleware failed to return default page '/index.html' because it was not found and no other middleware was processing the request
ERROR DETAIL:
I have a React project created with ASP.NET CORE MVC template.
This React UI project takes data from a separate ASP.NET CORE MVC based WEB API project and projects customer data to the screen.
Authentication, Authorization and Data retrieval operations are provided via API.
While connecting to a user UI page, LDAP authorizations are checked from the relevant API. UI page opens if LDAP authorization is available.
If the user does not have LDAP authorization, the screen will display You Are Not Authorized.
These React-based Web UI and Web API pages run on IIS on Windows server.
In addition, both UI and API are installed on three servers named S1, S2 and S3 and work over Load Balancer.
90% of users have direct access to the relevant UI. Some can log in from S1, some from S2, some from S3 server with Load Balancer management.
However, some users encounter the following error when opening the relevant UI page.
We detected this error on Dynatrace.
Error :
REACT The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.
We couldn't figure out why some users are getting this error even though most users access the same page.
What do you think could be the reasons for the access problem?
These React-based Web UI and Web API pages run on IIS on Windows server.
In addition, both UI and API are installed on three servers named S1, S2 and S3 and work over Load Balancer.
90% of users have direct access to the relevant UI. Some can log in from S1, some from S2, some from S3 server with Load Balancer management.
However, some users encounter the following error when opening the relevant UI page.
I expect for my React UI page to open for users with errors.
I think I already know why.
Your three node server environment, the value of ASPNETCORE_ENVIRONMENT may be Development and some Production, so the Development node server are running normally.
How to check it?
You can check your ApplicationHost.config file, or check this blog.
Solution
Make sure your node server is Production.
Use PublishRunWebpack to deploy react project into wwwroot

Confusion of which Azure AD app Authentication platform redirect configuration to use

I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html

Where can I learn Spring Boot Security and React with proxy on one port so that it it reloads?

I've used pretty much all tutorials on google, seen all github repos. Spent weeks. I'm trying to make an app with a Spring Boot backend with spring Security JWT and React frontend (I don't know if I need webpack for this, some tutorials used it for another level of proxy for some reason, some didn't). I just want to start with something. Something which can be accessed via one port on localhost, which reloads and not gives me 403 unauthorised error instead or even worse, a blank page when I just want to see login page or a page from the menu after authorisation. A Hello World. A Time On Server starter project. Anything. Just so that it reloads and I can build stuff with sense on top of it. Can you please tell where I can find snything?

Is it possible to add a custom error page to an AngularJs 1.X application that is using Web API?

I have an AngularJs application that uses Web API to communicating with a WCF service on the back-end. The requirements are to add a custom error page (web.config settings). The user is to be re-directed to this custom error page whenever an exception occurs in the server code (i.e. C# code). I am not sure this makes sense for a single page application. However, if anyone has done this please help.
You would leave this up to the SPA, not configure this in your Web.config
If your Web API gives you an internal error 5xx you display an error page.

spring Boot and Angular JS : what is the best way to deal with the authentication?

I'm devoloping an application using Spring Boot , Spring Data and Angular JS .
what is the best way to deal with the authentication ???
I've never used spring security before and I can't find an example using a database (users and Roles) .can I use spring security even if I have html pages ?
what I want is that when a User (from my database) logs in , he will find his personal data. what I mean is for example like in facebook home page ,the user's name is shown on the topbar , he can see his profil ...
Also a part of my menu must be shown only to my admin user . is that possible ?
I'll be gratful if someone can tell me what are the steps to follow or give me a link for a good tutorial . I'm lost
You must go through this tutorial which was based on Dave Syer's blog posts. It clearly describes about angularjs with spring boot and authentication.
My personal suggestion for is to use Spring Security with form login, which supports role based authentication. Custom menu display is not that hard when you have angularjs and role based authentication with you. (But I'm afraid you will not be able to have 100% html solution - May have to use jsp if statement.)
Another alternative would be, if you have jboss as application server, you can use login-config.xml to change permissions

Resources