BFF and Remote Apis

[FDonald]

Hi, I am using BFF Multiclient v 4.1.1, with .Net 10
I want to use LoadConfiguration extension to obtain frontends configuration from config file.

This is my configuration:

{
  "defaultOidcSettings": {
    "authority": "https://XXXXXXXXXXXXXXXXXXXX"
  },
  "defaultCookieSettings": {
    "sameSite": "None",
    "securePolicy": "Always"
  },
  "frontends": {

    "angular-demo-bff": {
      "staticAssetsUrl": "https://localhost:4200/angular-demo-bff/",
      "matchingPath": "/angular-demo-bff",
      "oidc": {
        "clientId": "angular-demo-bff",
        "scope": [ "openid", "holder", "api_access", "api_read" ]
      },
      "remoteApis": {
        "ssidArqNet_api": {
          "pathMatch": "/api/ssidArqNet",
          "targetUri": "https://xxxxxxxxxxxxxxxxxxxxxxxx/SsidArqNet.Backend.API",
          "requiredTokenType": "OptionalUserOrClient"

        }
      }
    },
    "implicit": {
      "matchingPath": "/"
    }
  }
}

I expect that RemoteApis collection and configuration are loaded at startup, but in frontends collection I only can view frontend application, without API´s.
If I configure manually api from configuration object, api redirect work as expected

// Map the remote API endpoint
app.MapRemoteBffApiEndpoint(pathMatch,new Uri(targetUri))
    .WithAccessToken(tokenType);

This is important part of program.cs:

 builder.AddBffWithStoredSessions()
     .AddRemoteApis()
     .LoadConfiguration(bffConfig)
     .ConfigureOpenIdConnect(options =>
     {
         options.Authority = oidcConfiguration.OidcServer;
         options.ClientId = oidcConfiguration.OidcClient;
         options.ClientSecret = oidcConfiguration.OidcClientSecret;
         options.ResponseType = "code";
         options.ResponseMode = "query";

         options.GetClaimsFromUserInfoEndpoint = true;
         options.SaveTokens = true;
         options.MapInboundClaims = false;

         options.Scope.Clear();
         if (!string.IsNullOrWhiteSpace(oidcConfiguration.OidcScopes))
         {
             foreach (var scope in oidcConfiguration.OidcScopes.Split(' ', StringSplitOptions.RemoveEmptyEntries))
             {
                 options.Scope.Add(scope);
             }
         }
         if (oidcConfiguration.OfflineAccess) options.Scope.Add("offline_access");
         options.UsePkce = true;
     });
 builder.Services.AddAuthorization();

 var app = builder.Build();
 app.ConfigureLog4Net();
 
 app.UseCors();
 app.UseAuthentication();
 app.UseRouting();
 app.UseBff();
 app.UseAuthorization();

 // Manually map remote BFF API endpoints from configuration
 app.MapRemoteBffApiEndpointsFromConfiguration(bffConfig);

[ProgrammerAL]

Edit – Removed a previous response because it was incorrect.

@FDonald The JSON Options deserialization isn’t detailed very well in our documentation for that feature, we’ll update it soon. In the meantime, I was able to reproduce your issue and get the config JSON into a format that will deserialize properly.

In the JSON structure below, notice the remoteApis child doesn’t have the key ssidArqNet_api to name it. The lookup is done based on path. Hopefully that’s the only change you need to make to your JSON config. Note: I had to change some values for local testing.

"frontends": {
  "angular-demo-bff": {
    "staticAssetsUrl": "https://localhost:5011",
    "matchingPath": "",
    "remoteApis": [
      {
        "pathMatch": "/todos",
        "targetUri": "https://localhost:5020/todos/",
        "requiredTokenType": "User"
      }
    ]
  }
}

[FDonald]

Thank you @ProgrammerAL, I've applied this structure, but result not change, api routing isn't charged in LoadConfiguration(bffConfig). Without MapRemoteBffApiEndpointsFromConfiguration extension method, that manually map remoteApis configuration, I can't call remote api.

If you need more info, this is the code of AddBffWithStoredSessions extensions:

