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

Question

I am writing a demo Blazor WebAssembly SPA technical demo app, but I have some problems with authentication.我正在编写一个演示 Blazor WebAssembly SPA 技术演示应用程序，但我在身份验证方面遇到了一些问题。 I'm going to use Identity Server to do the authorization but i can't find any libraries to support it.我将使用 Identity Server 进行授权，但我找不到任何支持它的库。 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.我发现的所有教程都指导使用 Blazor Server 或添加托管的 ASP.net Core，但这对我的演示应用程序来说没有意义。

I am glad if anyone can help.如果有人可以提供帮助，我很高兴。

Thank you谢谢

Answer 1

March 12th, 2020 2020 年 3 月 12 日

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 .若要使用现有 OAuth 身份提供程序将 OIDC 添加到现有 Blazor WASM 应用程序，请阅读使用身份验证库保护 ASP.NET Core Blazor WebAssembly 独立应用程序。
The new Microsoft.AspNetCore.Components.WebAssembly.Authentication support automatic silent renew.新的Microsoft.AspNetCore.Components.WebAssembly.Authentication支持自动静默更新。

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.访问theidserver.herokuapp.com/以获得完整的功能示例。

Upgrade your app to 3.2.0 Preview 2将您的应用升级到 3.2.0 预览版 2
Read Upgrade an existing project paragraph阅读升级现有项目段落
Add package Microsoft.AspNetCore.Components.WebAssembly.Authentication添加包 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将 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>

Add an oidc.json file in application's wwwroot folder with this structure使用此结构在应用程序的 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
}

Configure Api authorization to read config from your oidc.json file配置 Api 授权以从您的 oidc.json 文件中读取配置
Update your Program.cs to be :将您的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();
        }
    }
}

March 11th, 2020 2020 年 3 月 11 日

3.2.0-preview2 provides a way to use Blazor Wasm with IdentityServer 3.2.0-preview2提供了一种将 Blazor Wasm 与 IdentityServer 结合使用的方法
Read读

March 9th, 2020 2020 年 3 月 9 日

At the moment there are some blazor OIDC lib you can use but none are certified and implement all features.目前，您可以使用一些 blazor OIDC lib，但没有一个经过认证并实现所有功能。

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 .如果你很好奇，我自己写来支持令牌静默更新，但它还没有完成，我被这个问题困住了： [wasm] WasmHttpMessageHandler，为每条消息提供获取选项。
The issue is fixed in this not yet merged PR .该问题已在此尚未合并的 PR 中得到解决。 So have to wait or implement my own WasmHttpMessageHandler .所以必须等待或实现我自己的WasmHttpMessageHandler 。

A second approach is to wrap oidc.js using JS interop第二种方法是使用JS interop包装oidc.js

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

问题描述

1 个解决方案

解决方案1
9 已采纳 2020-03-09 07:31:22

March 12th, 2020 2020 年 3 月 12 日

March 11th, 2020 2020 年 3 月 11 日

March 9th, 2020 2020 年 3 月 9 日

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

问题描述

1 个解决方案

解决方案1 9 已采纳 2020-03-09 07:31:22

March 12th, 2020 2020 年 3 月 12 日

March 11th, 2020 2020 年 3 月 11 日

March 9th, 2020 2020 年 3 月 9 日

解决方案1
9 已采纳 2020-03-09 07:31:22