Google Auth 在 Blazor 中获取访问令牌时出错

Question

我目前有一个带有 Blazor WASM 的 ASP.Net Core Web Api，它可以使用组件 RemoteAuthenticatorView 成功登录到 Google OAuth。我现在的意图是将我拥有的令牌传递给 web api，希望它可以用来对 web api 进行身份验证。问题是 TokenProvider.RequestAccessToken() 产生以下错误。

blazor.webassembly.js:1 Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.DateTimeOffset. Path: $.token.expires | LineNumber: 0 | BytePositionInLine: 88.. See InnerException for more details.
System.Text.Json.JsonException: The JSON value could not be converted to System.DateTimeOffset. Path: $.token.expires | LineNumber: 0 | BytePositionInLine: 88.

            var tokenResult = await TokenProvider.RequestAccessToken();

            if (tokenResult.TryGetToken(out var token))
            {
                requestMessage.Headers.Authorization =
                  new AuthenticationHeaderValue("Bearer", token.Value);
                var response = await Http.SendAsync(requestMessage);

            }
        

程序.cs

            builder.Services.AddOidcAuthentication(options =>
            {
                builder.Configuration.Bind("Local", options.ProviderOptions);
                options.ProviderOptions.DefaultScopes.Add("email");
            });

有什么想法吗？是否缺少范围？我可以在 Session 存储中看到 id_token...也许有任何 Blazor WASM 和核心 web api 的 net 5 示例？

编辑： 我看到 RequestAccessToken 对 google auth 进行了网络调用，就像它试图再次进行身份验证一样

Answer 1

使用个人帐户独立创建 WebAssembly Blazor 应用。

将appsettings.json文件中的内容替换为以下代码：

{
  "Google": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "11111111111-11111111111111111111111111111111.apps.googleusercontent.com",
    "DefaultScopes": [ "email" ], // The Blazor WebAssembly template automatically configures default scopes for openid and profile
    "PostLogoutRedirectUri": "https://localhost:44313/authentication/logout-callback",
    "RedirectUri": "https://localhost:44313/authentication/login-callback",
    "ResponseType": "id_token token"
  }
}

运行您的应用程序，然后单击登录链接...您将被重定向到 Google 的登录页面。使用 Google 进行身份验证...您将被重定向到您的应用，登录更改为注销，并且您的用户名出现在它附近。

您可以通过开发者工具查看 id_token 和 profile。

如何获取访问令牌？

将以下代码 sn-p 添加到您的索引页面并运行...

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

@inject IAccessTokenProvider TokenProvider

<p>@output</p>

<button @onclick="DisplayToken">Display Access Token </button>

@code
{
    private string output;

    private async Task DisplayToken()
    {
        var tokenResult = await TokenProvider.RequestAccessToken();

        if (tokenResult.TryGetToken(out var token))
        {
            output = token.Value;

        }
    }

}

注意：以上代码仅用于演示目的（遵循您的代码示例）。但是，如果您使用 HttpClient 服务对 Web Api 执行 HTTP 调用，则 AuthorizationMessagelHandler 对象会自动检索访问令牌并将其分配给 Authorization 标头。