用节点，React和Okta构建用户注册-IT业界-PHP中文网

首页

科技周边

IT业界

用节点，React和Okta构建用户注册

Joseph Gordon-Levitt

Feb 16, 2025 am 11:32 AM

用节点，React和Okta构建用户注册

本文最初发表在Okta开发人员博客上。感谢您支持使SitietPoint成为可能的合作伙伴。 今天的互联网用户期望个性化的体验。开发人员必须学会开发提供该个性化体验的网站，同时将用户的信息私有。现代Web应用程序还倾向于具有服务器端API和客户端用户界面。让两端都意识到当前已登录的用户可能会很具有挑战性。在本教程中，我将带您通过设置馈送React UI的节点API，并构建一个用户注册，以使用户的信息保持私密和个人。

> 在本教程中，我不会使用任何州管理库，例如Redux或ReduxThunk。在更强大的应用程序中，您可能想这样做，但是很容易连接redux和reduxthunk，然后添加此处用作thunks的获取语句。为了简单起见，并将本文侧重于添加用户管理，我将在componentdidmount函数中添加fetch语句。

钥匙要点

简化的设置：使用节点，React和Okta设置用户注册不需要状态管理库，例如Redux，简化了初始开发过程。

实用集成：教程提供了一种动手的方法，可以在React应用程序中集成OKTA以进行身份验证，突出了Okta的React SDK和React Router的使用。>

安全的用户身份验证：OKTA可安全处理用户身份验证，以确保安全有效地管理用户凭据。
>

>节点（8）

create-react-app（NPM软件包）

express-generator（npm package）

然后只需使用NPM命令行安装两个NPM软件包：>
现在，您已经准备好设置基本的应用程序结构。
>脚手架基本应用程序

访问您要应用应用程序并为其创建一个新文件夹的文件夹：>
```
npm i -g create-react-app express-generator
```
>这将在apersample文件夹中创建两个文件夹，称为API和客户端，并在API文件夹中使用nodejs和Express应用程序，在客户端文件夹中使用基本React应用程序。因此，您的文件夹结构看起来像：
使下一个部分更容易，打开两个终端或终端选项卡；一个是Express App文件夹API，另一个是React App文件夹客户端。
默认情况下，React App和Node应用都将在开发的端口3000上运行，因此您需要使API在其他端口上运行，然后在客户端应用中代理。
在API文件夹中，打开 /bin /www文件，然后更改端口API将运行到3001。
>
然后，在客户端应用程序中设置API的代理，以便您仍然可以调用/api/{resource}并将其从端口3000到端口3001。设置下面的名称：

>最后，不要忘记为每个子文件夹（API和客户端）运行NPM安装或纱线安装以确保依赖关系已安装。
```
mkdir MembershipSample
cd MembershipSample
express api
create-react-app client
```
>您现在可以通过在适当的API和客户端应用程序的适当文件夹中运行NPM启动或YARN来运行这两个应用程序。
>
添加OKTA应用程序
```
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
```
如果您还没有这样做，请在https://developer.okta.com/signup/中创建一个免费的永远的开发人员帐户。
>注册后，单击顶部菜单中的应用程序。然后单击“添加应用”按钮。

然后，您将被带到应用程序创建向导。选择单页应用按钮，然后在底部单击“下一步”。

在下一个屏幕上，您将看到单页应用程序模板提供的默认设置。将应用程序的名称更改为更具描述性的内容，例如“会员申请”。另外，将基本URI和登录重定向设置更改为使用端口3000，因为那是您的应用程序运行的地方。其余的默认设置都可以。
>

然后单击底部的“完成”按钮。
创建应用程序后，请从应用程序列表中选择它，然后单击“常规”选项卡以查看您的应用程序的常规设置。

>在底部，您会看到客户端ID设置（显然不会模糊您的ID）。将其复制到您的React应用程序中。您还需要OKTA组织URL，您可以在仪表板页面的左上方找到。它可能看起来像“ https://dev-xxxxxx.oktapreview.com”。
>将身份验证添加到ReactJS应用程序

现在创建了应用程序，通过添加几个NPM依赖项来使用OKTA添加身份验证。从客户端文件夹运行：
```
npm i -g create-react-app express-generator
```
或，如果您使用的是纱线软件包管理器：
```
mkdir MembershipSample
cd MembershipSample
express api
create-react-app client
```
>将文件添加到client/src文件夹，称为app.config.js。文件的内容为：

