本文最初發(fā)表在Okta開發(fā)人員博客上。感謝您支持使SitietPoint成為可能的合作夥伴。 React是一個快速且輕巧的庫，它導(dǎo)致在SPA（單頁應(yīng)用程序）生態(tài)系統(tǒng)中快速採用。 preact是一種更輕巧的反應(yīng)替代方案，重量為3kb！對於不太複雜的應(yīng)用程序，它可能是一個不錯的選擇。 > 在本教程中，您將使用OKTA登錄窗口小部件構(gòu)建一個基本的預(yù)先應(yīng)用程序，並使用幾個頁面和用戶身份驗證。

鑰匙要點

>利用preactcli有效地腳打新的提前應(yīng)用程序，利用其與某些React插件的兼容性，同時享受較輕，更快的框架。

>使用OKTA登錄窗口小部件將用戶身份驗證集成在您的reafeACT應(yīng)用中，簡化了管理用戶會話和安全性的過程。 >

>實現(xiàn)高階組件（HOCS），以進行身份??驗證，以有效地管理用戶登錄狀態(tài)並保護您的預(yù)先應(yīng)用程序中的路由。

>
• >採用預(yù)先反應(yīng)的路由器和自定義重定向組件來處理導(dǎo)航和路線保護，以確保根據(jù)其身份驗證狀態(tài)適當?shù)刂笇?dǎo)用戶。
>更新各種組件，例如登錄和配置文件，以與身份驗證邏輯進行交互，從而根據(jù)用戶數(shù)據(jù)提供無縫的用戶體驗和個性化。
• 使用preactcli
• bootstrap您的應(yīng)用程序
為了開始您的項目，您將使用NPM安裝preactcli。
安裝了CLI後，請運行命令以創(chuàng)建基本的提示應(yīng)用程序：>
這個命令將持續(xù)幾分鐘，以腳手架為基本的提前應(yīng)用程序並安裝所有依賴項。完成後，您應(yīng)該看到有關(guān)命令行的大量信息，以告知您下一步可以做什麼。

更改為應(yīng)用程序目錄。

>

然後啟動應(yīng)用程序，只是為了確保所有內(nèi)容都按預(yù)期工作。

>

npm install -g preact-cli

>您應(yīng)該看到快速構(gòu)建運行，屏幕將清除，並向您顯示該應(yīng)用程序正在http：// localhost：8080運行。當您在瀏覽器中打開該URL時，您應(yīng)該看到這樣的頁面：

>

preact create okta-preact-example

關(guān)於preactcli

的一些事情要注意

>即使preactcli生成的應(yīng)用程序看起來很像由Create-React-App生成的React應(yīng)用程序，您甚至可以在您的預(yù)先應(yīng)用程序中使用某些React插件（例如React-Router），但也有一些重要的差異。

例如，與ReactCli不同，沒有辦法彈出WebPack配置。取而代之的是，通過創(chuàng)建一個名為preact.config.js的文件，使用PREACTACT的WebPack配置幫助者和導(dǎo)出功能來更改WebPack的行為方式。

>即使PREACTCLI表示該應(yīng)用程序正在http://0.0.0.0:8080運行，請使用http：// localhost：8080。這是同一件事，當您在Okta儀表板中設(shè)置應(yīng)用程序時，您將將http：// localhost：8080設(shè)置為基本URL和回調(diào)URL，因此這只是確保您可以調(diào)用Okta apis。 >

創(chuàng)建您的Okta應(yīng)用程序

>現(xiàn)在您擁有應(yīng)用程序的基本外殼，現(xiàn)在該添加用戶身份驗證了。如果您還沒有一個，請在Okta上創(chuàng)建一個免費的（永遠）帳戶。

創(chuàng)建帳戶後，請轉(zhuǎn)到管理儀表板，然後在頁面菜單中單擊“應(yīng)用程序”。然後單擊綠色的“添加應(yīng)用程序”按鈕，然後單擊綠色“創(chuàng)建新應(yīng)用”按鈕，以便您看到一個模態(tài)窗口，例如：

>從平臺按鈕中選擇“水療”。單擊“下一個”按鈕以創(chuàng)建您的應(yīng)用程序。

>這將帶您進入屏幕，進入創(chuàng)建應(yīng)用程序嚮導(dǎo)的“應(yīng)用程序設(shè)置”頁面。在應(yīng)用程序名稱字段中輸入“ OktapReactexample”，然後添加http：// localhost：8080作為您的基本URI和登錄重定向URI。完成後，您的表格應(yīng)該看起來像這樣：

