通过 Auth0 React 和 ASP.net 核心授权然后使用 JWT 令牌答案

【问题标题】：Authorizing and then using JWT Token with Auth0 React & ASP.net core通过 Auth0 React 和 ASP.net 核心授权然后使用 JWT 令牌
【发布时间】：2020-04-28 22:04:59
【问题描述】：

我正在构建一个反应应用程序，使用 Auth0 作为我的 oauth 身份验证并使用 ASP.NET 核心 api 支持它。

从 React 中，我将用户重定向到 Auth0，我已经设置了一个单页应用程序应用程序。

登录成功后，它会使用代码将用户重定向回我的 React 应用程序。

然后我想将该代码转换为 JWT 令牌以授权访问后端 api，这就是失败的地方。

登录后，我使用 Auth0 提供的示例库并调用：

   const { getTokenSilently } = useAuth0();
   ...
   var token = await getTokenSilently();
   ...
   axios({
            url: `/api/Folder`,
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`
            }
   })

它确实提供了一个令牌，但这个令牌对于 JWT 令牌来说似乎太小了，它在标题中看起来像这样：

Authorization: Bearer 7hExNvsOM14TpY0qUnPbVqpizwLLxynw

我的 C# asp.net core api 的响应是：

www-authenticate: Bearer error="invalid_token"

我的 C# 代码如下所示：启动.cs

    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    }).AddJwtBearer(options =>
    {
        options.Authority = Configuration["Auth0:Authority"];
        options.Audience = Configuration["Auth0:Audience"];
        options.RequireHttpsMetadata = false;
        options.TokenValidationParameters = new TokenValidationParameters
        {
            NameClaimType = ClaimTypes.NameIdentifier
        };
    });

    IdentityModelEventSource.ShowPII = true; //for debug purposes
    ....
    app.UseAuthentication();
    app.UseAuthorization();

文件夹控制器.cs

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class FolderController : ControllerBase
{
 ....
}

【问题讨论】：

标签： reactjs asp.net-core access-token auth0 bearer-token

【解决方案1】：

您可以参考下面的文章，其中提供了有关如何验证用户并获取访问令牌以访问 asp.net core web api 的详细步骤：

Developing Web Apps with ASP.NET Core 2.0 and React - Part 1

Developing Web Apps with ASP.NET Core 2.0 and React - Part 2

Developing Web Apps with ASP.NET Core 2.0 and React - Part 3

一般来说，您应该在 react 应用程序中使用 Auth0 对用户进行身份验证时获取访问令牌 - 设置正确的 audience 值，该值包含您在 react 身份验证配置中注册的 API 的唯一标识符。

所以在认证过程中，会要求用户授予访问 web api 的权限，如果用户同意，react sdk 将获取访问令牌并保存到 react 应用程序的本地存储中。

【讨论】：

【解决方案2】：

您在问题中提到的那个标记是opaque access token。

JSON Web Token (JWT) ：符合 JSON Web Token 的 Token 标准并包含有关实体的信息，形式为索赔。它们是独立的，因为不需要收件人调用服务器来验证令牌。颁发的访问令牌对于为任何自定义发布的 Auth0 管理 API 和访问令牌您使用 Auth0 注册的 API 将遵循 JSON Web Token (JWT) 标准，这意味着它们的基本结构符合典型的 JWT 结构，它们包含关于令牌本身的标准 JWT 声明。

不透明令牌：专有格式的令牌，通常包含服务器持久存储中信息的一些标识符。到验证一个不透明的令牌，令牌的接收者需要调用颁发令牌的服务器。不透明的访问令牌是其令牌您无法访问的格式。 Auth0 颁发的不透明访问令牌可以是与 /userinfo 端点一起使用以返回用户的个人资料。

更多信息here。

要克服它...您需要设置您的 API 项目@Auth0。

当调用 Auth0 对您的用户进行身份验证时，相应地传递 audience 和 scope。

audience 是您在 Auth0 仪表板中设置 ASP.NET Web Core API 时为其指定的友好名称。

这是 .NET Core 3 的完整 step by step tutorial。

【讨论】：

这就是寻找的答案