dotnet
abp
microservice
netcore6
identity-server
angular
This is eight post of the series: .NET Microservice with ABP
Posts in the Series
Part 3. Administration Service
Part 8. Identity server and Angular App (this post)
Table of contents
Intro
We have copied the IdentityServer and Angular app from the default tired app. So they are configured to work with the tired app. we will modify the Identity server to use the newly created services and the change the config of the angular app to use the Reverse proxy we created with Yarp.
IdentityServer
Even thought we already have the Identity service. it only provides the API endpoints to manage the user. We need the Identity server to do the JWT auth and also for the login and registration. IdentityServer is the default way to login user in the ABP framework right now. But there are plans to replace IdentityServer and replace it with the OpenIdDict if you want to know more about this go and check here https://github.com/abpframework/abp/issues/11989
Remove the wrong reference
During the code generation by default Identity server will have the reference for the EFCore project. But after moving the Identity server this reference will be wrong. So the first step is to remove all the project reference in the csproj file of the identity server.
Add new reference
Once the old references are removed we need to add the new reference to the identity server project. The Identity server should know about all 3 base services identity, administration and saas. So we need to add the reference for the EFCore projects of all the 3 services. Along with we also need to add the reference for the Shared project so that we can reuse some code.
<ItemGroup>
<ProjectReference Include="..\..\services\administration\src\Tasky.AdministrationService.EntityFrameworkCore\Tasky.AdministrationService.EntityFrameworkCore.csproj" />
<ProjectReference Include="..\..\services\identity\src\Tasky.IdentityService.EntityFrameworkCore\Tasky.IdentityService.EntityFrameworkCore.csproj" />
<ProjectReference Include="..\..\services\saas\src\Tasky.SaaSService.EntityFrameworkCore\Tasky.SaaSService.EntityFrameworkCore.csproj" />
<ProjectReference Include="..\..\shared\Tasky.Shared.Hosting\Tasky.Shared.Hosting.csproj" />
</ItemGroup>
Update the connection string
Once we added the reference to the EFCore projects we need to add the connection string for the services in the appsettings.json file so that the Identity server can find the database.
"ConnectionStrings": {
"SaaSService": "User ID=postgres;Password=postgres;Host=localhost;Port=5432;Database=TaskySaaSService;Pooling=false;",
"IdentityService": "User ID=postgres;Password=postgres;Host=localhost;Port=5432;Database=TaskyIdentityService;Pooling=false;",
"AdministrationService": "User ID=postgres;Password=postgres;Host=localhost;Port=5432;Database=TaskyAdministrationService;Pooling=false;"
},
Update CORS urls
All the services and apps need to contact the Identity server to validate the tokens. so we should add the urls of the service in the CorsOrigins section of the appsettings.json
"CorsOrigins": "http://localhost:4200,https://localhost:7001,https://localhost:7002,https://localhost:7003",
Update the Authority URL
All the service has Authority url in the appsettings.json file. we have to change that file to point to the identity server.
"Authority": "https://localhost:7000/",
Update the module dependency
Identity server project should have a IdentityServerModule in the root of the project directory. In that module we need update the module dependency so that the EFCore modules will be loaded correctly. We also should add the shared module.
typeof(AbpAccountWebIdentityServerModule),
typeof(AbpAccountApplicationModule),
typeof(AbpAccountHttpApiModule),
typeof(AbpAspNetCoreMvcUiBasicThemeModule),
typeof(AdministrationServiceEntityFrameworkCoreModule),
typeof(SaaSServiceEntityFrameworkCoreModule),
typeof(IdentityServiceEntityFrameworkCoreModule),
typeof(TaskyHostingModule)
Once this is done. our identity server is ready for our use. launch the identity server and see if you can login as a super admin.
Running Identity server
dotnet run
This should launch the identity server and it should be running in the port 7000
Angular App
angular app in abp is a self contained app. there is not dependency to any other abp project. so to run the we just have to point the angular app in the correct direction and it should work. We need to change 2 things in the angular app. one is the OAuthConfig so that it know where is the identity server is running and the API endpoint which is the reverse proxy in our case which has all the endpoints. you will be able to find the environment.ts file in apps\angular\src\environments.
import { Environment } from '@abp/ng.core';
const baseUrl = 'http://localhost:4200';
export const environment = {
production: false,
application: {
baseUrl: 'http://localhost:4200/',
name: 'Tasky',
logoUrl: '',
},
oAuthConfig: {
issuer: 'https://localhost:7000',
redirectUri: baseUrl,
clientId: 'Tasky_App',
responseType: 'code',
scope: 'offline_access IdentityService AdministrationService SaaSService role email openid profile',
requireHttps: true
},
apis: {
default: {
url: 'https://localhost:7500',
rootNamespace: 'Tasky',
}
},
} as Environment;
Run
Once you have updated the environment.ts make sure the packages are installed for your angular app.
To install packages
yarn
you need to have yarn installed for this command to work
This command will install all the packages needed for your angular app.
To Run
To run the angular app run the following command
yarn start
This will start the angular dev server and your application will be running in the port 4200.
