如何在 Angular 项目中的 ABP.IO 中创建第二个 Angular 应用程序并使 IdentityServer 工作？

Question

ABP框架版本: v4.3.0

用户界面：Angular v11.2.11

数据库提供程序：EF Core

如何在 Angular 项目中创建第二个 Angular 应用程序，使我能够使用相同的 C# 代理并使用相同的 IdentityServer？

到目前为止我尝试了什么:

通过 angular 命令 ng generate application exampleApp 创建第二个应用程序并开始从 ABP Angular 项目 app.module.
第二个应用程序在端口 4300 上运行，因此 http://localhost:4300 在 appsettings

CorsOrigins

在 DbMigrator 项目的 appsettings 下和 IdentityServer:Clients 下添加了以下内容：

"exampleApp": {
    "ClientId": "exampleApp",
    "ClientSecret": "1q2w3e*",
    "RootUrl": "http://localhost:4300"
}

在 exampleApp environment.ts 中添加了以下内容：

const baseUrl = 'http://localhost:4300';

export const environment = {
  production: false,
  application: {
    baseUrl,
    name: 'exampleApp',
    logoUrl: '',
  },
  oAuthConfig: {
    issuer: 'https://localhost:44350', 
    redirectUri: baseUrl,
    clientId: 'exampleApp',
    responseType: 'code',
    scope: 'offline_access exampleApp'
  },
  apis: {
    default: {
      url: 'https://localhost:44350',
      rootNamespace: 'AB.XYZ',
    },
  },
} as Environment;

当我在端口 4300 上提供 exampleApp 然后尝试登录时，它会将我重定向到端口 4200 上的主要应用程序。

能否请您提供指导？

Answer 1

1。更新数据库播种

您需要创建一个新的身份服务器客户端。最好的方法是更新 IdentityServerDataSeedContributor 如下：

var mySecondAngularApp = configurationSection["MySecondAngularApp:ClientId"];
        if (!mySecondAngularApp .IsNullOrWhiteSpace())
        {
            var mySecondAngularAppClientRootUrl = configurationSection["MySecondAngularApp:RootUrl"]?.TrimEnd('/');

            await CreateClientAsync(
                name: mySecondAngularApp,
                scopes: commonScopes,
                grantTypes: new[] { "password", "client_credentials", "authorization_code" },
                secret: (configurationSection["MySecondAngularApp:ClientSecret"] ?? "1q2w3e*").Sha256(),
                requireClientSecret: false,
                redirectUri: mySecondAngularAppClientRootUrl,
                postLogoutRedirectUri: mySecondAngularAppClientRootUrl,
                corsOrigins: new[] { mySecondAngularAppClientRootUrl.RemovePostFix("/") }
            );
        }

要获取相关配置，请更新 end seeder 应用程序 DbMigrator appsettings.json:

"IdentityServer": {
    "Clients": {
      "MyProjectName_App": {
        "ClientId": "MyProjectName_App",
        "ClientSecret": "1q2w3e*",
        "RootUrl": "http://localhost:4200"
      },
      "MySecondAngularApp": {
        "ClientId": "MySecondAngularApp",
        "ClientSecret": "1q2w3e*",
        "RootUrl": "https://localhost:4300"
      },
  }

为数据库播种。

2。更新 IdentityServer

将 CORS 和 otherAngularUrl 添加到 IdentityServer appsettings:

{
  "App": {
    "SelfUrl": "https://localhost:44301",
    "ClientUrl": "http://localhost:4200",
    "OtherAngularUrl": "http://localhost:4300",
    "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200,http://localhost:4300,https://localhost:44307,https://localhost:44300",
    "RedirectAllowedUrls": "http://localhost:4200,ttp://localhost:4300,https://localhost:44307"
  },
...

更新IdentityServerModule:

Configure<AppUrlOptions>(options =>
{
    options.Applications["MVC"].RootUrl = configuration["App:SelfUrl"];
    options.RedirectAllowedUrls.AddRange(configuration["App:RedirectAllowedUrls"].Split(','));

    options.Applications["Angular"].RootUrl = configuration["App:ClientUrl"];
    options.Applications["Angular"].Urls[AccountUrlNames.PasswordReset] = "account/reset-password";

    options.Applications["OtherAngular"].RootUrl = configuration["App:OtherAngularUrl"];
    options.Applications["OtherAngular"].Urls[AccountUrlNames.PasswordReset] = "account/reset-password";
});

如何在 Angular 项目中的 ABP.IO 中创建第二个 Angular 应用程序并使 IdentityServer 工作？

How do I create a second Angular App inside Angular project, in ABP.IO and make IdentityServer work?

angular

abp

1。更新数据库播种

2。更新 IdentityServer