Virtual Checker 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, and 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:

1 comentario:

  1. Wow, that's so wonderful. Plenty of thanks for sharing such an informative blog piece with us. To hired flutter app developers is a very good idea. It is because the expert can ease the project execution process. Also, here is a very good opportunity that I think is amazing, Eiiliana.com, and I will suggest this portal. One must give it a try.

    ResponderBorrar