问题

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

回答1:

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.

Upgrade your app to 3.2.0 Preview 2
Read Upgrade an existing project paragraph
Add package Microsoft.AspNetCore.Components.WebAssembly.Authentication

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

Secure an ASP.NET Core Blazor WebAssembly hosted app with Identity Server
ASP.NET Core Blazor WebAssembly additional security scenarios

March 9th, 2020

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

HLSoft.BlazorWebAssembly.Authentication.OpenIdConnect
Authfix/Blazor-Oidc
sotsera/sotsera.blazor.oidc
MV10/BlazorOIDC

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

来源：https://stackoverflow.com/questions/60593985/how-to-authorize-a-blazor-webassembly-spa-app-using-identity-server

标签

authentication