0

I'm having issue to call authorize api from react SPA. It's working if removed the [Authorize] attribute in the controller/action, but once added in the attribute, the response goes to SPA home page.

Project Structure

  • IdentityServer (.net core 3.1 mvc with IdentityServer4 *reference token type)

  • Login (authentication with IdentityServer and auth callback to Portal)

  • Portal (.net core 3.1 react SPA, use IdentityServer4.AccessTokenValidation to validate

react

fetch('/api/test').then(async (response) => {  
  var data = await response.json();
  console.dir(response);
  console.dir(data);
});

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();

    services.AddControllersWithViews()
        .ConfigureApiBehaviorOptions(options => { options.SuppressModelStateInvalidFilter = true; });

    services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
        .AddIdentityServerAuthentication(options =>
            {
                options.Authority = "https://localhost:44302";
                options.ApiName = "api1";
                options.ApiSecret = "thisissecret";
            });

    services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/build"; });
}

public override void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseStaticFiles();
    app.UseSpaStaticFiles();
    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints => { endpoints.MapDefaultControllerRoute(); });
    app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";
            if (_WebHostEnvironment.IsDevelopment())
            {
                spa.UseReactDevelopmentServer("start");
            }
        });
}

Is worked if the api controller doesn't have the "Authorize" attribute, but once added in then will keep on unauthorized.

Community
  • 1
  • 1
Kelvin Go
  • 84
  • 1
  • 10
  • How do you config the client side authentication library , and when calling web api .do you use reference token as http request header ? you can also use fiddler to trace the web api request to check whether any detailed error message returned . – Nan Yu Apr 20 '20 at 02:18
  • can we see controller code? specifically the [Route] attribute please, are you adding /api/ on front of it? – Pablo Recalde Apr 20 '20 at 11:37
  • @PabloRecalde, thanks for your help. is my mistake that missing to configure in identityserver cause the issue. – Kelvin Go Apr 20 '20 at 19:20
  • @NanYu , thanks for your help. is my mistake that missing to configure in identityserver cause the issue. – Kelvin Go Apr 20 '20 at 19:20

1 Answers1

1

Sorry guys, is my mistake that I've missed to set the ApiSecret in IdentityServer. Therefore the it's keep on unauthenticated.

new ApiResource("api1", )
{
    // the missing part
    ApiSecrets = {
        new Secret("thisissecret".Sha256())
    }
}
Kelvin Go
  • 84
  • 1
  • 10