Login error using Blazor Web Assembly and Identity Server 4

Viewed 4730

I followed the tutorial for the Blazor WebAssembly standalone app by microsoft. I'm using Identity Server 4 along with it's UI installed for login, etc., and was able to view the well-known page. I assumed that I had everything in place for a standard login from the blazor app, but I never get to the login page for Identity Server. Instead the Blazor app returns this error message when I hit the login link:

There was an error trying to log you in: 'Invalid response Content-Type: text/html, from URL: https:login.microsoftonline.com/.well-known/openid-configuration'

I'm not sure why this is happening, and I have no clue as to why the url is directed at microsoftonline.com. I feel like I am missing an obvious step here. What am I missing?

Blazor launchSettings:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:59723",
      "sslPort": 44398
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "ClientBlazor": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:5003",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Blazor appsettings:

{
  "Local": {
    "Authority": "https://localhost:5001",
    "ClientId": "BlazorClient",
    "DefaultScopes": [
      "openid",
      "profile"
    ],
    "PostLogoutRedirectUri": "/",
    "ResponseType":  "code"
  }
}

Blazor Main method:

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddOidcAuthentication(options =>
            {
                // Configure your authentication provider options here.
                // For more information, see https://aka.ms/blazor-standalone-auth
                builder.Configuration.Bind("Local", options.ProviderOptions);
            });

            await builder.Build().RunAsync();
        }

Identity Server launchSettings:

{
  "profiles": {
    "SelfHost": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001"
    }
  }
}

Identity Server config:

public static IEnumerable<Client> Clients =>
            new List<Client>
            {
                // SPA client using code flow + pkce
                new Client
                {
                    ClientId = "BlazorClient",
                    ClientName = "Blazor Client",
                    ClientUri = "https://loclhost:5003/",

                    AllowedGrantTypes = GrantTypes.Code,
                    RequirePkce = true,
                    RequireClientSecret = false,

                    RedirectUris =
                    {
                        "https://localhost:5003/authentication/login-callback"
                    },

                    PostLogoutRedirectUris = { "http://localhost:5003/" },
                    AllowedCorsOrigins = { "http://localhost:5003" },

                    AllowedScopes = { "openid", "profile" },
                    Enabled = true
                }
            };
4 Answers

The solution was rather simple, but I'm not sure to as why when I literally followed the tutorial from microsoft. Basically it involved changing "Local" name in the appsettings.json to "oidc". I don't know if this is a camel/pascal case thing or what.

appsettings.json:

{
  "oidc": {
    "Authority": "https://localhost:5001/",
    "ClientId": "SedduoBlazorClient",
    "DefaultScopes": [
      "openid",
      "profile"
    ],
    "PostLogoutRedirectUri": "/",
    "RedirectUri":  "https://localhost:5003/authentication/login-callback",
    "ResponseType": "code"
  }
}

Program.cs:

public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddOidcAuthentication(options =>
            {
                //options.ProviderOptions.Authority = "https://localhost:5001/";
                // Configure your authentication provider options here.
                // For more information, see https://aka.ms/blazor-standalone-auth
                builder.Configuration.Bind("oidc", options.ProviderOptions);
            });

            await builder.Build().RunAsync();
        }
    }

You forgot to provide the login redirect URI in your OIDC settings:

{
  "Local": {
    "Authority": "https://localhost:5001",
    "ClientId": "BlazorClient",
    "DefaultScopes": [
      "openid",
      "profile"
    ],
    "PostLogoutRedirectUri": "https://localhost:5003/",
    "RedirectUri": "https://localhost:5003/authentication/login-callback",
    "ResponseType":  "code"
  }
}

The PostLogoutRedirectUri should be an absolute URI as well.

Just had that issue where it was working before and it was due to cookies. I did some changes and had to clear my cookies, after it all worked (it worked in incongito)

Who have this problem when publishing on IIS with a self-signed certificate, it may be caused by auth of Application Pool on read the Certificate.

When you run the .exe and try to log in, the login fails and the .exe console shows "Keyset does not exist".

For solve this problem, open certification manager, right click on the certificate, all tasks, private key manager and insert IIS group (IIS_IUSRS) for read/write permission. For test, try "Everyone".

Related