然后，设置index.js文件以使用React路由器和Okta的React SDK。当index.js文件完成时，它看起来像这样：
```
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
```
>

>完成后，您将添加React路由器的BrowserRouter组件（将其为“路由器”），以及Okta的React SDK的安全组件。另外，app.config.js文件被导入为“ config”，因此您可以在安全组件要求的属性中使用配置值。
```
"name": "client",
"proxy": "http://localhost:3001"
```
>您还将用路由器和安全组件将应用程序组件包围，并传递指定的值。 Onauthrequired方法，只需告诉Okta的React SDK，当有人尝试访问安全路线而未登录时，将它们重定向到登录页面。
其他所有内容都来自您以前运行的create-react-app命令。
>
>将页面添加到reactjs应用程序

>在将任何路由添加到React应用程序之前，请创建一些组件来处理要添加的路由。

>将组件文件夹添加到客户端/SRC文件夹中。这是您所有组件都将居住的地方，也是组织它们的最简单方法。然后为您的主页组件创建一个主文件夹。目前，只有一个，但是以后的主页可能只有更多的组件。使用以下内容添加一个homepage.js文件：
>

这是您目前真正需要的主页。最重要的是要使主页组件成为类类型。即使现在它仅包含一个H1标签，它的意思是一个“页面”，这意味着它可能包含其他组件，因此必须是一个容器组件。
接下来，在组件中创建一个auth文件夹。这是所有与身份验证有关的组件都将存在的地方。在该文件夹中，创建一个loginform.js文件。
```
npm install @okta/okta-react react-router-dom --save
```
>要注意的第一件事是，您将使用Okta React SDK的Aauth高阶组件来包装整个登录表单。这为称为AUTH的组件添加了一个道具，使得可以在该高阶组件上访问等函数和重定向功能。
登录组件的代码如下：
>
```
npm i -g create-react-app express-generator
```
>这里要注意的另一件事是导入的Oktaaauth库。这是用于执行诸如使用您之前创建的OKTA应用程序签名的基础库。您会注意到在构造函数中创建的Oktaaauth对象，该对象传递给了BaseUrl的属性。这是您的app.config.js文件中的发行人的URL。登录组件应包含在另一个组件中，因此您必须创建一个loginpage.js文件才能包含此组件。您将再次使用withauth高阶组件，以访问iSauthenticationationation的函数。 loginPage.js的内容将是：
>
```
mkdir MembershipSample
cd MembershipSample
express api
create-react-app client
```
尽管它比登录表单组件中的内容要少一些，但这里仍然有一些重要的作品。
>再次，您正在使用withauth高阶组件。对于需要使用Okta的身份验证或授权过程的每个组件，这将是一个反复出现的主题。在这种情况下，它主要用于获取等法化功能。 checkAuthentication（）方法在构造函数和componentDidupdate生命周期方法中执行，以确保在创建组件时检查它并再次对组件检查进行检查。
>
> iSauthenticated返回true时，将其设置在组件的状态中。然后在渲染方法中检查它，以决定是显示登录组件还是重定向到用户配置文件页，这是您将下一步创建的组件。
>
现在，在身份文件夹中创建ProfilePage.js组件。组件的内容为：

>此处的Aauth组件使您可以访问Getuser函数。在这里，它是从componentdidmount中调用的，这是拉出将在渲染方法中使用的数据的常见位置。您可能会看到的唯一奇怪的事情是渲染方法的第一行，该行没有渲染，直到实际上有一个从GetUser异步调用中返回的用户。一旦该州有一个用户，它就会呈现配置文件内容，在这种情况下，该内容只是显示了当前登录的用户名称。
```
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
```
>
接下来，您将添加一个注册组件。可以像登录表单一样完成，其中有一个登录组件包含在登录页组件中。为了演示另一种显示此目的的方式，您只需创建一个将成为主要容器组件的Incumtrationform组件即可。在身份验证夹中创建一个具有以下内容的registrationform.js文件：
>
```
npm i -g create-react-app express-generator
```
此组件看起来很像登录组件，但它称为节点API（您将稍后构建）将处理注册。一旦注册由节点API完成，该组件将记录新创建的用户，并且渲染方法（当它在状态中看到会话令牌时）将用户重定向到应用程序的主页。
>您还可以注意组件状态上的SessionToken属性。这是由HandleSubmit（）函数设置的，目的是为了处理登录，如果注册成功。然后，Render（）方法还使用它在登录完成后进行重定向，并且已收到一个令牌。
>
>将路由添加到React App

