Demo built with Angular, Firebase, Flutter, JakartaEE, Microprofile, PostgreSQL on Azure - Parte 2

 


In the last post, we start with the explanation of our authentication/authorization server that provides JWT Tokens. 

In this post, we start to build the first version of our angular application. 

Source Code: https://github.com/joedayz/web-inspector (tag v1.0)


1. Create the angular application with Angular CLI

npm install -g @angular/cli

2. Add these dependencies: Angular Material, Angular JWT, Angular Font Awesome, Angular2 Test Mask, SweetAlert2.

3. In Assets we have some fonts and images for our web admin:


4. In environments configure the principal PATHS:



Note:  localhost must be changed with the domain name or IP of your server.

 

5. The routing shows the initial navigation: 



app-routing.module.ts

The GuardService makes sure that a person necessarily always logs in.


6. Angular Material components are declared in a unique module.  It permits to add more easily in other modules. 


7. The main Dashboard has a drop-down menu, toolbar and will serve to display the content in the central part.





The result is:



Note: We need to log in for access to the dashboard. It cannot be accessed directly because exists a GuardService.

8. Finally the Login:



The LoginService has the logic that calls the authentication service to get one access token if the username and password is a valid user in our Azure PostgreSQL. 


The LoginService shows how the data is sent to the authentication service. The Token returned is saved in the session storage.

endpoint = `${environment.AUTH_ENDPOINT}/login`;    


And that's all, for now. In the next post, we show an advanced version of its web admin.

Enjoy!


Joe










Share:

0 comentarios:

Publicar un comentario