使用React，GraphQL和用户身份验证构建健康跟踪应用程序

构建安全的React应用程序：结合GraphQL、TypeORM、Node.js和Okta

本文将指导您如何使用Vesper框架、TypeORM、MySQL和Node.js构建一个安全的GraphQL API，并使用React、reactstrap和Apollo Client创建一个与之交互的客户端。我们将重点关注安全的用户身份验证，并使用Okta简化身份管理。

本文最初发表于Okta开发者博客。感谢支持使SitePoint成为可能的合作伙伴。

我们将创建一个健康追踪应用程序，用于记录每日健康数据。

为什么选择Okta？

Okta是一个云服务，简化了身份管理，使其更安全、更易于扩展。它允许您：

• 认证和授权用户
• 存储用户数据
• 执行基于密码和社交登录
• 使用多因素身份验证保护您的应用程序
• 更多功能！请查看我们的产品文档。

注册一个Okta永久免费的开发者帐户，然后继续学习如何构建安全的React应用程序！

为什么选择健康追踪应用程序？

我从2014年9月到10月中旬进行了一次21天的戒糖排毒，期间停止食用糖、开始定期锻炼并停止饮酒。我十多年来一直患有高血压，当时正在服用降压药。排毒第一周，我的降压药用完了。由于新的处方需要医生就诊，我决定等到排毒结束后再去看医生。三周后，我不仅减掉了15磅，而且血压也恢复到了正常水平！

我创建了一个21分制系统来追踪我的健康状况。规则很简单：

1. 健康饮食得一分。否则不得分。
2. 锻炼得一分。
3. 不饮酒得一分。

我构建了21-Points Health来追踪我的健康状况。现在，我们将创建一个简化版本，只追踪每日积分。

使用TypeORM、GraphQL和Vesper构建API

TypeORM是一个灵活的ORM框架，可在大多数JavaScript平台上运行。全局安装TypeORM：

npm i -g typeorm@0.2.7

创建一个目录来存放React客户端和GraphQL API：

mkdir health-tracker
cd health-tracker

使用以下命令创建一个新的MySQL项目：

typeorm init --name graphql-api --database mysql

编辑graphql-api/ormconfig.json来自定义用户名、密码和数据库。

安装MySQL（如果尚未安装）。

导航到您的graphql-api项目，安装项目的依赖项，然后启动它以确保您可以连接到MySQL。

cd graphql-api
npm i
npm start

安装Vesper以集成TypeORM和GraphQL

npm i vesper@0.1.9

创建GraphQL模型和控制器。

创建实体

修改src/entity/User.ts和src/entity/Points.ts，允许将积分与用户关联。

创建控制器

创建src/controller/PointsController.ts来处理GraphQL查询和变异。

修改src/index.ts以使用Vesper的bootstrap()来配置所有内容。

启动API并使用GraphQL Playground测试查询和变异。

修复日期

安装graphql-iso-date并配置自定义解析器以处理日期。

开始使用React

使用Create React App创建React客户端并安装必要的依赖项：

npm i -g typeorm@0.2.7

配置Apollo Client

配置Apollo Client以连接到您的GraphQL API。

使用ApolloProvider和Query组件

修改react-client/src/App.js以使用ApolloProvider和Query组件。

为React添加OpenID Connect身份验证

在Okta中创建一个OIDC应用程序，并安装Okta的React SDK和react-router-dom：

mkdir health-tracker
cd health-tracker

配置路由和身份验证

修改react-client/src/App.js以设置Okta身份验证。

创建组件

创建Home.js、Login.js和Points.js组件。

安装reactstrap和Bootstrap

安装reactstrap和Bootstrap，并添加Bootstrap的CSS文件。

使用Okta Sign-In Widget

安装Okta Sign-In Widget：

typeorm init --name graphql-api --database mysql

创建OktaSignInWidget.js组件。

创建Points.js组件

从JWT获取用户信息

安装Okta的JWT验证器：

cd graphql-api
npm i
npm start

创建graphql-api/src/CurrentUser.ts。

配置JWT验证器

修改graphql-api/src/index.ts以配置JWT验证器。

修改控制器

修改graphql-api/src/controller/PointsController.ts以注入CurrentUser并过滤用户ID。

重新启动API并测试应用程序。

结论

本文演示了如何使用GraphQL、TypeORM和Node.js构建安全的React应用程序。 请查看Okta提供的其他资源，以了解更多关于React、Node和用户身份验证的信息。

请记住替换占位符 {yourOktaDomain} 和 {clientId} 为您实际的Okta域名和客户端ID。 源代码链接请参考原文。

以上是使用React，GraphQL和用户身份验证构建健康跟踪应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！