如何在blazor托管的wasm中使用oauth2

Question

我的项目是由dotnet cli创建的

dotnet new blazorwasm --hosted

我的项目结构是

​

​

我添加了PingOne Oauth提供者，它具有client_保密/client_id和其他配置.

服务器文件夹: Program.cs

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

ConfigureAuthentication(builder.Services);

void ConfigureAuthentication(IServiceCollection serviceCollection)
{
    // serviceCollection
    serviceCollection.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = "PingOne";
    }).AddCookie().AddOAuth("PingOne", options =>
    {
        options.AuthorizationEndpoint = "https://xxx.xxx.xxx/xxx/xxx/authorization.oauth2";
        options.CallbackPath = "/callback";
        options.ClientId = "xxx";
        options.ClientSecret = "xxx";
        options.TokenEndpoint = "https://xxx.xxx.xxx/xxx/xx/token.oauth2";
        options.UserInformationEndpoint = "https://xxx.xx.xx/xx/xxx/userinfo.openid";
        options.SaveTokens = true;
        options.Events = new OAuthEvents
        {
            OnCreatingTicket = async context =>
            {
                var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
                request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);

                var response = await context.Backchannel.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
                response.EnsureSuccessStatusCode();
                Console.WriteLine(await response.Content.ReadAsStringAsync());
                var responseText = await response.Content.ReadAsStringAsync();
                var user = JsonDocument.Parse(responseText);
                context.RunClaimActions(user.RootElement);

            }
        };
    });
}

客户端文件夹: Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using BlazorOAuth.Client;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

客户端文件夹：_Imports.razor：

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorOAuth.Client
@using BlazorOAuth.Client.Shared
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@attribute [Authorize]

在Counter.razor：

@page "/counter"
@attribute [Authorize]
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

我不知道如何自动跳转到PingOne或其他oauth的auth页面。blazor客户端不会自动跳转到auth页面，因为我没有配置something.Also，我有一个带有授权属性的WeatherForecastController。客户端向api发送请求，但也没有跳转到oauth授权页面。我以为我配置了services.AddOuth()，它就能做到.

​

​

--我捕获请求。我发现它重定向到授权终结点url。但是响应是html代码。我不知道如何在屏幕上显示

请帮我或粘贴教程什么的。真的很感激。

'<‘是一个值的无效开始。

这个错误的原因是:工作流是用授权的attribute.but请求天气预报服务的，它还没有被授权。因此，服务授权endpoint.then oauth，即PingOne identity.the授权提供者响应一堆html代码。我不知道如何在屏幕上显示或重定向到端点url.in，在这种情况下，客户端可以输入密码到授权并请求气象服务

Answer 1

当使用WebAssembly (或任何spa框架，例如角)时，最好的做法是使用授权-代码流实现openid连接身份验证。

您的客户端应该重定向到oauth提供程序，并且在您的客户机中的用户日志从oauth提供程序获得访问令牌之后。客户端将此访问令牌发送到您的服务器的api请求。

示例客户端Program.cs：

// BaseAddressAuthorizationMessageHandler attaches access token to outgoing requests
builder.Services
    .AddHttpClient("ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
  
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("ServerAPI"));
  
builder.Services
    .AddOidcAuthentication(options =>
    {
        options.ProviderOptions.Authority = "https://xxx";
        options.ProviderOptions.ClientId = "xxx";
        options.ProviderOptions.ResponseType = "code";
        options.ProviderOptions.DefaultScopes.Add("scope1");
        options.ProviderOptions.DefaultScopes.Add("scope2");        
    });

然后，您的服务器需要通过询问oauth提供程序来验证此访问令牌。示例服务器配置：

services
    .AddAuthentication("Bearer")
    .AddJwtBearer("Bearer", options =>
    {
        options.Authority = "https://xxx";
    });

这是关于如何登录到oidc提供程序并获取访问令牌：https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-6.0&tabs=visual-studio的文档。

这是如何将访问令牌附加到api请求到您的服务器：https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-6.0#attach-tokens-to-outgoing-requests