用節點，React和Okta構建用戶註冊

本文最初發表在Okta開發人員博客上。感謝您支持使SitietPoint成為可能的合作夥伴。 今天的互聯網用戶期望個性化的體驗。開發人員必須學會開發提供該個性化體驗的網站，同時將用戶的信息私有。現代Web應用程序還傾向於具有服務器端API和客戶端用戶界面。讓兩端都意識到當前已登錄的用戶可能會很具有挑戰性。在本教程中，我將帶您通過設置饋送React UI的節點API，並構建一個用戶註冊，以使用戶的信息保持私密和個人。

> 在本教程中，我不會使用任何州管理庫，例如Redux或ReduxThunk。在更強大的應用程序中，您可能想這樣做，但是很容易連接redux和reduxthunk，然後添加此處用作thunks的獲取語句。為了簡單起見，並將本文側重於添加用戶管理，我將在componentdidmount函數中添加fetch語句。

鑰匙要點

簡化的設置：使用節點，React和Okta設置用戶註冊不需要狀態管理庫，例如Redux，簡化了初始開發過程。

實用集成：教程提供了一種動手的方法，可以在React應用程序中集成OKTA以進行身份​​驗證，突出了Okta的React SDK和React Router的使用。 >

代碼組織：應用程序的結構適當地分開關注，並具有針對API和客戶端的不同文件夾，從而增強了可維護性。
• 安全的用戶身份驗證：OKTA可安全處理用戶身份驗證，以確保安全有效地管理用戶憑據。
> 基於組件的結構：利用React的基於組件的體系結構來組織UI，並具有單獨的登錄，註冊和用戶配置文件的組件。
• >
綜合教程：該指南涵蓋了從基本設置到高級用戶處理，提供了對使用節點，React和Okta的成熟用戶註冊系統的徹底理解。
安裝節點並反應先決條件
要設置基本應用程序，請確保已安裝以下基本工具：>
>節點（8）

create-react-app（NPM軟件包）

express-generator（npm package）

