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

Posted 2023-03-08

【中文标题】通过 Auth0 React 和 ASP.net 核心授权然后使用 JWT 令牌

【英文标题】：Authorizing and then using JWT Token with Auth0 React & ASP.net core

【发布时间】：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

 ....

【参考方案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。

【讨论】：

这就是寻找的答案