>

>您需要創(chuàng)建一個用戶（如果您還沒有一個用戶），並將您的新應(yīng)用程序分配給他們?；蛘?，您可以使用用於登錄到Okta帳戶的憑據(jù)（管理員用戶）。 >在窗口小部件中安裝Okta符號

>將Okta的身份驗證進入您的新提前應(yīng)用程序的最簡單方法是使用Okta的登錄窗口小部件。您將使用：安裝NPM

>您還需要使用以下方式安裝preact-router

添加一個auth高階組件

>完成此操作，您現(xiàn)在需要添加一些高階組件來幫助身份驗證。

npm install -g preact-cli

>

>在 /src /lib文件夾中添加一個名為auth.js的文件，並添加以下代碼：>

preact create okta-preact-example

在第一行代碼中，您可以說出與眾不同的東西。預(yù)告癥中的H模塊將JSX變成DOM元素。通常，React將使用React庫生成React.Createelement語句從JSX中製作DOM元素。 preact使用h庫來製作h（'div'，class：'sosity'sagings'}，'content'）語句的用法。

>

接下來，您從h進口下方的preact-router導(dǎo)入路由。這是preact用來在登錄函數(shù)中進行重定向的方法。請注意，驗證類只是一個常規(guī)功能，不會擴展組件。在構(gòu)造函數(shù)中，內(nèi)部函數(shù)與Auther類別的此上下文結(jié)合。

然後，將OKTA組織URL和客戶端ID輸入OKTA登錄窗口小部件配置。您的組織URL將是您在Okta帳戶中登錄時使用的URL（例如http://dev-12345.oktapreview.com），並且您可以從應(yīng)用程序?qū)傩皂撁嬷械摹耙话阈浴眱x表板的屬性頁面獲取客戶ID。 ”標籤用於您的應(yīng)用程序（顯然，您的應(yīng)用程序不會模糊）：

>

>您還需要將Redirecturi屬性更改為http：// localhost：8080，因為PREACCT使用端口8080而不是3000用於普通React Apps。

登錄函數(shù)只需將用戶路由到登錄頁面，而註銷功能清除了保存在小部件的令牌管理器中的令牌，呼叫窗口上的簽名，然後將用戶重定向到應(yīng)用程序的根。

>最後，創(chuàng)建了Auther類的單身人士，以由所有組件共享，並以稱為AUTH的Prop將其傳遞給您將您包裝在Aauth中的任何組件。

創(chuàng)建一個小部件包裝器

>在您的 /src /lib文件夾中創(chuàng)建一個名為oktasigninwidget.js的文件。輸入此組件的代碼：

>在這裡，componentDidmount方法將Okta登錄小部件呈現(xiàn)到渲染方法中的div，並且componentWillunMount函數(shù)刪除了小部件。 在渲染方法中，有一些奇怪的代碼。這使您可以將對當前元素的引用設(shè)置為一個稱為widgetContainer的變量，然後在thice.widgetContainer中使用它。整潔，是嗎？感謝Matt Raible向我展示了這個技巧！

創(chuàng)建重定向組件

npm install -g preact-cli

React-Router中有一個重定向組件，但是預(yù)先反應(yīng)路由器沒有，因此您需要一個。幸運的是，很容易創(chuàng)建自己的東西。在您的 /src /lib文件夾中創(chuàng)建一個名為redirect.js的文件，並添加以下代碼：>

這只是一個基於傳遞給它的URL重定向的組件。在這種情況下，使用窗口機制將重定向，主要是因為您需要刷新頁面。您也可以只使用路由（this.props.to.pathname），然後讓preact的路由器重定向用戶。

>

創(chuàng)建登錄組件

接下來，在SRC/路由中創(chuàng)建一個登錄文件夾。在該文件夾中，創(chuàng)建一個index.js文件和style.css文件。這只是隨著預(yù)先CLI創(chuàng)建組件的方式。 在index.js文件中，創(chuàng)建一個包裹在withauth組件中的登錄組件。首先，通過導(dǎo)入所需的模塊：

npm install -g preact-cli

>通過包裝在您之前創(chuàng)建的withauth高階組件中啟動組件，並設(shè)置開始狀態(tài)。在這裡，您將REDIRECTTOREFERRRER設(shè)置為False。

preact create okta-preact-example

>在componentwillmount Lifecycle功能中，將OnSuccess和OnError功能連接起來，並在組件中創(chuàng)建它們。

cd okta-preact-example

