用 Serverless Framework 部署 Auth0 自定义社交连接

面试官：小伙子，你的数组去重方式惊艳到我了

在开发 web 应用的过程中，社交登录已经成为了必备功能，因为它能够方便用户快速登录应用，而不用填写复杂的注册表格，从而提升用户体验。Auth0 是一种通用的身份验证和授权管理服务，可以添加各种社交登录连接，包括自定义的。

在这篇文章中，我们将介绍如何使用 Serverless Framework 部署 Auth0 自定义社交连接。我们将使用 AWS Lambda 和 API 网关作为 serverless 的主要组件。

步骤1: 创建 AWS Lambda 函数

第一步是创建一个 AWS Lambda 函数作为我们的自定义社交连接的端点。在这个函数中，我们将使用 Auth0 的 JavaScript SDK 来执行一些验证过程。

我们将使用 Serverless Framework 来部署 Lambda 函数并配置与之关联的 API 网关。在终端中输入以下命令来创建一个新的 serverless 应用程序：

--- ------ ---------- ---------- ------ -----------------------
-- -----------------------

这将创建一个新的 serverless 应用程序，并将我们导航到应用程序的目录中。

接下来，打开 serverless.yml 文件并添加以下配置：

-------- -----------------------

---------
  ----- ---
  -------- ----------
  ------ ---
  ------- ---------

----------
  ------
    -------- -------------

这个配置告诉 serverless 框架它将使用 AWS Lambda 作为 provider，运行时环境是 nodejs12.x ，它将创建一个名为 hello 的 Lambda 函数，这个函数的入口是 handler.hello。

接下来，我们需要在 handler.js 文件中创建函数，如下所示：

----- ----- - -----------------
----- ----------- - --- -------
  ------- --------------------
  --------- -----------------------
  ------------- ---------------------------
  --------- ----------------------------------------------
  ------ ----------------- -------------------
---

-------------------- - ----- ------- -------- -- -
  ------ -
    ----------- ----
    ----- ----------------
      -------- ------ -------
    --
  --
--

这个函数导入了 Auth0 的 JavaScript SDK，我们传递了 domain、clientId、clientSecret、audience 和 scope 参数，这些参数是为了让我们的应用程序能够使用 Auth0 API。函数返回 "Hello World!" 作为响应主体。

步骤2: 添加自定义社交连接逻辑

现在我们已经成功创建了 serverless 应用程序并创建了一个 Lambda 函数来响应请求。接下来，我们将添加与 Auth0 相关的功能，这将是我们添加自定义社交连接的关键。

首先，我们需要创建一个 Auth0 应用程序，并为它启用 API。在 Auth0 控制台上创建一个新的应用程序，并为其启用 API。在“API”，“接口”的选项卡上选中“Enable APIs”选项，然后选择 Auth0 Management API 。

接下来，我们需要创建一个自定义社交连接，在 Auth0 应用程序中包含这个连接。在 Auth0 控制台上，导航到“Connections”，然后打开“社交”选项卡。这里我们可以看到已经有一些默认连接，如 Facebook、Google 等。我们将添加自定义的连接方式。

在左下角，可以找到 New Connection 按钮，点击后会出现一个选项：

  1. 官方到 Auth0 的支持社交连接如果您希望社交连接能够得到官方支持，请使用这个选项。

  2. OAuth 类型如果您的社交应用程序中使用 OAuth 授权协议，请选择此选项，您需要提供一个托管在您的域名下的授权 URL。

  3. OpenID Connect 类型 OpenID 连接是一种在现代 Web 应用中广泛使用的身份验证协议。

  4. 自定义 选项如果您希望使用自己的协议，请选择此选项。

我们使用自定义选项，输入我们的社交登录接口和一些其他信息：

-
  ------- -----------------------
  ----------- -----------------------
  ------------------ -
    ----------------------
  --
  ---------- -
    ----------- ---------------------
    --------------- -------------------------
    ------------------- -------------------------------------------
    ----------- ---------------------------------------
    -------------- ------------------------------------------
    -------------- --------------------------------------------------------------
  -
-

在这个例子中，我们选择了自定义的选项，并输入了我们的社交登录接口以及一些其他的信息。请注意，我们需要将 callbackURL 设置为一个我们将要创建的 API 网关的端点，这个端点将负责接受重定向请求。

接下来，我们需要在我们的 Lambda 函数中添加一个新的逻辑，这个逻辑将监听 Auth0 发出的请求，并将以适当的方式响应它：

----- --- - ---------------
------------------- - ----- ------- -------- -- -
  ----- -- - -------------------- ------------
  -- ---------- -
    ------ -
      ----------- ----
      ----- ----------------
        -------- --------
      --
    --
  -
  ------ -
    ----------- ----
    -------- -
      --------- --------------------------------------------- - --------
    --
    ----- --
  --
