在15分钟内构建具有用户身份验证的React应用程序

>本文演示了将Okta的登录小部件集成到用于用户身份验证的React应用程序中。 javaScript工具的小部件通过利用Okta的基础结构来简化该过程。

>教程从基本的React项目开始，通过OKTA登录小部件（使用NPM安装）添加身份验证。 它涵盖了创建一个LoginPage组件，在Okta中配置OpenID Connect应用程序并集成了小部件。

>该过程包括渲染小部件，验证用户登录状态以及在导航栏中添加登录链接。最终

组件根据登录状态管理登录，注销和条件渲染。LoginPage

设置项目：>

1. 克隆种子项目：首先使用git克隆一个简单的反应种子项目：

   git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
   cd okta-react-widget-sample

通过NPM安装okta登录窗口小部件：

2. 安装小部件：

   npm install @okta/okta-signin-widget@2.3.0 --save

3. 添加样式：

   在您的>文件的段中包含OKTA cdn的窗口小部件的CSS：> index.html

   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>

创建登录页组件：

>

>创建组件：

在
1. 中创建

   文件。 最初，这是一个简单的组件： LoginPage.js ./src/components/auth/

   import React from 'react';
   
   export default class LoginPage extends React.Component {
     render() {
       return <div>Login Page</div>;
     }
   }

   添加路由： import
到
2. 中，并添加路由：>

   在Okta开发人员控制台中创建一个OpenID Connect应用程序。将重定向的URI设置为LoginPage。 ./src/app.js

   // ... other imports ...
   import LoginPage from './components/auth/LoginPage';
   
   // ... within the main route ...
   <Route component={LoginPage} path="/login" />

3. 集成窗口小部件：http://localhost:3000

>

窗口小部件初始化：> in

，用Okta组织URL和客户端ID初始化Oktasignin窗口小部件：

>渲染小部件： use
1. 在指定的div中渲染小部件。 实现检查登录状态（

   ）的方法，显示登录窗口小部件（），然后处理登录（）。 原始文章中提供了完整的组件（具有错误处理和登录/注销功能）。

2. >添加登录链接：在导航栏中添加登录链接（例如，./src/components/common/Navigation.js）。

3. 测试：运行和npm install。 该应用程序现在应显示Okta登录窗口小部件。npm start

>完整的功能代码和有关处理各种身份验证方案（社交登录，密码重置等）的更多详细信息可在原始文章及其关联的GitHub存储库中提供。 切记用实际的OKTA配置值替换占位符和

。{oktaOrgUrl}

以上是在15分钟内构建具有用户身份验证的React应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！