GraphQL 和 OAuth2:如何在 API 中实现身份验证

面试官:小伙子,你的代码为什么这么丝滑?

在 Web 开发和 API 构建中,身份验证是一个至关重要的问题。在有些情况下,您只需要对所有用户进行身份验证即可,但在许多情况下,您需要按照用户的角色或权限级别进行身份验证。

GraphQL 和 OAuth2 是授权和身份验证方面的两个热门技术,本文将介绍如何使用它们来实现 API 中的身份验证。

GraphQL 入门

GraphQL 是由 Facebook 创建的一种新型的 API 技术。它旨在简化客户端与服务器之间的数据交互,并允许客户端控制所请求的数据以提高效率。

在 GraphQL 中,客户端可以指定它们需要哪些数据,而服务器可以提供自定义的响应以满足客户端的需求。与传统的 RESTful API 相比,GraphQL 的一个重要特点是,客户端只需要发出一次请求,即可获得所需的所有数据。

以下是一个最基本的 GraphQL 查询:

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

客户端请求包含一个名为“user”的根级别字段,这个字段需要一个 ID 参数,并返回用户的姓名和电子邮件字段。当服务器收到这个请求时,它将处理这个请求并返回客户端所需的数据。

OAuth2 入门

OAuth2 是一种标准的授权协议,允许第三方应用程序访问受限资源,而不必获得用户的用户名和密码。OAuth2 使用访问令牌来授权对资源的访问,并将其传递给受请求的 API。

以下是 OAuth2 中的一些术语:

  • 令牌 (Token):OAuth2 的令牌是一种表示用户身份的凭据,它通常被用来授权对受限资源的访问。
  • 客户端 (Client):客户端是发起对 OAuth2 资源的请求的任何应用程序或服务。
  • 授权服务器 (Authorization Server):授权服务器是负责管理和颁发访问令牌的服务器。
  • 资源服务器 (Resource Server):资源服务器是存储受限资源的服务器,它验证令牌并确定受请求的客户端是否有权访问资源。

OAuth2 定义了四种授权类型。

  1. 授权码授权(Authorization Code Grant):客户端使用授权码来获得令牌。
  2. 简化授权(Implicit Grant):适用于前端应用程序,客户端通过重定向到授权服务器进行授权。
  3. 密码授权(Password Grant):允许客户端使用用户的用户名和密码来获得令牌。
  4. 客户端凭证授权(Client Credentials Grant):适用于后端服务,客户端使用自己的凭据获得访问令牌。

GraphQL 和 OAuth2 结合

在实际应用中,GraphQL 和 OAuth2 通常会结合使用,以实现安全的 API 访问。

我们可以使用 OAuth2 密码授权模式,允许客户端使用用户名和密码来获得访问令牌。GraphQL 可以使用访问令牌验证 GraphQL 查询,以确保只有经过身份验证的用户才能访问资源。

下面是一个使用 GraphQL 和 OAuth2 的身份验证实现的服务器端示例:

1. 安装依赖

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

在这个例子中,我们使用 Express 作为服务器框架,express-graphql 来处理 GraphQL 请求,express-oauth-server 来处理 OAuth2 授权请求。

2. 配置 OAuth2

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

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

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

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

在这个例子中,我们配置了 OAuth2 模型以及 OAuth2 的路由 path。

3. 配置 GraphQL

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

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

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

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

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

在这个例子中,我们使用 GraphQLObjectType 定义了一个 user 查询,并设置了一个 context,将 Express 的 req 对象中的 user 属性传递给 GraphQL 的上下文。在用户调用 user 查询时,我们通过检查 context.user 对象来进行身份验证。

4. 配置访问令牌

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

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

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

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

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

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

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

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

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

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

在这个例子中,我们定义了一个函数,用于获取访问令牌,然后使用 OAuth2 访问令牌向服务器发送 GraphQL 请求。在发送请求时,我们将访问令牌作为 Authorization 头部中的 Bearer 标头发送。

结论

GraphQL 和 OAuth2 在很多方面都是互补的,并且可以很容易地结合使用以实现安全的 API 访问。GraphQL 和 OAuth2 的结合可以确保只有经过身份验证的用户才能访问 API 中的资源。

虽然本文只展示了基本的使用示例,但是您可以通过扩展本文中的示例来构建更复杂的应用程序,具体取决于您的需求。如果您可以掌握使用 GraphQL 和 OAuth2,那么您就可以为您的 API 添加一个非常强大的身份验证机制。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67070b2fd91dce0dc8647419


