本文介绍了如何使用Identity Server授权Blazor WebAssembly SPA应用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

很高兴有人能帮忙.

谢谢

推荐答案

2020年3月12日

要使用现有的OAuth身份提供程序将OIDC添加到现有的Blazor WASM应用程序中,请阅读使用身份验证库保护ASP.NET Core Blazor WebAssembly独立应用的安全性..
新的 Microsoft.AspNetCore.Components.WebAssembly.Authentication 支持自动静默续订.

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

  • 将您的应用升级到3.2.0预览版2
    阅读升级现有项目段落

    添加程序包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 提供了一种在IdentityServer中使用Blazor Wasm的方法
          阅读

          March 11th, 2020

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

          目前,您可以使用一些出色的OIDC库,但没有经过认证并实现所有功能.

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

          如果您好奇,我会写我自己的支持令牌无提示续订,但尚未完成,我对此问题表示怀疑: [wasm]WasmHttpMessageHandler,提供每条消息的提取选项.
          尚未合并的PR 中已解决了该问题.因此必须等待或实现我自己的 WasmHttpMessageHandler .

          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.

          第二种方法是使用 oidc.js ://docs.microsoft.com/zh-cn/aspnet/core/blazor/call-javascript-from-dotnet?view = aspnetcore-3.1"rel =" noreferrer> JS互操作

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

          这篇关于如何使用Identity Server授权Blazor WebAssembly SPA应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-09 04:08