如何使用 Identity Server 授权 Blazor WebAssembly SPA 应用程序

Question

我正在编写一个演示 Blazor WebAssembly SPA 技术演示应用程序，但我在身份验证方面遇到了一些问题。我打算使用 Identity Server 进行授权，但我找不到任何库来支持它。我发现的所有教程都指导使用 Blazor Server 或添加 ASP.net 核心托管，但它对我的演示应用程序没有意义。

如果有人能提供帮助，我很高兴。

谢谢

Answer 1

2020 年 3 月 12 日

要使用现有的 OAuth 身份提供商将 OIDC 添加到现有的 Blazor WASM 应用，请阅读 Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library。
新的 Microsoft.AspNetCore.Components.WebAssembly.Authentication 支持自动静默更新。

如果您更喜欢使用配置文件而不是硬编码值，您可以像这样设置应用程序

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

将您的应用升级到 3.2.0 预览版 2
阅读 Upgrade an existing project paragraph
添加包Microsoft.AspNetCore.Components.WebAssembly.Authentication

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication::3.2.0-preview2.20160.5

将AuthenticationService.js添加到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>

使用此结构在应用程序的 wwwroot 文件夹中添加一个 oidc.json 文件

{
  "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
}

配置 Api 权限以从您的 oidc.json 文件中读取配置
将您的 Program.cs 更新为：

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();
        }
    }
}

2020 年 3 月 11 日

3.2.0-preview2 提供了一种将 Blazor Wasm 与 IdentityServer 一起使用的方法
阅读

2020 年 3 月 9 日

目前有一些 blazor OIDC 库可供您使用，但 none 已通过认证并实现所有功能。

如果你好奇，我写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。
此问题已在 not yet merged PR 中修复。所以必须等待或实施我自己的 WasmHttpMessageHandler.

第二种方法是包装 oidc.js using JS interop

如何使用 Identity Server 授权 Blazor WebAssembly SPA 应用程序

How to authorize a Blazor WebAssembly SPA app using Identity Server

authentication

identityserver4

blazor

blazor-client-side

2020 年 3 月 12 日

2020 年 3 月 11 日

2020 年 3 月 9 日