如何使用Auth0、ASP.NET Core和Nuxt.js处理Web App认证

DebugUsery
680 阅读9分钟

使用Auth0、ASP.NET Core和Nuxt.js处理Web应用认证

现代应用程序已经实施了几种机制来认证和验证其访问者。每个开发者都倾向于设计他们的方法来认证和验证访问系统的用户。

这似乎是一个简单的方法，但建立自己的认证系统，甚至与第三方社交媒体平台（如谷歌和Facebook）集成，可能是繁琐、耗时的，有时还很复杂。

一个更好的方法是使用一个已经专用的认证平台来验证和认证用户进入系统。一个很好的例子是Auth0，它使开发者不必处理敏感的用户数据，因为它处理认证。该平台有专门的安全专家团队支持，专门处理用户数据隐私。

本指南将使用Auth0 平台来认证和验证用户进入系统，使用ASP.NET Core API 和Nuxt.js 。

前提条件

  • 安装了最新的[Visual Studio]
  • 对[ASP.NET Core]、[JavaScript]、[Vue.js]和[Nuxt.js]有一定的了解
  • 安装一个网络浏览器，最好是[谷歌浏览器]
  • 安装了[Npm]软件包
  • [Auth0]账户

了解Auth0的概念

Auth0 处理特定系统中的用户管理问题。它的目的是对系统中的请求进行认证和验证。Auth0具有许多用于认证的功能。其中一些功能包括使用 或 的社交媒体登录，Facebook Google单点登录（SSO），并且还支持多因素认证。

Auth0认证如何工作

用户将使用他们正确的用户名和密码或社交媒体平台从客户端应用程序登录。接下来，登录请求会被转发到Auth0 平台，认证成功后，它会以一个访问令牌作为回应。

然后，客户端应用程序可以从后端请求数据，它与之前的访问令牌一起发送。在收到请求后，后端API将首先与Auth0 ，以确认该令牌的有效性，在验证成功后，它将回应所请求的数据。

设置Auth0

我们将首先通过访问这个链接创建Auth0 账户。登录后我们将访问我们的Auth0 ，然后导航到Application 标签。点击Create Application 选项，然后点击Single Page Web Application 选项，创建它，如下图所示。

create auth0 app

接下来，进入我们新的Auth0 应用程序的设置标签，记下我们在本教程中稍后将使用的Domain 和Client ID 。

auth0 domain

在同一个应用程序页面上，找到Application URLs ，并填写以下字段，如下所示。

Origins (CORS) = http://localhost:3000
Web Origins = http://localhost:3000
Callback URL = http://localhost:3000/login

然后我们保存所做的修改。

注意，链接http://localhost:3000将是我们Nuxt应用程序的URL。另外，如果人们根据自己的喜好使用不同的端口，可以改变端口3000 。

接下来，我们需要我们的Auth0 ，连接到我们的API。首先，我们导航到API并点击Create API 按钮。然后，我们输入所需的细节：Name 和一个Identifier ，并点击Create 按钮，如下图所示。我们应该注意Identifier ，因为我们以后会需要它。

auth0 API

创建ASP .NET Core后端API

在本节中，我们将使用Visual StudioASP.NET Core API 项目模板创建一个新项目。我们首先启动我们的Visual Studio应用程序，创建一个新项目，选择ASP.NET Core Web Application ，然后点击API 选项。

下面的NuGet packages ，必须预先安装在Visual Studio中。

Microsoft.AspNetCore.Authentication.OpenIdConnect
Microsoft.AspNetCore.Authentication.JwtBearer

由于我们必须使用Auth0 来验证访问令牌，我们的ASP.NET API 必须知道我们先前从Auth0 API 得到的Domain 和Identifier 的值。我们将使用用户秘密变量来确保我们的应用程序增强安全性。

浏览到ASP.NET Core项目目录，在终端执行以下命令。