--

在这个例子中，我们利用 nodejs 内置的 url 模块解析了事件中所接收到的事件对象并解析出 code 和 state 等参数。然后，我们重定向到我们的社交登录页面。这个社交登录页面应该是这样的：

---------------------------------------------------------------------------------------------------------------------

这个 URL 应该重定向到用户授权页面，用户将在这个页面上验证他们的身份并授权你的应用使用他们的信息，然后在他们被成功验证后，my-custom 将返回到 Auth0 应用程序，并提供一个授权代码。

我们将监听这个重定向请求，并使用我们的 Lambda 函数返回正确的响应。然后，Auth0 将根据我们的代码交换一个 token，并使用上面列出的 URL 来获取用户信息。

步骤3: 部署 Lambda 函数和 API 网关

到目前为止，我们已经为我们的 serverless 应用程序配置了一个 Lamba 函数，并添加了自定义社交连接的逻辑。接下来，我们将使用 Serverless Framework 部署这个应用程序，并将它关联到一个 API 网关。

首先，我们需要使用以下命令部署函数：

--- ------

这个命令将在 AWS 上创建一个新的 Lambda 函数，并为其配置一个名为 hello 的端点。使用以下命令获取输出 JSON 是完整路径：

--- ----

在部署这个函数之后，我们需要创建一个新的 API 网关，并将 Lambda 函数与它关联。我们需要打开 serverless.yml 文件并添加以下配置：

-------- -----------------------

---------
  ----- ---
  -------- ----------
  ------ ---
  ------- ---------

----------
  ------
    -------- -------------
    -------
      - -----
          ----- -----
          ------- ---

  -----
    -------- ------------
    -------
      - -----
          ----- -------------
          ------- ---
          ------------ ------------

--------
  - -----------------------
  - -------------------------

-------
  ------------------------
    ------
      - -----

  -------------
    ----------- ----------------
    ---------------- --------------------
    --------- --
    ------ ------------
    -------------------- ----

这个配置告诉 serverless 框架如何创建一个新的 API 网关和一个与之关联的 Lambda 函数。我们用 hello 路径来测试 Lambda 函数的触发器；使用 auth/callback 路径为我们的社交连接设置重定向请求的回调 URL；并支持桶的二进制对象语法支持。请注意，我们将 auth/callback 设置为 integration: lambda-proxy，这意味着我们将使用 API 网关作为 Lambda 的代理。

我们使用 serverless-domain-manager 插件来配置自定义域名。只需要将 YOUR_DOMAIN_NAME 和 YOUR_SSL_CERTIFICATE 更改为您自己的域名和 SSL 证书即可。

最后，我们使用以下命令部署 serverless 应用程序并关联它的 Lambda 函数和 API 网关：

--- ------ ---------

这个命令将读取你的 serverless.yml 文件中的配置，使用 AWS CloudFormation 服务，找到你应用程序所需的资源，然后批量创建和组织这些资源。使用 CloudFormation 可以追踪所有的部署和更改。

结论

在这篇文章中，我们介绍了如何使用 Serverless Framework 部署 Auth0 自定义社交连接，以便在 web 应用程序中提供更好的用户体验。我们详细地解释了每个步骤，并提供了相应的代码示例。通过这篇文章，你已经了解了 AWS Lambda、Auth0 SDK、API 网关等 serverless 相关的技术，并建立起了如何将它们应用到特定场景下的能力。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67065467d91dce0dc85bd6f1

阅读全文

