本文最初发表在Okta开发人员博客上。感谢您支持使SitietPoint成为可能的合作伙伴。 今天的互联网用户期望个性化的体验。开发人员必须学会开发提供该个性化体验的网站，同时将用户的信息私有。现代Web应用程序还倾向于具有服务器端API和客户端用户界面。让两端都意识到当前已登录的用户可能会很具有挑战性。在本教程中，我将带您通过设置馈送React UI的节点API，并构建一个用户注册，以使用户的信息保持私密和个人。
> 在本教程中，我不会使用任何州管理库，例如Redux或ReduxThunk。在更强大的应用程序中，您可能想这样做，但是很容易连接redux和reduxthunk，然后添加此处用作thunks的获取语句。为了简单起见，并将本文侧重于添加用户管理，我将在componentdidmount函数中添加fetch语句。钥匙要点
访问您要应用应用程序并为其创建一个新文件夹的文件夹：
npm i -g create-react-app express-generator
默认情况下，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
>
添加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/中创建一个免费的永远的开发人员帐户。
>注册后，单击顶部菜单中的应用程序。然后单击“添加应用”按钮。然后，您将被带到应用程序创建向导。选择单页应用按钮，然后在底部单击“下一步”。
>
然后单击底部的“完成”按钮。
创建应用程序后，请从应用程序列表中选择它，然后单击“常规”选项卡以查看您的应用程序的常规设置。
>在底部，您会看到客户端ID设置（显然不会模糊您的ID）。将其复制到您的React应用程序中。您还需要OKTA组织URL，您可以在仪表板页面的左上方找到。它可能看起来像“ https://dev-xxxxxx.oktapreview.com”。
>将身份验证添加到ReactJS应用程序
npm i -g create-react-app express-generator
mkdir MembershipSample cd MembershipSample express api create-react-app client
然后，设置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应用程序之前，请创建一些组件来处理要添加的路由。
>
这是您目前真正需要的主页。最重要的是要使主页组件成为类类型。即使现在它仅包含一个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
>
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>您需要将导航组件包装在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
mkdir MembershipSample cd MembershipSample express api create-react-app client
>对于您的节点应用程序以拨打OKTA应用程序，它将需要API令牌。要创建一个，请进入您的Okta开发人员仪表板，悬停在API菜单选项上，然后单击令牌。
从那里单击“创建令牌”。给令牌一个名称，例如“会员资格”，然后单击“创建令牌”。
>
>将令牌复制到安全的位置以供稍后使用。
>在节点应用程序中称为lib的新文件夹中创建一个名为oktaclient.js的文件。该文件将使用您刚刚创建的API令牌从Okta的节点SDK配置客户端对象：>
在节点应用程序的词根上的app.js文件中，更新文件以将所有调用路由到 /api /
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
>
>即使网站仍然需要一些严肃的风格爱，您现在可以注册用户，与新创建的用户登录并获取登录的用户配置文件以在个人资料页面上显示！"name": "client", "proxy": "http://localhost:3001"
了解更多
如果您想了解有关此文章中使用的技术的更多信息，则可以查看以下文档：
> Okta的节点SDK
>一如既往，如果您对文章有疑问，评论或疑虑，可以通过lee.brandt@okta.com给我发送电子邮件，或将您的问题发布到开发人员论坛上。有关更多文章和教程，请在Twitter @oktadev上关注我们
>在React应用中实现OKTA身份验证涉及多个步骤。首先，您需要使用NPM或纱线安装Okta React SDK。然后，您需要在Okta开发人员帐户中创建OKTA应用程序。创建应用程序后，您将收到一个客户端ID，您将使用它来配置应用程序中的Okta React SDK。您还需要使用Okta React SDK组件设置登录，注销和安全页面的路由。最后，您可以使用useOktaAuth钩访问组件中的身份验证状态和方法。
>>如何使用okta？ >
使用OKTA保护您的React应用程序涉及使用Okta React SDK将身份验证和授权功能添加到您的应用程序中。您可以使用安全组件包装应用程序并为其提供必要的身份验证上下文。您还可以使用SecureRoute组件来保护某些路线，并确保只有身份验证的用户才能访问它们。此外，您可以使用useOktaAuth钩访问组件中的身份验证状态和方法。>如何测试我的OKTA身份验证实现？
>您可以通过导航到Okta开发人员仪表板中的“自定义”部分来自定义OKTA登录页面。在这里，您可以更改登录页面的徽标，颜色和文本。您还可以使用Okta登录窗口小部件，该小部件是一个提供完全可自定义的登录体验的JavaScript库。
okta为各种前端提供SDK框架，包括角和VUE。这些SDK与React SDK的工作原理相似，并允许您在应用程序中添加身份验证和授权功能。您可以使用NPM或纱线安装SDK，并使用OKTA应用程序详细信息进行配置，并在应用程序中使用其组件和挂钩。
>>我如何对OKTA身份验证的问题进行故障排除？
我如何了解有关OKTA及其功能的更多信息？
以上是用节点，React和Okta构建用户注册的详细内容。更多信息请关注PHP中文网其他相关文章！
