Login With Facebook (Spring - Angular)
للاستفسار :
فيس بوك : / eslam.khder.98
لينكد ان : https://www.linkedin.cn/in/eslam-khde...
لينك GitHub :
https://github.com/EslamKhder/social-...
رايط بلاي ليست بتوضح ال Java Path :
• Java Path
رابط Map للجافا :
/ eslam-khder-4145351b0_springframework-java...
هتلاقي بروجكتتات وكورسات علي قناه Java EE
ولو فيه حاجه مش واضحه تواصل معايا بالتوفيق
====================================================
1. Overview
In this tutorial, we'll be creating a login page using Spring Security with:
AngularJS
Angular 2, 4, 5, and 6
The example application which we're going to discuss here consists of a client application that communicates with the REST service, secured with basic HTTP authentication.
2. Spring Security Configuration
First of all, let's set up the REST API with Spring Security and Basic Auth:
Here is how it's configured:
3. Setting Up the Angular Client
Now that we have created the REST service, let's set up the login page with different versions of the Angular client.
The examples which we're going to see here use npm for dependency management and nodejs for running the application.
Angular uses a single page architecture where all the child components (in our case these are login and home components) are injected into a common parent DOM.
Unlike AngularJS, which uses JavaScript, Angular version 2 onwards uses TypeScript as its main language. Hence the application also requires certain supporting files that are necessary for it to work correctly.
Due to the incremental enhancements of Angular, the files needed differs from version to version.
Let's get familiar with each of these:
systemjs.config.js – system configurations (version 2)
package.json – node module dependencies (version 2 onwards)
tsconfig.json – root level Typescript configurations (version 2 onwards)
tsconfig.app.json – application level Typescript configurations (version 4 onwards)
.angular-cli.json – Angular CLI configurations (version 4 and 5)
angular.json – Angular CLI configurations (version 6 onwards)
4.3. Using Angular 6
Angular team has made some enhancements in version 6. Due to these changes, our example will also be a little different compared to other versions. The only change we've in our example with respect to version 6 is in the service calling part.
Instead of HttpModule, the version 6 imports HttpClientModule from @angular/common/http.
The service calling part will also be a little different from older versions:
5. Conclusion
We've learned how to implement a Spring Security login page with Angular. From version 4 onwards, we can make use of the Angular CLI project for easy development and testing.
As always all the example we've discussed here can be found over GitHub project.