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.
