CODEWITHSUNDEEP
authenticationidentityserver4blazorblazor-client-side
Vu Minh
Vu Minh

Reputation: 23

How to authorize a Blazor WebAssembly SPA app using Identity Server

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

Upvotes: 2

Views: 9843

Answers (1)

agua from mars
agua from mars

Reputation: 17444

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

Upvotes: 9

Related Questions