本文最初發表在Okta開發人員博客上。感謝您支持使SitietPoint成為可能的合作夥伴。 React是一個快速且輕巧的庫，它導致在SPA（單頁應用程序）生態系統中快速採用。 preact是一種更輕巧的反應替代方案，重量為3kb！對於不太複雜的應用程序，它可能是一個不錯的選擇。 > 在本教程中，您將使用OKTA登錄窗口小部件構建一個基本的預先應用程序，並使用幾個頁面和用戶身份驗證。
鑰匙要點
>利用preactcli有效地腳打新的提前應用程序，利用其與某些React插件的兼容性，同時享受較輕，更快的框架。
然後啟動應用程序，只是為了確保所有內容都按預期工作。
>npm install -g preact-cli
>您應該看到快速構建運行，屏幕將清除，並向您顯示該應用程序正在http：// localhost：8080運行。當您在瀏覽器中打開該URL時，您應該看到這樣的頁面：
>preact create okta-preact-example
關於preactcli
的一些事情要注意>即使preactcli生成的應用程序看起來很像由Create-React-App生成的React應用程序，您甚至可以在您的預先應用程序中使用某些React插件（例如React-Router），但也有一些重要的差異。
例如，與ReactCli不同，沒有辦法彈出WebPack配置。取而代之的是，通過創建一個名為preact.config.js的文件，使用PREACTACT的WebPack配置幫助者和導出功能來更改WebPack的行為方式。>即使PREACTCLI表示該應用程序正在http://0.0.0.0:8080運行，請使用http：// localhost：8080。這是同一件事，當您在Okta儀表板中設置應用程序時，您將將http：// localhost：8080設置為基本URL和回調URL，因此這只是確保您可以調用Okta apis。 >
創建您的Okta應用程序>現在您擁有應用程序的基本外殼，現在該添加用戶身份驗證了。如果您還沒有一個，請在Okta上創建一個免費的（永遠）帳戶。
>從平台按鈕中選擇“水療”。單擊“下一個”按鈕以創建您的應用程序。
>這將帶您進入屏幕，進入創建應用程序嚮導的“應用程序設置”頁面。在應用程序名稱字段中輸入“ OktapReactexample”，然後添加http：// localhost：8080作為您的基本URI和登錄重定向URI。完成後，您的表格應該看起來像這樣：
>
>您需要創建一個用戶（如果您還沒有一個用戶），並將您的新應用程序分配給他們。或者，您可以使用用於登錄到Okta帳戶的憑據（管理員用戶）。
>在窗口小部件中安裝Okta符號
>將Okta的身份驗證進入您的新提前應用程序的最簡單方法是使用Okta的登錄窗口小部件。您將使用：安裝NPM
>您還需要使用以下方式安裝preact-router>完成此操作，您現在需要添加一些高階組件來幫助身份驗證。
npm install -g preact-cli
>在 /src /lib文件夾中添加一個名為auth.js的文件，並添加以下代碼：
preact create okta-preact-example
接下來，您從h進口下方的preact-router導入路由。這是preact用來在登錄函數中進行重定向的方法。請注意，驗證類只是一個常規功能，不會擴展組件。在構造函數中，內部函數與Auther類別的此上下文結合。
然後，將OKTA組織URL和客戶端ID輸入OKTA登錄窗口小部件配置。您的組織URL將是您在Okta帳戶中登錄時使用的URL（例如http://dev-12345.oktapreview.com），並且您可以從應用程序屬性頁面中的“一般性”儀表板的屬性頁面獲取客戶ID。 ”標籤用於您的應用程序（顯然，您的應用程序不會模糊）：>
>您還需要將Redirecturi屬性更改為http：// localhost：8080，因為PREACCT使用端口8080而不是3000用於普通React Apps。
登錄函數只需將用戶路由到登錄頁面，而註銷功能清除了保存在小部件的令牌管理器中的令牌，呼叫窗口上的簽名，然後將用戶重定向到應用程序的根。
>最後，創建了Auther類的單身人士，以由所有組件共享，並以稱為AUTH的Prop將其傳遞給您將您包裝在Aauth中的任何組件。創建一個小部件包裝器
>在您的 /src /lib文件夾中創建一個名為oktasigninwidget.js的文件。輸入此組件的代碼：
創建重定向組件
npm install -g preact-cli
React-Router中有一個重定向組件，但是預先反應路由器沒有，因此您需要一個。幸運的是，很容易創建自己的東西。在您的 /src /lib文件夾中創建一個名為redirect.js的文件，並添加以下代碼：
這只是一個基於傳遞給它的URL重定向的組件。在這種情況下，使用窗口機制將重定向，主要是因為您需要刷新頁面。您也可以只使用路由（this.props.to.pathname），然後讓preact的路由器重定向用戶。
>接下來，在SRC/路由中創建一個登錄文件夾。在該文件夾中，創建一個index.js文件和style.css文件。這只是隨著預先CLI創建組件的方式。 在index.js文件中，創建一個包裹在withauth組件中的登錄組件。首先，通過導入所需的模塊：
npm install -g preact-cli
>通過包裝在您之前創建的withauth高階組件中啟動組件，並設置開始狀態。在這裡，您將REDIRECTTOREFERRRER設置為False。
preact create okta-preact-example
cd okta-preact-example
>
>最後，創建渲染函數，該功能將決定顯示登錄窗口小部件，或者，如果用戶已登錄，則將其重定向到主頁。您也可以將用戶重定向到他們將要重定向到登錄頁面時要進入的頁面，但是現在就跳過。>您會在這裡註意到preact有所不同，因為它為您提供了道具和狀態作為渲染函數的參數的處理。此代碼只是使用這些參數的破壞來使用位置，auth和redirecttoreferrer簡單地製作，而無需擁有很多。
npm start
更新個人資料頁面
npm install @okta/okta-signin-widget --save
>您已經在組件的組件Willmount功能中添加了組件級別的身份驗證保護。如果對用戶進行身份驗證，它將在高階組件上調用getCurrentuser函數，並將用戶添加到組件的狀態。在渲染函數中，您只需輸出用戶的名稱和電子郵件。
>npm install preact-router --save
>現在，您只需要將路由進入應用程序，然後獲取菜單以鏈接到它們。首先，將/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文件中的路由，以便您的應用程序知道您的新路由以及如何處理它們。因此，您的新app.js文件將看起來像：
>真正更改的所有內容是您導入了新創建的登錄組件，然後刪除要傳遞到配置文件組件的用戶屬性，並為登錄組件添加了一個新路由。 >現在，您應該能夠保存工作並在根文件夾中運行NPM啟動，並通過OKTA查看使用用戶身份驗證的完全啟用的proeact應用程序！ >提前和反應之間有很多相似之處，但是有一些關鍵差異。 preact是針對將下載大小保持很小的應用程序。預先路由器中有一些不錯的便利性，但是缺少一些東西（例如withRouter）。還有一些整潔的便利，例如擁有道具和狀態傳遞給渲染功能。總而言之，我認為preactect很整潔，但是我可以看到真的需要為複雜的應用程序做出一個成熟的反應。
>
經常詢問有關使用身份驗證構建預先驗證應用的問題 > 我如何在preactct中管理狀態？ > > > >我可以在我的reateact應用程序中使用React庫和組件嗎？您的realact應用程序中的組件得益於“ preeact-compat”，這是一個薄層，試圖實現與React的100％兼容性。這意味著您可以從React切換到代碼的最小更改。但是，由於預先反應的尺寸很小，因此不支持React的某些特徵。運行您的新提前應用程序！
>
>您可以從他們的網站和github存儲庫中找到有關preaxct的更多信息。 什麼是預告症，它與反應有何不同？
>
> preactct是一個與反應相似的快速，輕巧的JavaScript庫。它被設計為小而有效的，壓縮尺寸僅為3KB。 PREACT提供了相同的現代UI庫和React的功能，例如虛擬DOM擴散和組件，但佔地面積較小。它非常適合帶寬和性能可能是問題的移動設備。 preact還旨在在API中盡可能接近反應，從而使React開發人員可以輕鬆地開始使用最小的調整。 >如何處理preacct中的路由？這是一個使用瀏覽器的歷史記錄API的簡單小路由器。要使用它，您需要通過NPM安裝它並將其導入項目。然後，您可以使用
>
>我如何測試我的preeact應用程序？可以使用JEST和酶等測試庫和框架來測試您的提前應用程序。 JEST是一個JavaScript測試框架，可與預先反應效果很好，而酶是對React的測試實用程序，也可以與預先反應一起使用。您還可以使用preact-test -utils，該圖書館提供用於測試proexct組件的輔助功能的庫。>
>如何優化我的preacct應用程序以供性能？您可以做的事情使您的應用程序更快。這包括代碼拆分，懶惰的組件以及優化圖像和其他資產。您還可以使用preactconconconponupdate（）生命週期方法來防止不必要的重新租賃。
以上是構建具有身份驗證的提前應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