猜你喜欢

  • Redux 中如何处理网络请求的错误

    在前端开发中，我们经常需要与后端交互，发送网络请求。然而，网络请求并不总是能成功返回数据，有时候会遇到各种错误，比如网络超时、404 等。如何在 Redux 中处理这些网络请求的错误呢？本文将详细介绍...

    12 天前
  • 如何在 Ruby on Rails 项目中使用 Tailwind CSS

    在现代前端开发中，CSS 框架成为了极受欢迎的工具之一，以其快速、灵活、易用和可扩展性受到了广泛的欢迎。Tailwind CSS 是一个相对新的 CSS 框架，它最近越来越受欢迎，它提供了一系列快速而...

    12 天前
  • 如何利用 RxJS 开发复杂的数据处理流

    在前端开发中，数据的处理是至关重要的一部分。而随着前端应用的复杂化，数据流处理也越来越复杂。为了解决这个问题，RxJS（响应式编程）成为了一种流行的解决方案，它可以帮助我们更好地处理数据流。

    12 天前
  • 使用 Promise 封装 AJAX 请求

    在现代 Web 开发中，AJAX 是不可避免的一个关键技术。AJAX 允许我们以异步方式向服务器发送请求，更新页面等等。尽管我们可以在 JavaScript 中使用普通的 xmlhttprequest...

    12 天前
  • 响应式设计中如何实现可折叠性导航栏

    在响应式设计中，一个常见的需求是实现可折叠性导航栏。这样的导航栏在桌面端可以展开显示所有菜单选项，而在移动端则可以折叠起来以节省空间，同时也更加符合移动端的交互习惯。

    12 天前
  • 解决 Kubernetes 中 Pod 资源限制的问题

    当我们在 Kubernetes 中运行一个 Pod 时，我们需要为该 Pod 指定需要的资源量，如 CPU 和内存。这可以通过配置 Pod 的资源限制来完成。但是，如果资源限制设置不当或不合理，可能会...

    12 天前
  • GraphQL 返回错误处理及异常信息解析

    引言 GraphQL 是一种用于 API 的查询语言，它让客户端可以精确地获取所需的数据，避免了过度获取不必要的数据。而当用户发送 GraphQL 查询时，如果查询中存在某些错误，比如字段不存在、类型...

    12 天前
  • Node.js 实现高可用性：使用 PM2

    前言 在当今互联网时代，大多数企业的业务都是通过 Web 应用程序实现的。因此，Web 应用程序的高可用性成为了非常重要的一项指标。目前，Node.js 已成为众多企业在构建 Web 应用程序时的首选...

    12 天前
  • React + Enzyme：如何轻松自定义交互测试

    介绍 随着越来越多的前端项目采用 React 框架开发，对于前端开发测试的需求也越来越迫切。而在 React 中，Enzyme 是一个优秀的测试工具，它让我们能够更轻松地测试 React 组件的交互行...

    12 天前
  • 怎样使用 Mocha和 Sinon.js测试Node.js异步函数

    前言 在开发 Node.js 应用程序时，测试是至关重要的一步。为了确保应用程序的质量和稳定性，我们必须进行全面的测试。本文将讨论如何使用 Mocha 和 Sinon.js 来测试 Node.js 异...

    12 天前
  • Serverless 架构带来的效率提升

    在云计算时代，随着 Serverless 架构的兴起，前端开发者们可以在没有服务器的情况下轻松开发和部署应用程序。Serverless 架构可以使前端开发者完全无需关心服务器资源的管理，而只需要专注于...

    12 天前
  • 如何在 Cypress 中进行快照测试

    如何在 Cypress 中进行快照测试 快照测试是一种常见的前端测试方法，通常用于比较两个版本之间的差异或检查 UI 组件的样式和布局。在 Cypress 中进行快照测试也是十分简单的。

    12 天前
  • 使用 Redux-thunk 实现登录状态验证

    在前端开发中，我们经常需要处理登录状态和权限验证。Redux-thunk 是一个用于管理 Redux 异步操作的中间件，可以很方便地实现登录状态验证和其他异步操作。

    12 天前
  • Jest + Enzyme 实现 React 组件测试

    React 是一个非常流行的前端框架，现在已经成为了许多前端开发人员的首选。但是，如何进行 React 组件测试呢？这里介绍如何使用 Jest 和 Enzyme 进行 React 组件测试。

    12 天前
  • ES7 新增对象的 includes 方法详解

    ES7 新增对象的 includes 方法详解 在 ES2016 (也称为 ES7) 中，新增了 includes 方法，使得在对象中查找值变得更加方便和直观。在本文中，我们将深入学习这个方法，并提供...

    12 天前
  • 使用 Web Components 时如何处理动态载入的组件？

    Web Components 是一种利用 Web 技术构建可重用、独立自我维护的组件的方式。其能够提供一种模块化、可重用和可维护的代码结构，使开发者的工作变得更加高效和简便。

    12 天前
  • 如何使用 Scala 开发 RESTful API

    简介 RESTful API 是一种具有多样性和普适性的 Web API。使用 Scala 语言进行 RESTful API 开发可减少开发时间和减轻负荷。在这篇文章中，我们将会介绍如何使用 Scal...

    12 天前
  • CSS Grid 实现两栏布局

    CSS Grid 实现两栏布局 引言 前端开发中经常需要进行页面布局，两栏布局是常见的一种布局方式，常常用于页面左右分列显示不同的内容。在CSS 2.1时代，我们可以用浮动或定位来实现这一布局方式，但...

    12 天前
  • MongoDB 嵌套数据的查询最佳实践

    在前端开发中，问题往往不止于存储和检索数据，还包括数据结构的设计和明确。MongoDB 数据库为开发人员提供了一种可以存储各种数据类型的灵活文档模型。 然而，随着项目的规模和复杂性增加，需要存储和查询...

    12 天前
  • 解决 Angular 应用程序中的性能问题

    Angular 是一种流行的前端框架，它提供了丰富的功能和组件，使得构建 Web 应用程序变得更加简单和高效。然而，由于应用程序规模和复杂度的不断增加，Angular 应用程序的性能问题也越来越严重。

    12 天前

相关推荐

    暂无文章