public static IBffServicesBuilder AddBffWithStoredSessions(this WebApplicationBuilder builder )
{
    var cn = builder.Configuration.GetConnectionString("ATKDatabase")
        ?? throw new InvalidOperationException("ATKDatabase connection string is required");

    // Configure logging level for EF Core through the builder
    builder.Logging.AddFilter((category, level) =>
                    category == DbLoggerCategory.Database.Command.Name
                    && level == LogLevel.Information)
                .AddConsole();
    string migrationsAssembly =
            typeof(BffSchemaModelCustomizer).GetTypeInfo().Assembly.GetName().Name
            ?? throw new InvalidOperationException("Assembly name not found");

    builder.Services.AddDbContextPool<SessionDbContext>(options =>
    {
        options.UseSqlServer(cn, efoptions =>
                        efoptions.MigrationsHistoryTable("__UserSessionMigrationsHistory", "bff")
                        .MigrationsAssembly(migrationsAssembly));

        options.ReplaceService<IModelCustomizer, BffSchemaModelCustomizer>();
    });

    return builder.Services.AddBff(options =>
    {
        options.LicenseKey = builder.Configuration.GetSection("D:L").Value;
        options.SessionCleanupInterval = TimeSpan.FromMinutes(30);
    })
    .AddEntityFrameworkServerSideSessionsServices<SessionDbContext, IBffServicesBuilder>()
    .AddSessionCleanupBackgroundProcess();
}

And this is code for manual mapping:

public static WebApplication MapRemoteBffApiEndpointsFromConfiguration(this WebApplication app, IConfiguration configuration)
{
    var frontendsSection = configuration.GetSection("frontends");

    if (!frontendsSection.Exists())
    {
        app.Logger.LogWarning("No frontends section found in BFF configuration");
        return app;
    }

    foreach (var frontendSection in frontendsSection.GetChildren())
    {
        var frontendName = frontendSection.Key;
        var remoteApisSection = frontendSection.GetSection("remoteApis");

        if (!remoteApisSection.Exists())
        {
            app.Logger.LogInformation("No remoteApis configured for frontend: {FrontendName}", frontendName);
            continue;
        }

        foreach (var remoteApiSection in remoteApisSection.GetChildren())
        {
            var apiName = remoteApiSection.Key;
            var pathMatch = remoteApiSection["pathMatch"];
            var targetUri = remoteApiSection["targetUri"];
            var requiredTokenType = remoteApiSection["requiredTokenType"];

            if (string.IsNullOrEmpty(pathMatch) || string.IsNullOrEmpty(targetUri))
            {
                app.Logger.LogWarning("Invalid remoteApi configuration for {ApiName} in frontend {FrontendName}", apiName, frontendName);
                continue;
            }

            // Parse token type
            var tokenType = requiredTokenType?.ToLowerInvariant() switch
            {
                "user" => RequiredTokenType.User,
                "client" => RequiredTokenType.Client,
                "userorclient" => RequiredTokenType.UserOrClient,
                "optionaluserorclient" => RequiredTokenType.UserOrClient,
                _ => RequiredTokenType.UserOrClient
            };

            app.Logger.LogInformation(
                "Mapping remote BFF API: Frontend={FrontendName}, API={ApiName}, Path={PathMatch}, Target={TargetUri}, TokenType={TokenType}",
                frontendName, apiName, pathMatch, targetUri, tokenType);


            // Map the remote API endpoint
            app.MapRemoteBffApiEndpoint(pathMatch,new Uri(targetUri))
                .WithAccessToken(tokenType);
        }
    }

    return app;
}

I know that this configuration isn't reloaded at runtime.

[ProgrammerAL]

@FDonald Sorry, I’m just trying to make sure I understand your response. Are you saying the MapRemoteBffApiEndpointsFromConfiguration() method is a workaround to manually load from config and map the remote APIs? And ideally this method will not be used?

BFF monitors the config and using the IOptions<> pattern. Once the top-level frontends object changes, it gets refreshed in memory, so you don’t have to do anything to manually refresh.

Could you share your new config? I’m wondering if that still isn’t in the correct format.

[FDonald]

@ProgrammerAL , yes you are right, as workaround i have to load manually api configuration from config. this is my actual config:

 {
  "defaultOidcSettings": {
    "authority": "https://XXXXXXXXXXXXXXXXX"
  },
  "defaultCookieSettings": {
    "sameSite": "None",
    "securePolicy": "Always"
  },

  "frontends": {

    "angular-demo-bff": {
      "staticAssetsUrl": "https://localhost:4200/angular-demo-bff/",
      "matchingPath": "/angular-demo-bff",
      "oidc": {
        "clientId": "angular-demo-bff",
        "scope": [ "openid", "holder", "api_access", "api_read" ],
      },
      "remoteApis": [
        {
          "pathMatch": "/api/ssidArqNet",
          "targetUri": "https://xxxxxxxxxxxxxx/SsidArqNet.Backend.API",
          "requiredTokenType": "OptionalUserOrClient"
        }
      ]
    },
    "implicit": {
      "matchingPath": "/"
    }
  }
}

