2

I am writing a demo Blazor WebAssembly SPA technical demo app, but I have some problems with authentication. I'm going to use Identity Server to do the authorization but i can't find any libraries to support it. All the tutorials I found guided to use Blazor Server or add an ASP.net Core hosted, but it's not really make sense for my demo app.

I am glad if anyone can help.

Thank you

Vu Minh
  • 23
  • 1
  • 3

1 Answers1

9

March 12th, 2020

To add OIDC to an existing Blazor WASM app using an existing OAuth identity provider read Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library.
The new Microsoft.AspNetCore.Components.WebAssembly.Authentication support automatic silent renew.

If you prefere to use a configuration file instead of hard coded values, you can setup the app like this

Visit theidserver.herokuapp.com/ for a full fonctional sample.

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication::3.2.0-preview2.20160.5
  • Add AuthenticationService.js to index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
    <app>Loading...</app>
...
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
  • Add an oidc.json file in application's wwwroot folder with this structure
{
  "authority": "https://myidp.com", // Uri to your IDP server
  "client_id": "myclientid", // Your client id
  "redirect_uri": "https://localhost:44333/authentication/login-callback", // Uri to the application login callback
  "post_logout_redirect_uri": "https://localhost:44333/authentication/logout-callback", // Uri to the application logout callback
  "response_type": "code", // OAuth flow response type. For `authorization_code` flow the response type is 'code'. For `implicit` flow, the response type is 'id_token token'
  "scope": "BlazorIdentityServer.ServerAPI openid profile" // list of scope your application wants
}
  • Configure Api authorization to read config from your oidc.json file
    Update your Program.cs to be :
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;

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

            builder.Services.AddBaseAddressHttpClient();
            builder.Services.AddApiAuthorization(options => options.ProviderOptions.ConfigurationEndpoint = "oidc.json");

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

March 11th, 2020

3.2.0-preview2 provides a way to use Blazor Wasm with IdentityServer
Read

March 9th, 2020

At the moment there are some blazor OIDC lib you can use but none are certified and implement all features.

If you are curious, I write my own to support token silent renew but it's not finished yet and I stuck by this issue : [wasm] WasmHttpMessageHandler, Provide fetch options per message.
The issue is fixed in this not yet merged PR. So have to wait or implement my own WasmHttpMessageHandler.

A second approach is to wrap oidc.js using JS interop

agua from mars
  • 16,428
  • 4
  • 61
  • 70
  • Thanks, I didn't know these projects. You helped me a lot. I just played around with these repositories and I think HLSoft.BlazorWebAssembly.Authentication.OpenIdConnect is suitable with my app. The author has just written it recently, it will support neswest blazor, and he supplied many expamles, one for full-website authentication, and one has silent renew token supporting. I think it's enough for my project - only technical review demo though. Again, thank you very much :D – Vu Minh Mar 09 '20 at 08:17
  • Thanks, just finished the demo ^^. I'll check that new Microsoft's feature – Vu Minh Mar 12 '20 at 06:41
  • 1
    Any recommendation on how to get a full SPA login instead of using the MVC scaffolding? – Lucas Apr 20 '20 at 03:44
  • @Insight I hope this like will help you : https://learn.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/additional-scenarios?view=aspnetcore-3.1#customize-the-authentication-user-interface – agua from mars Apr 20 '20 at 06:28