首先，为要添加的路由添加导航组件。在客户端/src/组件文件夹中，添加一个称为共享的文件夹。这将是在应用程序中的几个地方使用的所有组件都将位于该位置。在该新文件夹中，添加一个名为navigation.js的文件。该文件包含一个基本组件，其中包含指向应用程序中所有页面的链接。
>您需要将导航组件包装在Withauth高阶组件中。这样，您可以检查是否有身份验证的用户，并在适当的情况下显示登录或注销按钮。

>现在您拥有可用的组件来处理所有路由，创建与之相处的路由。更新app.js文件，以使最终版本看起来如下：
```
mkdir MembershipSample
cd MembershipSample
express api
create-react-app client
```
>这里有几个值得注意的事情。 Okta的React SDK的SecureRoute和IndraTcallback组件的导入。隐式验证组件从身份验证流中处理回调，以确保React应用程序中有一个端点，以从Okta捕获返回调用。 Securete组件允许您将任何路线保护并重定向到登录页面。
```
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
```
。
> React路由器的路由组件完全可以执行您的期望：它采用了用户导航并设置一个组件来处理该路由的路径。 SecureRoute组件进行额外的检查，以确保在允许访问该路线之前登录用户。如果不是，则in index.js中的onauthrequired函数将被调用以迫使用户进入登录页面。
>这是唯一真正奇怪的东西，这是登录路径的途径。它不简单地设置组件来处理路径，而是运行渲染方法，该方法呈现登录页组件并从配置中设置baseurl。
>将API端点添加到节点应用

>您可能还记得节点API正在执行注册，因此您需要将端点添加到节点应用程序中以处理该调用。为此，您需要添加Okta的节点SDK。从“ API”文件夹运行：
```
npm i -g create-react-app express-generator
```
然后，您将在API/路由中更改users.js文件。该文件看起来像：
```
mkdir MembershipSample
cd MembershipSample
express api
create-react-app client
```
>这里要注意的最大的事情是lib/oktaclient的导入（您将添加片刻），呼叫OktaClient上的CreateSer函数的调用以及Newuser对象的形状。 Newuser对象的形状记录在Okta的API文档中。
>对于您的节点应用程序以拨打OKTA应用程序，它将需要API令牌。要创建一个，请进入您的Okta开发人员仪表板，悬停在API菜单选项上，然后单击令牌。

从那里单击“创建令牌”。给令牌一个名称，例如“会员资格”，然后单击“创建令牌”。
>
>将令牌复制到安全的位置以供稍后使用。
>在节点应用程序中称为lib的新文件夹中创建一个名为oktaclient.js的文件。该文件将使用您刚刚创建的API令牌从Okta的节点SDK配置客户端对象：
>
在节点应用程序的词根上的app.js文件中，更新文件以将所有调用路由到 /api /
。您将在App.Use语句的块下方看到一个部分。更改设置的路线，以使其看起来像这样：
```
/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
```
如果您的节点应用仍在运行，则需要停止该应用程序（使用CTRL C）并重新运行它（使用NPM启动）才能生效。
>
>即使网站仍然需要一些严肃的风格爱，您现在可以注册用户，与新创建的用户登录并获取登录的用户配置文件以在个人资料页面上显示！
```
"name": "client",
"proxy": "http://localhost:3001"
```
了解更多

如果您想了解有关此文章中使用的技术的更多信息，则可以查看以下文档：>
> Okta的节点SDK

Okta的React SDK。
>一如既往，如果您对文章有疑问，评论或疑虑，可以通过lee.brandt@okta.com给我发送电子邮件，或将您的问题发布到开发人员论坛上。有关更多文章和教程，请在Twitter @oktadev上关注我们

>常见问题（常见问题解答）有关使用节点，React和Okta
构建用户注册的问题（常见问题解答）
>如何在React应用程序中实现OKTA身份验证？