您還需要一個Okta開發人員帳戶。
>要安裝節點和NPM，您可以按照https://nodejs.org/en/的操作系統指令進行操作說明
• 然後只需使用NPM命令行安裝兩個NPM軟件包：>
• 現在，您已經準備好設置基本的應用程序結構。

  >腳手架基本應用程序

  訪問您要應用應用程序並為其創建一個新文件夾的文件夾：>

  npm i -g create-react-app express-generator
  

  >這將在apersample文件夾中創建兩個文件夾，稱為API和客戶端，並在API文件夾中使用nodejs和Express應用程序，在客戶端文件夾中使用基本React應用程序。因此，您的文件夾結構看起來像：
  >會員資格
  • api
    client
  使下一個部分更容易，打開兩個終端或終端選項卡；一個是Express App文件夾API，另一個是React App文件夾客戶端。

  默認情況下，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
  

  >您現在可以通過在適當的API和客戶端應用程序的適當文件夾中運行NPM啟動或YARN來運行這兩個應用程序。

  >

  添加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/中創建一個免費的永遠的開發人員帳戶。

  >註冊後，單擊頂部菜單中的應用程序。然後單擊“添加應用”按鈕。
  然後，您將被帶到應用程序創建嚮導。選擇單頁應用按鈕，然後在底部單擊“下一步”。
  在下一個屏幕上，您將看到單頁應用程序模板提供的默認設置。將應用程序的名稱更改為更具描述性的內容，例如“會員申請”。另外，將基本URI和登錄重定向設置更改為使用端口3000，因為那是您的應用程序運行的地方。其餘的默認設置都可以。

  >

  然後單擊底部的“完成”按鈕。

  創建應用程序後，請從應用程序列表中選擇它，然後單擊“常規”選項卡以查看您的應用程序的常規設置。

  

  >在底部，您會看到客戶端ID設置（顯然不會模糊您的ID）。將其複製到您的React應用程序中。您還需要OKTA組織URL，您可以在儀表板頁面的左上方找到。它可能看起來像“ https://dev-xxxxxx.oktapreview.com”。

  >將身份驗證添加到ReactJS應用程序
  現在創建了應用程序，通過添加幾個NPM依賴項來使用OKTA添加身份驗證。從客戶端文件夾運行：

  npm i -g create-react-app express-generator
  

  或，如果您使用的是紗線軟件包管理器：

  mkdir MembershipSample
  cd MembershipSample
  express api
  create-react-app client
  

  >將文件添加到client/src文件夾，稱為app.config.js。文件的內容為：
  然後，設置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應用程序之前，請創建一些組件來處理要添加的路由。
  >將組件文件夾添加到客戶端/SRC文件夾中。這是您所有組件都將居住的地方，也是組織它們的最簡單方法。然後為您的主頁組件創建一個主文件夾。目前，只有一個，但是以後的主頁可能只有更多的組件。使用以下內容添加一個homepage.js文件：

  >

  這是您目前真正需要的主頁。最重要的是要使主頁組件成為類類型。即使現在它僅包含一個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
  

  >這裡要注意的另一件事是導入的Oktaaauth庫。這是用於執行諸如使用您之前創建的OKTA應用程序簽名的基礎庫。您會注意到在構造函數中創建的Oktaaauth對象，該對像傳遞給了BaseUrl的屬性。這是您的app.config.js文件中的發行人的URL。登錄組件應包含在另一個組件中，因此您必須創建一個loginpage.js文件才能包含此組件。您將再次使用withauth高階組件，以訪問iSauthenticationationation的函數。 loginPage.js的內容將是：

  >

  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
  首先，為要添加的路由添加導航組件。在客戶端/src/組件文件夾中，添加一個稱為共享的文件夾。這將是在應用程序中的幾個地方使用的所有組件都將位於該位置。在該新文件夾中，添加一個名為navigation.js的文件。該文件包含一個基本組件，其中包含指向應用程序中所有頁面的鏈接。

  >您需要將導航組件包裝在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
  

  然後，您將在API/路由中更改users.js文件。該文件看起來像：

  mkdir MembershipSample
  cd MembershipSample
  express api
  create-react-app client
  

  >這裡要注意的最大的事情是lib/oktaclient的導入（您將添加片刻），呼叫OktaClient上的CreateSer函數的調用以及Newuser對象的形狀。 Newuser對象的形狀記錄在Okta的API文檔中。

  >對於您的節點應用程序以撥打OKTA應用程序，它將需要API令牌。要創建一個，請進入您的Okta開發人員儀表板，懸停在API菜單選項上，然後單擊令牌。

  從那裡單擊“創建令牌”。給令牌一個名稱，例如“會員資格”，然後單擊“創建令牌”。

  >

  >將令牌複製到安全的位置以供稍後使用。

  >在節點應用程序中稱為lib的新文件夾中創建一個名為oktaclient.js的文件。該文件將使用您剛剛創建的API令牌從Okta的節點SDK配置客戶端對象：

  >

  在節點應用程序的詞根上的app.js文件中，更新文件以將所有調用路由到 /api /。您將在App.Use語句的塊下方看到一個部分。更改設置的路線，以使其看起來像這樣：

  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3001');
  app.set('port', port);
  

  如果您的節點應用仍在運行，則需要停止該應用程序（使用CTRL C）並重新運行它（使用NPM啟動）才能生效。

  >

  >即使網站仍然需要一些嚴肅的風格愛，您現在可以註冊用戶，與新創建的用戶登錄並獲取登錄的用戶配置文件以在個人資料頁面上顯示！

  "name": "client",
  "proxy": "http://localhost:3001"
  

  了解更多

  如果您想了解有關此文章中使用的技術的更多信息，則可以查看以下文檔：>

  > Okta的節點SDK
  Okta的React SDK。
  >另外，請使用OKTA查看其他文章以進行身份​​驗證：>
  • randall degges在一個簡單節點網站上的OKTA上的文章
  我的文章使用okta登錄窗口小部件在react
  • 中 Matt Raible關於漸進式Web應用程序的文章

  >一如既往，如果您對文章有疑問，評論或疑慮，可以通過lee.brandt@okta.com給我發送電子郵件，或將您的問題發佈到開發人員論壇上。有關更多文章和教程，請在Twitter @oktadev上關注我們

  >常見問題（常見問題解答）有關使用節點，React和Okta

  構建用戶註冊的問題（常見問題解答）

  >如何在React應用程序中實現OKTA身份驗證？

  >在React應用中實現OKTA身份驗證涉及多個步驟。首先，您需要使用NPM或紗線安裝Okta React SDK。然後，您需要在Okta開發人員帳戶中創建OKTA應用程序。創建應用程序後，您將收到一個客戶端ID，您將使用它來配置應用程序中的Okta React SDK。您還需要使用Okta React SDK組件設置登錄，註銷和安全頁面的路由。最後，您可以使用useOktaAuth鉤訪問組件中的身份驗證狀態和方法。

  >

  > node.js在用Okta構建用戶註冊的作用是什麼？使用OKTA構建用戶註冊的關鍵作用。它充當服務器端環境，您可以在其中設置並運行應用程序。您可以使用它來創建服務器，定義路線並處理請求和響應。在OKTA的上下文中，您可以使用node.js與Okta API進行交互，以進行諸如創建用戶，驗證憑據和管理會話之類的任務。

  >

  >如何使用okta？ >

  使用OKTA保護您的React應用程序涉及使用Okta React SDK將身份驗證和授權功能添加到您的應用程序中。您可以使用安全組件包裝應用程序並為其提供必要的身份驗證上下文。您還可以使用SecureRoute組件來保護某些路線，並確保只有身份驗證的用戶才能訪問它們。此外，您可以使用useOktaAuth鉤訪問組件中的身份驗證狀態和方法。

  >

  >在實現OKTA身份驗證時如何處理錯誤？

  在實現OKTA身份驗證時，您可能會遇到各種不同錯誤，例如無效的憑據，網絡錯誤或服務器錯誤。您可以通過使用代碼中的try-catch塊來處理這些錯誤。在捕獲塊中，您可以記錄錯誤消息並向用戶提供用戶友好的消息。您還可以使用安全組件的OnError Prop在全局級別處理錯誤。

  >

  >如何測試我的OKTA身份驗證實現？

  >測試OKTA身份驗證實現是否涉及檢查登錄是否涉及檢查是否涉及，註銷和安全路線按預期工作。您可以通過導航到這些路線並驗證行為來手動執行此操作。您還可以使用測試庫（例如開玩笑和React Testing庫）編寫自動測試。這些測試可以模擬用戶操作，並檢查身份驗證狀態是否正確更改。 >

  >如何自定義OKTA登錄頁面？

  >您可以通過導航到Okta開發人員儀表板中的“自定義”部分來自定義OKTA登錄頁面。在這裡，您可以更改登錄頁面的徽標，顏色和文本。您還可以使用Okta登錄窗口小部件，該小部件是一個提供完全可自定義的登錄體驗的JavaScript庫。

  >我如何將OKTA與其他前端框架一起使用？

  okta為各種前端提供SDK框架，包括角和VUE。這些SDK與React SDK的工作原理相似，並允許您在應用程序中添加身份驗證和授權功能。您可以使用NPM或紗線安裝SDK，並使用OKTA應用程序詳細信息進行配置，並在應用程序中使用其組件和掛鉤。

  >

  >如何將OKTA與其他後端技術使用？ Okta為各種後端技術提供了庫和SDK，包括Java，.Net和PHP。這些庫允許您從服務器端代碼與Okta API進行交互。您可以使用它們來創建用戶，驗證憑據，管理會話等。

  >我如何對OKTA身份驗證的問題進行故障排除？

  >

  > okta authentication對問題進行故障排除問題涉及檢查錯誤消息，查看消息，查看消息，查看信息在網絡請求和響應中，並查看OKTA日誌。錯誤消息可以為您提供有關出了什麼問題的線索。網絡請求和響應可以向您顯示從OKTA發送並收到的數據。 OKTA日誌可以提供有關身份驗證事件的詳細信息。

  我如何了解有關OKTA及其功能的更多信息？

  >您可以通過訪問OKTA開發人員網站來了解有關OKTA及其功能的更多信息。 。在這裡，您可以找到指南，教程，API參考等。您還可以加入Okta開發人員論壇，以提出問題並與其他開發人員分享知識。

以上是用節點，React和Okta構建用戶註冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！