>您會注意到您的組件將身份驗證的處理返回到高階組件。這是高階組件和JavaScript中構(gòu)成的好處的一個典型例子。

>

>最後，創(chuàng)建渲染函數(shù)，該功能將決定顯示登錄窗口小部件，或者，如果用戶已登錄，則將其重定向到主頁。您也可以將用戶重定向到他們將要重定向到登錄頁面時要進入的頁面，但是現(xiàn)在就跳過。

>您會在這裡註意到preact有所不同，因為它為您提供了道具和狀態(tài)作為渲染函數(shù)的參數(shù)的處理。此代碼只是使用這些參數(shù)的破壞來使用位置，auth和redirecttoreferrer簡單地製作，而無需擁有很多。

npm start

因此，您的最終/src/Routes/login/index.js文件將看起來像：

更新個人資料頁面

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

>現(xiàn)在您擁有登錄組件，並且正在使用Okta登錄小部件，請使用您創(chuàng)建的auth組件，然後更新配置文件頁面（in/src/routes/profile/index.js）有關(guān)用戶的信息。這就是您的final/src/routes/profile/index.js文件應(yīng)該看起來像：

>您已經(jīng)在組件的組件Willmount功能中添加了組件級別的身份驗證保護。如果對用戶進行身份驗證，它將在高階組件上調(diào)用getCurrentuser函數(shù)，並將用戶添加到組件的狀態(tài)。在渲染函數(shù)中，您只需輸出用戶的名稱和電子郵件。

>

npm install preact-router --save

更新標題組件

>現(xiàn)在，您只需要將路由進入應(yīng)用程序，然後獲取菜單以鏈接到它們。首先，將/src/components/header/index.js文件更改為：

>

>如果未登錄用戶，則將顯示“登錄”按鈕，如果是“註銷”按鈕，則會顯示“登錄”按鈕。它還將向那些登錄的用戶顯示“配置文件”菜單項。

>

import {h} from 'preact';
import { route } from 'preact-router';
import OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';

class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);

    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com/',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:8080',
      authParams: {
        responseType: ['id_token', 'token'],
        scopes: ['openid', 'email', 'profile']
      }
    });
  }

  isAuthenticated() {
    // Checks if there is a current accessToken in the TokenManger.
    return !!this.widget.tokenManager.get('accessToken');
  }

  getCurrentUser(){
    return this.widget.tokenManager.get('idToken');
  }

  login() {
    // Redirect to the login page
    route('/login/');
  }

  async logout() {
    this.widget.tokenManager.clear();
    await this.widget.signOut();
    location = '/';
  }

  handleAuthentication(tokens) {
    for (let token of tokens) {
      if (token.idToken) {
        this.widget.tokenManager.add('idToken', token);
      } else if (token.accessToken) {
        this.widget.tokenManager.add('accessToken', token);
      }
    }
  }
}

// create a singleton
const auth = new Auth();
export const withAuth = WrappedComponent => props =>
  <WrappedComponent auth={auth} {...props} />;

更改路由

最後，更改/src/components/app.js文件中的路由，以便您的應(yīng)用程序知道您的新路由以及如何處理它們。因此，您的新app.js文件將看起來像：

>真正更改的所有內(nèi)容是您導(dǎo)入了新創(chuàng)建的登錄組件，然後刪除要傳遞到配置文件組件的用戶屬性，並為登錄組件添加了一個新路由。 >

運行您的新提前應(yīng)用程序！

>

>現(xiàn)在，您應(yīng)該能夠保存工作並在根文件夾中運行NPM啟動，並通過OKTA查看使用用戶身份驗證的完全啟用的proeact應(yīng)用程序！

>

>提前和反應(yīng)之間有很多相似之處，但是有一些關(guān)鍵差異。 preact是針對將下載大小保持很小的應(yīng)用程序。預(yù)先路由器中有一些不錯的便利性，但是缺少一些東西（例如withRouter）。還有一些整潔的便利，例如擁有道具和狀態(tài)傳遞給渲染功能?？偠灾艺J為preactect很整潔，但是我可以看到真的需要為複雜的應(yīng)用程序做出一個成熟的反應(yīng)。

了解更多

>您可以從他們的網(wǎng)站和github存儲庫中找到有關(guān)preaxct的更多信息。

>

>您還可以從Okta開發(fā)人員GitHub存儲庫中獲取本文的完整代碼。

>一如既往，如果您對文章，代碼，預(yù)先反應(yīng)或OKTA有任何疑問，評論或疑慮，請隨時通過電子郵件與我聯(lián)繫，或在評論中或通過Twitter @LeeBrandt與我聯(lián)繫。 ??>