猜你喜欢

  • 无障碍网站建设中的浏览器兼容性问题及解决

    前言 在网站开发时,我们往往会关注各种视觉效果和交互体验,但忽略了网站用户的多样性。一些用户可能有听觉障碍、视觉障碍、身体残疾或认知障碍等。如何让这些用户和普通用户一样方便的使用网站呢?这种考虑下的网...

    9 天前
  • 如何处理 Web 图标并在 Webpack 中使用

    Web 图标是网站或应用中不可或缺的一部分。它们提高了用户体验,增加了网站的视觉吸引力。在本文中,我们将学习如何处理 Web 图标并在 Webpack 中使用。 Web 图标的类型 在开始之前,让我们...

    9 天前
  • PWA 应用中的缓存策略与优化方法

    前言 在 Web 开发中,我们经常需要向用户展示图片、视频等资源,而这些资源通常很大,下载时间长,给用户带来不便和不良体验。为了解决这个问题,PWA 技术应运而生。

    9 天前
  • 完全基于 Nginx Server-sent Events 的在线聊天室

    在线聊天室是 Web 应用程序中的一个常见功能。这种功能通常基于 WebSocket 技术实现,但是 WebSocket 应用程序需要一个额外的服务器来处理传入和传出的消息。

    9 天前
  • Flexbox 响应式设计的新特性和技巧介绍

    随着移动设备的广泛使用,响应式设计已成为现代网站设计的必备要素。而在前端里,Flexbox 看似简单的布局却是响应式设计中用的最多的技术之一,它可以用相对简单的代码实现各种布局方式,本文将详细介绍 F...

    9 天前
  • 将 TypeScript 集成到 AngularJS 1.x 中

    将 TypeScript 集成到 AngularJS 1.x 中 作为一种强类型的编程语言,TypeScript 可以让前端开发者在编写 JavaScript 代码时享受静态类型检查和更好的 IDE ...

    9 天前
  • PM2:你需要的 Node.js 进程管理工具

    在 Node.js 开发中,我们通常需要管理多个进程。这些进程包括 web 服务器、后台任务、消息队列等等。但手动管理这些进程是一件繁琐的工作,而且容易出错,这时候需要一个进程管理工具来协助我们完成这...

    9 天前
  • 在不依赖 React 的情况下测试 React 组件

    React 是现代 Web 开发中最常用的前端框架之一,尤其在构建大型单页应用程序 (SPA) 方面非常有用。然而,尽管 React 本身有很强的测试支持,但在某些情况下,我们可能需要在不依赖 Rea...

    9 天前
  • 如何使用 ESLint 检查您的 Angular 项目中的错误和警告

    如果您是一个前端工程师,那么肯定会有关于代码质量和规范的担忧。而 ESLint 是一个流行的代码检查工具,它可以帮助您在开发过程中规范和优化您的代码。 本文将介绍如何在您的 Angular 项目中使用...

    9 天前
  • Material Design 风格下 RecyclerView 的分页实现

    随着移动互联网的不断发展,移动端应用越来越受到人们的关注。在设计上,Material Design 成为了一个非常流行的趋势。而在前端开发中,RecyclerView 是一个非常强大的控件,它可以通过...

    9 天前
  • 解决使用 Express.js 遇到的各种问题

    Express.js 是一个流行的 Node.js Web 应用程序框架,它可以轻松地构建 RESTful API 和 Web 应用程序。然而,使用 Express.js 同样会遇到各种问题,例如错误...

    9 天前
  • Docker Compose 中使用 Service Discovery 实现服务注册

    标题:Docker Compose 中使用 Service Discovery 实现服务注册 介绍: 在复杂的前端开发中,往往需要将不同的服务部署在不同的容器中,协作完成一个完整的业务功能。

    9 天前
  • Sequelize 中的 Set 方法:实现多选项数据存储和查询

    在 Sequelize 中,我们经常会使用枚举类型(Enum Type)来处理多选项数据。然而,枚举类型有时会很繁琐,因为它需要你手动创建所有的选项,并且它并不支持增量式的添加新选项。

    9 天前
  • 解决在 ES9 中使用 Array.prototype.splice() 时可能会遇到的问题

    在 ES9 中,使用 Array.prototype.splice() 时可能会遇到一些问题。这篇文章将详细讲解这些问题,并提供解决方案以及示例代码。 问题 在 ES9 中,当我们使用 Array.p...

    9 天前
  • 利用 Socket.io 构建在线问答平台

    介绍 在前端开发中,我们经常需要创建一个交互式的在线问答平台。这种平台通常需要随时响应用户的问题,并能够及时推送问题的解答结果。传统的实现方式通常基于 Ajax 和 long-polling 技术,但...

    9 天前
  • 如何在使用 Enzyme 进行 React 测试时处理异步 setState?

    React 测试是前端开发中非常重要的一环,而 Enzyme 是 React 测试中最通用的一个 JavaScript 测试工具之一。在使用 Enzyme 进行 React 测试时,经常会遇到处理异步...

    9 天前
  • 基于 Headless CMS 的图像管理技巧及优化方案

    随着 Web 应用程序的不断发展,图像在 Web 设计中扮演着越来越重要的角色。图像不仅能够丰富网站内容,还能够提高用户体验。然而,一个网站上的图像文件可能会变得非常庞大,从而导致访问速度缓慢,进而影...

    9 天前
  • TypeScript 中的类型检查

    TypeScript 是微软开发的开源编程语言,它是 JavaScript 的一个超集,为 JavaScript 提供了类型检查和其他扩展功能,以提高代码质量和可读性。

    9 天前
  • 无障碍性能问题的实时监测策略

    前言:无障碍性是指网站和移动应用程序可以被所有人免费使用,而不受理解或技能的限制,不论他们的残疾或技能水平如何。所以对于前端来说,无障碍性能问题是很重要的。 在前端开发中,无障碍性能问题是一直备受...

    9 天前
  • 使用 Jest 在 React Native 中编写 UI 测试

    Jest 是一种流行的 JavaScript 测试框架,它易于使用且可以用于测试前端代码。在 React Native 开发中,Jest 可以用于编写 UI 测试,以确保应用程序具有稳定的用户界面。

    9 天前

相关推荐

    暂无文章