>本文演示了將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中文網其他相關文章！