dotnet user-secrets init
dotnet user-secrets set "Config:Auth:Audience" "<The Auth0 API Unique Identifier>"
dotnet user-secrets set " Config:Auth:Authority" "<The Auth0 API Domain>"

请注意，Domain 和Identifier 的值应该用我们早些时候从我们在Auth0 中创建的 API 中得到的域和标识符来代替。

接下来，编辑Startup 类中的ConfigureServices 方法，如下所示。

public void ConfigureServices(IServiceCollection config_serv)
{
    config_serv.AddAuthentication(auth_opt =>
    {
        auth_opt.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        auth_opt.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    }).AddJwtBearer(jwt_opt =>
    {
        var config_auth0 = Configuration.GetSection("Config:Auth");

        jwt_opt.Audience = config_auth0["Audience"];
        jwt_opt.Authority = config_auth0["Authority"];
    });
}

在上面的代码片段中，我们已经配置了ASP.NET Core ，用JWT Bearer的帮助来验证请求，并使用我们先前存储在User Secrets 变量中的值对Auth0 进行验证。

我们还编辑了我们的Configure 方法，因为我们配置了中间件管道属性，如下所示。

public void Configure(IApplicationBuilder config_app, IWebHostEnvironment env)
{

    config_app.UseHttpsRedirection();

    config_app.UseCors(builder =>
    {
        builder
            .WithOrigins("http://localhost:3000")
            .AllowAnyHeader()
            .AllowAnyMethod();
    });

    config_app.UseRouting();

    config_app.UseAuthentication();
    config_app.UseAuthorization();

    config_app.UseEndpoints(my_end_point =>
    {
        my_end_point.MapControllers();
    });
}

在上面的代码片段中，我们已经添加了一个CORS策略，从运行在地址http://localhost:3000 的Nuxt应用程序转发到后台API的请求。

接下来，我们调用了函数config_app.UseAuthentication() ，允许应用程序使用我们先前在ConfigureServices 方法中定义的配置。

最后，我们要保护我们应用程序中的一个控制器。在这种情况下，由于我们使用了Visual StudioASP.NET Core Web template ，我们已经有了一个WeatherForecastController 。为了保护该控制器，我们将在该类的顶部添加[Authorize] 属性：WeatherForecassController class 。

创建Nuxt客户端应用程序

在本节中，我们将创建Nuxt 客户端应用程序。首先，在终端运行下面的命令。

yarn create nuxt-app <the-application-name>

该命令会提示我们选择选项，为了保持简单，我们会让它们保持原样。

然后，我们安装我们的客户端Nuxt 应用程序需要的几个依赖和模块。首先，浏览到Nuxt项目的根目录，执行下面的命令。

yarn add @nuxtjs/auth @nuxtjs/dotenv @nuxtjs/axios

上面的命令获取了Axios包，它协助我们向后端API发出请求。Auth 模块处理Nuxt客户端应用程序的认证。Dotenv 模块将秘密的Auth0 值保存在环境变量中，存储在.env 文件中。

声明环境变量并将其存储在Nuxt项目目录下的.env 文件中，如下所示。

CONFIG_AUTH_DOMAIN=My_Domain
CONFIG_AUTH_CLIENTID=My_ClientID
CONFIG_AUTH_AUDIENCE=My_Identifier

注意，My_Domain,My_ClientID, 和My_Identifier 的值将来自于我们先前在Auth0 帐户中创建的Auth 应用程序。

按照下面的方法编辑文件nuxt.config.js ，让Nuxt应用程序利用之前安装的模块。

modules: [
  '@nuxtjs/auth', '@nuxtjs/axios',
],
buildModules: [
  '@nuxtjs/dotenv'
]

接下来，需要设置Axios ，以便连接到我们的后端。注意，ASP.NET Core Web 的base URL ，默认为https://localhost:5001。另外，请注意，它可以是不同的，这取决于开发者的项目配置。

axios: {

  baseURL: 'https://localhost:5001'

},

