Angular 2, Spring boot , spring security , login form - spring

I have a Front end application that runs on http:// localhost:4200, with angular 2 (I've used angular-cli for generating the project).
The application runs without any problems (I can get and post info from/to database using Angular 2 Http service:
getList () {
return this._http.get("http:// localhost:8080/").map(res => res.json());
}
On the other hand, I have a Back end application running with spring boot on http:// localhost:8080/ (note the ports), that provide a REST Api for my angular 2 application.
Sending requests from http://localhost:4200/ to http://localhost:8080/ works as expected.
Before I've programmed an application with spring framework & angularJS 1, spring security took care of login and security in the same app (maven project).
Now I have two separate applications that are communicating via http (RESTful Api with spring boot , and front end Api with angular 2)
How can I set my login form and where to put it, and how to configure spring security with my angular 2 application?

When you spin up the Angular Application with Angular CLI, your Angular Pages are served by NodeJs in the backend.
You have a couple of options here.
The login can be handled at NodeJS server which can in turn invoke
Spring Boot application to Authenticate and Authorize.(I think, you might need to do some tweaks like using express server instead of lite server. take a look here https://stackoverflow.com/a/37561973/6785908)
After initial development, you can copy over your AngularJS
resources to a Spring MVC (Spring Boot) server and use it to serve
your pages (as well as the rest APIs), just as you were doing
before.
Make the Angular App invoke the spring boot Service (I guess , you
are using the $http.post to submit the form, if that's the case you
can just change the URL so that it can hit spring boot app instead.)
For the production deployment, use nginx/httpd to serve the static
files (AngularJS/CSS etc) and route/proxy all the dynamic request to
the spring boot app.
I would strongly suggest the 3rd option.

Related

How to call Rest request from jsp

I have to create 2 projects. Web Service and one is Web project.
I created the web service using Rest in spring boot and web project using dynamic web project using Jsp and servlets.
Now I have to consume the web service in web project. How can I do ?
You can do AJAX call from your JSP side to your REST server side using Javascript. You can also use library like JQuery or axios (there MDN versions since you are using JSP) to send REST API calls to your same or any other server. You can follow https://stackoverflow.com/a/44859872/8684299 this answer.

Create a web application using Spring framework for back-end but without using Spring MVC.s

I want to learn the Spring Framework and therefore I decided to make a web application using it, but I don't want to use Spring MVC as it still uses JSP. What all projects from Spring can be used if I want to have a UI which can be made using React / Angular and the backend is managed by Spring.
You have to use REST API, and pass data to front-end JS framework via JSON.
Look here: https://spring.io/guides/gs/rest-service/
Start with creating a simple Rest Controller with Spring Boot.
Then you have to choose your JavaScript framework (jQuery, Angular, React),
and make a HTTP request to URL typed in your #RestController.
You can achieve this by using AJAX method from your JS framework.
Try this,it will speed up your development
Restful Web Service with Spring Boot
by the way,if you want to use Angular/React+Spring Boot you can use JHipster, this tool will just do the basic setup for your Angular/React+Spring Boot application in couple of minutes,the website has a clear video tutorial you can use it will only take about 15 min approx
Jhipster

Vaadin 8 Spring Boot QuickTickets Dashboard with Spring MVC

I'm trying to adapt Vaadin Spring Boot QuickTickets Dashboard example with my project needs. Everything is working fine except I'm unable to access another (not Vaadin UI) URLs. For example, I have Spring Boot Actuator endpoint - http://localhost:8080/actuator/health but when I try to access it, the application wrongly redirects me to http://localhost:8080/actuator/health#!dashboard. Pretty much the same behavior with my custom login page(not Vaadin UI) - http://localhost:8080/login. I also unable to access it.
How to correctly setup Vaadin to be able to access Spring Boot Actuator endpoints and my custom login page also?
You need to map the servlet to a different path. I think the problem is that the Vaadin-Servlet is mapped to / an is processing all requests.
Adding the following to you application.properties should do the trick.
vaadin.servlet.urlMapping = /myapp/*
Of course the URL of the app changes accordingly.

How to connect Java spring application with Angular 4 application

I made a Spring rest application and Angular 4 application and I want to use Spring rest Api's in my Angular 4 application. Simple CRUD application. which could be the best format of communication between these application
You can take a look at this Spring Guide.
It is for AngularJS, but the server side code is absolutely the same in case of Angular 2,3,4 as well.
If possible try not to club angular and spring-boot together, sure you can do this using webjars or similar libraries, but try not doing it. Spin off the angular app as a separate application (you can serve this Angular app either using nginx or nodeJs) and then route all the API calls through the Angular App to your Spring boot application. Now your spring boot application will be just a ( micro ) service which will have to deal only with the data, not the presentation (markup / style etc).

how to login with spring boot and angular 2

I have a Front end application that runs on http:// localhost:5555, with angular 2
On the other hand, I have a Back end application running with spring boot on http:// localhost:8080/, that provide a REST Api for my angular 2 application.
Sending requests from http://localhost:5555/ to http://localhost:8080/ works as well.
what is the best way to authenticate users ,I read so many articles, but I couldn't find a solution.
you need to creating cross-origin with #CrossOrigin(origins = "http://localhost:5555") in controller file

Resources