>本文演示了将Okta的登录小部件集成到用于用户身份验证的React应用程序中。 javaScript工具的小部件通过利用Okta的基础结构来简化该过程。
>教程从基本的React项目开始，通过OKTA登录小部件（使用NPM安装）添加身份验证。 它涵盖了创建一个LoginPage组件，在Okta中配置OpenID Connect应用程序并集成了小部件。
组件根据登录状态管理登录，注销和条件渲染。LoginPage
设置项目：>
克隆种子项目：首先使用git克隆一个简单的反应种子项目：
git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample cd okta-react-widget-sample
安装小部件：
npm install @okta/okta-signin-widget@2.3.0 --save
在您的>文件的段中包含OKTA cdn的窗口小部件的CSS：index.html
<head>
<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"/>
创建登录页组件：
>创建组件：
文件。 最初，这是一个简单的组件：
LoginPage.js
./src/components/auth/
import React from 'react';
export default class LoginPage extends React.Component {
render() {
return <div>Login Page</div>;
}
}
在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" />集成窗口小部件：http://localhost:3000
窗口小部件初始化：
> in
）的方法，显示登录窗口小部件（），然后处理登录（）。 原始文章中提供了完整的组件（具有错误处理和登录/注销功能）。
>添加登录链接：在导航栏中添加登录链接（例如，./src/components/common/Navigation.js）。
测试：运行和npm install。 该应用程序现在应显示Okta登录窗口小部件。npm start
。{oktaOrgUrl}
以上是在15分钟内构建具有用户身份验证的React应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
