Google 在 Blazor 中获取访问令牌时发生身份验证错误

Question

我目前有一个带有 Blazor WASM 的 ASP.Net Core Web Api，它可以使用组件 RemoteAuthenticatorView 成功登录 Google OAuth。我现在的目的是将我拥有的令牌传递给网络 api，希望它可以用于通过网络进行身份验证 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);

            }

Program.cs

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

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

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

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

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

您可以通过开发者工具查看 id_token 和个人资料。

如何检索访问令牌？

将以下代码片段添加到您的索引页，然后运行...

@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 object.

分配给授权 header

Google 在 Blazor 中获取访问令牌时发生身份验证错误

Google Auth error getting access token in Blazor

asp.net-core-webapi

blazor

blazor-client-side