>在React应用中实现OKTA身份验证涉及多个步骤。首先，您需要使用NPM或纱线安装Okta React SDK。然后，您需要在Okta开发人员帐户中创建OKTA应用程序。创建应用程序后，您将收到一个客户端ID，您将使用它来配置应用程序中的Okta React SDK。您还需要使用Okta React SDK组件设置登录，注销和安全页面的路由。最后，您可以使用useOktaAuth钩访问组件中的身份验证状态和方法。
>
> node.js在用Okta构建用户注册的作用是什么？使用OKTA构建用户注册的关键作用。它充当服务器端环境，您可以在其中设置并运行应用程序。您可以使用它来创建服务器，定义路线并处理请求和响应。在OKTA的上下文中，您可以使用node.js与Okta API进行交互，以进行诸如创建用户，验证凭据和管理会话之类的任务。
>
>如何使用okta？ >
使用OKTA保护您的React应用程序涉及使用Okta React SDK将身份验证和授权功能添加到您的应用程序中。您可以使用安全组件包装应用程序并为其提供必要的身份验证上下文。您还可以使用SecureRoute组件来保护某些路线，并确保只有身份验证的用户才能访问它们。此外，您可以使用useOktaAuth钩访问组件中的身份验证状态和方法。
>
>在实现OKTA身份验证时如何处理错误？

在实现OKTA身份验证时，您可能会遇到各种不同错误，例如无效的凭据，网络错误或服务器错误。您可以通过使用代码中的try-catch块来处理这些错误。在捕获块中，您可以记录错误消息并向用户提供用户友好的消息。您还可以使用安全组件的OnError Prop在全局级别处理错误。
>
>如何测试我的OKTA身份验证实现？
>测试OKTA身份验证实现是否涉及检查登录是否涉及检查是否涉及，注销和安全路线按预期工作。您可以通过导航到这些路线并验证行为来手动执行此操作。您还可以使用测试库（例如开玩笑和React Testing库）编写自动测试。这些测试可以模拟用户操作，并检查身份验证状态是否正确更改。>
>如何自定义OKTA登录页面？

>您可以通过导航到Okta开发人员仪表板中的“自定义”部分来自定义OKTA登录页面。在这里，您可以更改登录页面的徽标，颜色和文本。您还可以使用Okta登录窗口小部件，该小部件是一个提供完全可自定义的登录体验的JavaScript库。

>我如何将OKTA与其他前端框架一起使用？

okta为各种前端提供SDK框架，包括角和VUE。这些SDK与React SDK的工作原理相似，并允许您在应用程序中添加身份验证和授权功能。您可以使用NPM或纱线安装SDK，并使用OKTA应用程序详细信息进行配置，并在应用程序中使用其组件和挂钩。
>
>如何将OKTA与其他后端技术使用？ Okta为各种后端技术提供了库和SDK，包括Java，.Net和PHP。这些库允许您从服务器端代码与Okta API进行交互。您可以使用它们来创建用户，验证凭据，管理会话等。

>我如何对OKTA身份验证的问题进行故障排除？
>
> okta authentication对问题进行故障排除问题涉及检查错误消息，查看消息，查看消息，查看信息在网络请求和响应中，并查看OKTA日志。错误消息可以为您提供有关出了什么问题的线索。网络请求和响应可以向您显示从OKTA发送并收到的数据。 OKTA日志可以提供有关身份验证事件的详细信息。

我如何了解有关OKTA及其功能的更多信息？
>您可以通过访问OKTA开发人员网站来了解有关OKTA及其功能的更多信息。。在这里，您可以找到指南，教程，API参考等。您还可以加入Okta开发人员论坛，以提出问题并与其他开发人员分享知识。

以上是用节点，React和Okta构建用户注册的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

CNCF ARM64飞行员：影响和见解Apr 15, 2025 am 08:27 AM

该试点程序是CNCF（云本机计算基础），安培计算，Equinix金属和驱动的合作，简化了CNCF GitHub项目的ARM64 CI/CD。该计划解决了安全问题和绩效

使用GO构建网络漏洞扫描仪Apr 01, 2025 am 08:27 AM

此基于GO的网络漏洞扫描仪有效地确定了潜在的安全弱点。它利用了GO的并发功能的速度功能，包括服务检测和漏洞匹配。让我们探索它的能力和道德

2025年最佳10个最佳免费反向链接检查器工具Mar 21, 2025 am 08:28 AM

网站建设只是第一步：SEO与反向链接的重要性建立网站只是将其转化为宝贵营销资产的第一步。您需要进行SEO优化，以提高网站在搜索引擎中的可见度，吸引潜在客户。反向链接是提升网站排名的关键，它向谷歌和其他搜索引擎表明您的网站权威性和可信度。并非所有反向链接都有利：识别并避免有害链接并非所有反向链接都有益。有害链接会损害您的排名。优秀的免费反向链接检查工具可以监控链接到您网站的来源，并提醒您注意有害链接。此外，您还可以分析竞争对手的链接策略，从中学习借鉴。免费反向链接检查工具：您的SEO情报员

See all articles