构建安全的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分制系统来追踪我的健康状况。规则很简单：
我构建了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中文网其他相关文章！
