在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中文網其他相關文章！