[ProgrammerAL]

@FDonald Without the full code it’s hard to debug. Internally, the BFF loads the remote APIs from config separately from the frontend config so it can re-load the remote APIs if anything changes.

I’m able to reproduce the issue you have, and fix it with the JSON I provided above. But your project is more complicated than what I have. Can you do a compare between your code and the sample project I was able to reproduce with? It's a bit of work to setup, but could be helpful comparing what you have locally to a working solution. The steps are below:

1. Pull down the Duende samples repo, and open the SplitHosts project. Full path: https://github.com/DuendeSoftware/samples/tree/main/BFF/v4/SplitHosts
2. Inside BackendHost project, delete appsettings.Development.json
3. Inside BackendHost project, replace appsettings.json config with content below
4. Inside BackendHost project, delete ToDoController.cs
5. Inside BackendHost project, replace Program.cs code with content below
6. Inside FrontendHost project, inside the /wwwroot/todo.js file, update the todoUrl variable on line 1 to the value const todoUrl = "https://localhost:5010/api/ssidArqNet";
7. Start all projects
8. Navigate to the frontend: https://localhost:5010. Log-in, notice the remote requests are making it to the BackendApiHost project

appsettings.json file content

{
  "Logging": {
    "LogLevel": {
      "Default": "Debug",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "frontends": {
    "angular-demo-bff": {
      "staticAssetsUrl": "https://localhost:5011",
      "matchingPath": "",
      "remoteApis": [
        {
          "pathMatch": "/api/ssidArqNet",
          "targetUri": "https://localhost:5020/todos/",
          "requiredTokenType": "User"
        }
      ]
    }
  }
}

Program.cs file content

using BackendHost;
using Duende.AccessTokenManagement.OpenIdConnect;
using Duende.Bff;
using Duende.Bff.DynamicFrontends;
using Duende.Bff.Endpoints;
using Duende.Bff.Yarp;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(opt =>
{
    opt.AddDefaultPolicy(policy =>
    {
        policy
            .WithOrigins("https://localhost:5011")
            .WithHeaders("x-csrf", "content-type")
            .WithMethods("DELETE")
            .AllowCredentials();
    });
});

var bffConfig = builder.Configuration;

builder.Services.AddBff()
    .AddRemoteApis()
    .LoadConfiguration(bffConfig)
    .ConfigureOpenIdConnect(options =>
    {
        options.Authority = "https://demo.duendesoftware.com";
        options.ClientId = "interactive.confidential";
        options.ClientSecret = "secret";
        options.ResponseType = "code";
        options.ResponseMode = "query";

        options.GetClaimsFromUserInfoEndpoint = true;
        options.MapInboundClaims = false;
        options.SaveTokens = true;
        options.DisableTelemetry = true;

        options.Scope.Clear();
        options.Scope.Add("openid");
        options.Scope.Add("profile");
        options.Scope.Add("api");
        options.Scope.Add("offline_access");

        options.TokenValidationParameters = new()
        {
            NameClaimType = "name",
            RoleClaimType = "role"
        };
    })
    .ConfigureCookies(options =>
    {
        options.Cookie.Name = "__Host-bff";
        options.Cookie.SameSite = SameSiteMode.Strict;
    });

builder.Services.AddTransient<IReturnUrlValidator, FrontendHostReturnUrlValidator>();

builder.Services.AddUserAccessTokenHttpClient("api_client", configureClient: client =>
{
    client.BaseAddress = new Uri("https://localhost:5002/");
});

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = BffAuthenticationSchemes.BffCookie;
    options.DefaultChallengeScheme = BffAuthenticationSchemes.BffOpenIdConnect;
    options.DefaultSignOutScheme = BffAuthenticationSchemes.BffOpenIdConnect;
});

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseCors();
app.UseAuthentication();
app.UseBff();

app.Run();

[FDonald]

Thank you @ProgrammerAL, I will test your example and send you feedback.
As a suggestion, Shouldn't the Duende Bff library log json serialization errors?

[ProgrammerAL]

@FDonald Great, let me know once you’ve tested it.

The config deserialization isn’t a specific BFF feature, it uses the .NET IConfiguration system to load the data, so BFF doesn’t have any insight to what is happening. Additionally, none of the config data is required. So if an object is missing from config, it’s assumed the developer didn’t want it there. Those two things in combination make it not possible to know when something is missing intentionally or accidentally.