Code Example for SPA and Micro-Service on Azure

Background

SPA and micro-service is the trend for modern web application. Moreover, there is a high need of auto-scalability and well-supported Cloud environment. Last but not the least, that is a single sign-on ability and easy to integrate any Identity Provider. Azure Active Directory is an enterprise Identity Provider for both B2B and B2C solution.

Using the Code

https://github.com/quinvit/microcore/tree/master/Sample/Angular

1. time-tracker-ui folder contains sample code of Angular application
2. TimeTrackerAPI folder contains sample code of API Gateway
3. Services folder contains sample code of two simple microservices

The API Gateway and micro-services are deployed to Azure Web App (linux docker container mode) in order that we can easily scale up or scale out any service. On the other hand, hosting microservice in Azure Web App is much cheaper than on VM or AKS. To secure our microservices that are hosted under Azure web app, we need to use a Virtual Network with enabled Service Endpoint, join our Azure web app to that Virtual Network and then restrict all external access to the web app, except the requests that come from our Virtual Network.

The communication between micro-services is asynchronous HTTP and is handled by https://github.com/quinvit/microcore library. The library covers network call, serialization/deserialization, contract mapping. We only use our micro-services by using DI to inject service interface to constructor as normal in-process service injection.

In Angular frontend, we simply use adal-angular4 library to authenticate against Azure Active Directory users and auto-attach jwt bearer token when we call any API using HttpClient.

 @Component({
  selector: 'app-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.css']
})
export class ReportsComponent implements OnInit {

  displayedColumns: string[] = ['tasks', 'totalMinutes', 'day'];
  dataSource = ELEMENT_DATA;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<DailyTimeSheetByUser[]>
          (`${environment.config.apiGateway}/api/Reports/MonthlyReportByUser`)
      .subscribe(x => {
        this.dataSource = x;
      });
  }
}

For more details about this library, please take a look at this article.

To start Angular application, type ng serve:

For the backend, register micro-services in Discovery.config:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <Discovery>
    <Services>
      <ReportService Source="Config" Hosts="localhost:80" />
      <AuthService Source="Config" Hosts="localhost:81" />
      
      <!--<ReportService Source="Config" 
           Hosts="timetracker-reportservice.azurewebsites.net:80" />
      <AuthService Source="Config" 
       Hosts="timetracker-authservice.azurewebsites.net:80" />-->
    </Services>
  </Discovery>
</configuration>

This is how micro-services are integrated to ASP.NET Core (Startup.cs):

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddTransient((o) => StandardKernel.Get<IReportService>());
    services.AddTransient((o) => StandardKernel.Get<IAuthService>());
}

Inject remote service to the backend API code in API Gateway:

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class ReportsController : ControllerBase
{
    private IReportService _reportService;

    public ReportsController(IReportService reportService)
    {
        _reportService = reportService;
    }

    // GET: api/Reports
    [HttpGet]
    [Route("MonthlyReportByUser")]
    public async Task<DailyTimeByUser[]> GetMonthlyReportByUser()
    {
        var token = await this.HttpContext.GetTokenAsync("access_token");
        return await _reportService.GetMonthlyReportByUserAsync(token);
    }
}

To start backend API Gateway and micro-services at local, just run these projects in Visual Studio 2019:

Here is how it works:

To run and store data locally, we need to run Azure Storage Emulator. Finally, after login to demo users, this is how the application looks like:

Points of Interest

Online demo can be found at https://timetracker2.z7.web.core.windows.net/.

You can register or use sample users:

• quinvit@hyperscale2.onmicrosoft.com/microcore@911

After login, click on Timesheet menu to retrieve data from server. Here is the data flow:

Angular application

• API Gateway
  • ReportService (retrieve report data in Azure table)
    • AuthService (retrieve logged-in user information)
  • AuthService (add registration information to Azure table)
    • Push a message to Azure queue to trigger Azure login apps to create AD user and send email with initial password

The user registration information is pushed to Azure storage queue and there is an Azure logic app that will handle user creation and send email with initial password.

History

This first version is for explaining the architecture and service integration part with some very basic functions: register user, activate account, keyin data and see simple report. In the next version, I will make more real-life features like data analysis and charting...