經(jīng)常詢問有關(guān)使用身份驗證構(gòu)建預(yù)先驗證應(yīng)用的問題

什麼是預(yù)告癥，它與反應(yīng)有何不同？

>

> preactct是一個與反應(yīng)相似的快速，輕巧的JavaScript庫。它被設(shè)計為小而有效的，壓縮尺寸僅為3KB。 PREACT提供了相同的現(xiàn)代UI庫和React的功能，例如虛擬DOM擴散和組件，但佔地面積較小。它非常適合帶寬和性能可能是問題的移動設(shè)備。 preact還旨在在API中盡可能接近反應(yīng)，從而使React開發(fā)人員可以輕鬆地開始使用最小的調(diào)整。

>

>如何設(shè)置一個預(yù)先啟動項目？提前項目很簡單。您可以使用preact-CLI，這是一種命令行工具，可幫助您創(chuàng)建和管理提前項目。要安裝它，您需要在計算機上安裝node.js和NPM。安裝後，您可以通過運行命令preacct創(chuàng)建默認的my-project來創(chuàng)建一個新項目，其中“ my-project”是您項目的名稱。這將使用項目文件和依賴項創(chuàng)建一個新的目錄。

>如何將身份驗證添加到我的preacct應(yīng)用程序？

>向您的preeact應(yīng)用程序添加身份驗證涉及多個步驟。首先，您需要安裝和導(dǎo)入必要的庫，例如用於處理cookie的路由和預(yù)先烹飪的前路由。然後，您需要創(chuàng)建一個登錄表單和一個身份驗證服務(wù)，該服務(wù)將處理登錄請求並管理用戶的會話。最後，您需要在呈現(xiàn)受保護的組件之前檢查用戶是否已進行身份驗證來保護您的路線。

>如何處理preacct中的路由？這是一個使用瀏覽器的歷史記錄API的簡單小路由器。要使用它，您需要通過NPM安裝它並將其導(dǎo)入項目。然後，您可以使用組件和組件來定義路線。每個組件代表一個頁面，並且具有與URL相匹配的“路徑”支架。

我如何在preactct中管理狀態(tài)？

preeact使用稱為“ props”和“ of”的概念狀態(tài)”來管理數(shù)據(jù)。道具從父母傳遞給組件，而狀態(tài)在組件中進行管理。 PREACT的國家管理與React相似。您可以使用this.setState（）方法來更新狀態(tài)並重新渲染組件。對於復(fù)雜的狀態(tài)管理，您可以使用redux或mobx。不寫課。要使用掛鉤，您需要從“預(yù)先/鉤子”中導(dǎo)入它們。提前中的掛鉤API與React相同，因此您可以以相同的方式使用usestate，usefeft和usecontext之類的掛鉤。

>

>我如何測試我的preeact應(yīng)用程序？可以使用JEST和酶等測試庫和框架來測試您的提前應(yīng)用程序。 JEST是一個JavaScript測試框架，可與預(yù)先反應(yīng)效果很好，而酶是對React的測試實用程序，也可以與預(yù)先反應(yīng)一起使用。您還可以使用preact-test -utils，該圖書館提供用於測試proexct組件的輔助功能的庫。

>

>如何部署我的preact應(yīng)用程序？

>

> Netlify， Vercel和GitHub頁面等平臺。要部署，您需要通過運行NPM運行構(gòu)建命令來構(gòu)建應(yīng)用程序以進行生產(chǎn)。這將使用您的編譯應(yīng)用程序創(chuàng)建一個“構(gòu)建”目錄。然後，您可以將此目錄部署到所選的託管平臺。

>

>如何優(yōu)化我的preacct應(yīng)用程序以供性能？

>

您可以做的事情使您的應(yīng)用程序更快。這包括代碼拆分，懶惰的組件以及優(yōu)化圖像和其他資產(chǎn)。您還可以使用preactconconconponupdate（）生命週期方法來防止不必要的重新租賃。

>我可以在我的reateact應(yīng)用程序中使用React庫和組件嗎？您的realact應(yīng)用程序中的組件得益於“ preeact-compat”，這是一個薄層，試圖實現(xiàn)與React的100％兼容性。這意味著您可以從React切換到代碼的最小更改。但是，由於預(yù)先反應(yīng)的尺寸很小，因此不支持React的某些特徵。

以上是構(gòu)建具有身份驗證的提前應(yīng)用程序的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！