{"id":27852,"date":"2020-01-01T00:00:00","date_gmt":"2019-12-31T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/angular-microservices-e-autenticazione\/"},"modified":"2021-05-20T18:45:19","modified_gmt":"2021-05-20T16:45:19","slug":"angular-microservices-and-authentication","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/angular-microservices-and-authentication\/","title":{"rendered":"Angular, Microservices and Authentication"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

I am working on a new project, for which I need to authenticate an Angular client to access to a set of microservices. The permission to access each microservices depends on the current user privileges, and I need to be independent of the authentication mechanism.<\/p>\n\n\n\n

We can divide up the problem into two main subproblems: authentication and authorization. We use the existent standards and the right technologies to implement them. To manage user authentication, we can use OAuth and OpenId, which make us independent from the authority implementation. For the sake of simplicity, we can start with Microsoft Identity Server 4, an open-source project that implements OAuth 2.0 and OpenID Connect for ASP.NET Core.<\/p>\n\n\n\n

Let\u2019s start with the creation of the sample project structure, with a folder for the Identity Server project, a folder for the Angular client and two folders for two generic microservices:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We can create the Angular client with the usual command of the Angular CLI (ng new angular-client<\/strong>) and the two microservices with the usual command of the .NET CLI (dotnet new webapi<\/strong>). To create the Identity Server project, instead, we need to install the templates for Identity Server 4:<\/p>\n\n\n\n

dotnet new -i IdentityServer4.Templates<\/strong><\/p>\n\n\n\n

This command installs various templates, and we can choose the is4inmem<\/strong> template, which creates a project that stores in memory all the configuration data. Using the in-memory storage, we can learn the basics of the framework without introducing the storage complexity (you can use the is4ef<\/strong> template if you prefer to store the configuration data using Entity Framework).<\/p>\n\n\n\n

We need to introduce three concepts to understand how Identity Server works:<\/p>\n\n\n\n

  1. Identity Resource<\/strong>: it is information like User ID, phone number, or email address that we can add to the user identity, and include them in the user token.<\/li>
  2. API Resource<\/strong>: it defines the APIs that we can protect<\/li>
  3. Client<\/strong>: it represents a client like our Angular client, and it wants to access to the resources protected by the system.<\/li><\/ol>\n\n\n\n

    We can find the base configuration of the template in the Config.cs file. We decide to store this information in memory for simplicity\u2019s sake, but you can store them in a database.<\/p>\n\n\n\n

    We must adapt the template code to our needs. As Identity Resource, we need only the OpenID resource that represents the unique ID for the user, that in the OpenID Connect specification is called subject ID:<\/p>\n\n\n

    \npublic static IEnumerable<IdentityResource> Ids =>\n\u00a0\u00a0\u00a0\u00a0new IdentityResource[]\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new IdentityResources.OpenId()\n\u00a0\u00a0\u00a0\u00a0}; \n<\/pre><\/div>\n\n\n
    As APIs, we need to define our microservices:<\/p>\n\n\n
    \npublic static IEnumerable<ApiResource> Apis =>\n\u00a0\u00a0\u00a0\u00a0new ApiResource[]\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new ApiResource("microservice1", "My Microservice #1"),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new ApiResource("microservice2", "My Microservice #2")\n\u00a0\u00a0\u00a0\u00a0};\n<\/pre><\/div>\n\n\n
    The most important passage is the definition of clients. In our case, we need only one client definition, but you can define all the clients you need. Our Angular client uses the data that we set to connect to the Identity Server and obtain the token to access the protected resources.<\/p>\n\n\n\n
    Each client must have a unique identifier, named ClientId, and optionally can have a ClientName. We can set the URI from which the client requires the connection, named ClientUri, and a password, called ClientSecrets, to authenticate it. We can choose if a secret is required or not, based on the type of flow, named Grant Type in the OpenID Connect specification. A Grant Type defines how a client can interact with the service that generates the token.<\/p>\n\n\n\n
    In our example, we use the Implicit Grant Type, which transmits the token via the browser. The Implicit<\/em> flow is the simplest available, and it is the most used with JavaScript clients, but it does not permit advanced features like the token refresh. You can read about others Grant Types in the official documentation<\/a>.<\/p>\n\n\n\n
    In our example, we choose that it does not have a ClientSecret (RequireClientSecret = false) because a JavaScript client runs on the user browser, then it is easily retrievable from the code. After the login and the logout operations, we can specify a list of URIs to redirect the user from which the client can choose. We can also enable CORS calls ( https:\/\/developer.mozilla.org\/it\/docs\/Web\/HTTP\/CORS <\/a>) from the client URI and allow the send of the access token via the browser (AllowAccessTokenViaBrowser = true). To finish the configuration, we need to specify for which scopes<\/strong> the client requires the token. In our case the OpenID info (the subject identifier) and the API Resources defined:<\/p>\n\n\n
    \npublic static IEnumerable<Client> Clients =>\n\u00a0\u00a0\u00a0\u00a0new Client[]\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0new Client\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ClientId = "AngularClient",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ClientName = "Angular Client",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ClientUri = "http:\/\/localhost:4200",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0RequireClientSecret = false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0RequireConsent = false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AllowedGrantTypes = GrantTypes.Implicit,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0RedirectUris = { "http:\/\/localhost:4200" },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0PostLogoutRedirectUris = { "http:\/\/localhost:4200\/" },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AllowedCorsOrigins = { "http:\/\/localhost:4200" },\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AllowAccessTokensViaBrowser = true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AccessTokenLifetime = 3600,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AllowedScopes = { "openid", "microservice1", "microservice2" }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \n\u00a0\u00a0\u00a0\u00a0\u00a0};\n<\/pre><\/div>\n\n\n
    We are now ready to define our user accounts (we use the memory as storage to simplify the code). We can use the class TestUser, provided by the framework, and configured in the TestUsers.cs file (under the Quickstart folder):<\/p>\n\n\n
    \npublic static List<TestUser> Users = new List<TestUser>\n{\n\u00a0\u00a0\u00a0\u00a0\u00a0new TestUser{SubjectId = "1", Username = "michele", Password = "michele" },\n\u00a0\u00a0\u00a0\u00a0\u00a0new TestUser{SubjectId = "2", Username = "antonio", Password = "antonio" }\n};\n<\/pre><\/div>\n\n\n
    It’s time to integrate the Angular Client, where we can use oidc-client<\/strong> ( https:\/\/github.com\/IdentityModel\/oidc-client-js <\/a>), a ready-to-use library that helps us connecting to the Identity authority to retrieve the user token and accessing to the protected APIs:<\/p>\n\n\n\n
    npm i oidc-client<\/strong><\/p>\n\n\n\n
    To simplify and abstract all the operation with this library, we can create an Angular Service like this:<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { environment } from 'src\/environments\/environment';\nimport { UserManager, User } from 'oidc-client';\n\u00a0\n@Injectable({providedIn: 'root'})\nexport class AuthService {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public user: User;\n\u00a0\u00a0\u00a0\u00a0private userManager: UserManager;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0constructor() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.userManager = new UserManager({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0authority: environment.authority,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client_id: environment.clientId,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0redirect_uri: environment.redirectUri,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0response_type: environment.responseType,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scope: environment.scope\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0login() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.userManager.signinRedirect();\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0async completeAuthentication() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.user = await this.userManager.signinRedirectCallback();\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0isAuthenticated(): boolean {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.user != null && !this.user.expired;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0signout() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.userManager.signoutRedirect();\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    The library provides us two objects: the UserManager<\/em> for managing the operations login and logout and the User<\/em> for storing the token information. The login performs in two stages: a redirect to the login page, and a token recovery after the redirect. The login()<\/em> method executes the first stage, the completeAuthentication()<\/em> executes the second stage.<\/p>\n\n\n\n
    We can use the environments Angular CLI management to configure our development variables:<\/p>\n\n\n
    \nexport const environment = {\n\u00a0\u00a0\u00a0\u00a0production: false,\n\u00a0\u00a0\u00a0\u00a0authority: 'http:\/\/localhost:5000',\n\u00a0\u00a0\u00a0\u00a0clientId: 'AngularClient',\n\u00a0\u00a0\u00a0\u00a0redirectUri: 'http:\/\/localhost:4200',\n\u00a0\u00a0\u00a0\u00a0responseType: 'id_token token',\n\u00a0\u00a0\u00a0\u00a0scope: 'openid microservice1 microservice2',\n\u00a0\u00a0\u00a0\u00a0microservice1Url: 'http:\/\/localhost:5002\/WeatherForecast',\n\u00a0\u00a0\u00a0\u00a0microservice2Url: 'http:\/\/localhost:5003\/WeatherForecast'\n};\n<\/pre><\/div>\n\n\n
    As we can see, we set the Authority with the address of the Identity Server application, choose the AngularClient as clientId to connect to the server, and require a token (responseType: ‘id_token token’) with the OpenID, microservice1, and microservice2 as scopes.<\/p>\n\n\n\n
    Now, we can use the AuthService with the APP_INITIALIZER provider ( https:\/\/angular.io\/api\/core\/APP_INITIALIZER <\/a>). Usually, I create an AppService with a specific method to do all the needed works to startup an Angular client. In this case, the implementation is very simple:<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { AuthService } from '.\/auth.service';\n\u00a0\n@Injectable({providedIn: 'root'})\nexport class AppService {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0constructor(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0private authService: AuthService) { }\n\u00a0\n\u00a0\u00a0\u00a0\u00a0initApp(): Promise<any> {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return new Promise(async (resolve, reject) => {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!this.authService.isAuthenticated()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (window.location.href.indexOf('id_token') >= 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await this.authService.completeAuthentication();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resolve();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else if (window.location.href.indexOf('error') >= 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0reject();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.authService.login();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    When the Angular client starts, I check if the user is already authenticated. If it is not, I have three possibilities: the user not started authenticated stage yet, I am returning from the login redirect with success, or I am returning from the login redirect with an error. I understand from the URL which is the current state:<\/p>\n\n\n\n