然后，我们将设置Nuxt路由器，这样，如果应用程序的用户没有经过Auth 中间件的认证，就不能访问应用程序中的安全页面，而是会被重定向到登录页面。下面的配置确保了我们客户端应用程序中的所有路由都受到保护。

router: {

  middleware: ['auth'],

},

最后，我们将使Auth 中间件从存储在我们先前创建的.env 文件中的环境变量中获取Auth0 值，并将它们存储在一个名称为auth0 的策略中，如下所示。

auth: {
  strategies: {
    auth0: {
      audience: process.env.CONFIG_AUTH_AUDIENCE,
      client_id: process.env.CONFIG_AUTH_CLIENTID,
      domain: process.env.CONFIG_AUTH_DOMAIN
          }
  }
}

我们已经成功地配置了文件nuxt.config.js 。接下来，在store 文件夹中，我们将添加一个空文件，index.js 。原因是Auth 中间件利用Nuxt存储来保存认证细节。这个文件也有助于激活商店。

最后，我们将添加更多的页面到我们的前端应用程序。index.vue 首先，我们将在新的目录中添加一个名为pages 的页面，从我们的后台API中获取数据并在我们的客户端应用程序中渲染。在访问该页面之前，用户必须经过认证，如果没有，用户将被重定向到签到页面。

正如前面所讨论的，我们也保护了我们的后端，这意味着任何可能访问我们前端的未经授权的用户都不会得到任何数据，因为后端不允许这样做。

请注意，这是网络应用程序开发中的一个基本原则，即你要保护应用程序的前端和它的后端。

我们将首先创建文件index.vue ，如下图。

<script>
  export default {
    data() {
      return {
        res_display: []
      }
    },
    async mounted() {
      const res_display = await this.$axios.$get('weatherforecast')
      this.res_display = res_display
    }
  }
</script>
<template>
  <td>
    <h2>Index Page</h2>
    {{ res_display }}
  </td>
</template>

签到页面将显示一个签到按钮，点击后会加载默认的签到与Auth0 页面。

我们将在pages 文件夹内创建文件login.vue ，如下所示。

<script>
export default {
  methods: {
    name: 'LoginButton',
    btn() {
      this.$auth.loginWith('auth0')
    }
  }
}
</script>
<template>
  <td>
    <h2>Sign-In Page</h2>
    <button @click="btn">Auth0 Sign-In</button>
  </td>
</template>

在上面的代码片段中，登录方法将根据先前在Auth 模块中的设置发送登录请求。

然后我们将继续运行API和Nuxt客户端项目。为了运行我们的API，我们浏览到API项目的根目录并执行以下命令。

dotnet build
dotnet run

要执行Nuxt客户端项目，浏览到Nuxt项目根目录，在终端运行以下命令。

yarn build
yarn start

浏览到我们的Nuxt应用程序的base URL ：http://locahost:3000，将显示一个登录页面，如下图。

login page

然后，我们将点击登录按钮，这将使我们重定向到Auth0 登录页面，如下所示。

auth0 login

然后我们将用我们在设置Auth0 账户时指定的任何方法登录。认证成功后，我们将被重定向到我们客户端应用程序的索引页。

这使得前端可以从后端发送一个数据请求，并从Auth0 。然后API会验证该令牌是否对Auth0 有效，验证成功后，它将返回天气预报数据，如下图所示。

weather-forecast

总结

正如我们所看到的，使用第三方安全认证平台Auth0 ，可以限制对Nuxt 前端应用程序和后端API的访问。开发人员应该接受使用Auth0 来验证他们应用程序的用户。这将帮助他们避免开发其认证系统的麻烦和复杂性。

此外，第三方认证平台，如Auth0 ，为认证和管理特定系统中的用户提供了一个安全、最快和简单的方法。本教程中使用的代码可以在我的GitHub Repo中找到。

avatar
文章
阅读
粉丝