搜尋
首頁科技週邊IT業界構建具有身份驗證的提前應用程序

構建具有身份驗證的提前應用程序

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

鑰匙要點

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

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

>實現高階組件(HOCS),以進行身份​​驗證,以有效地管理用戶登錄狀態並保護您的預先應用程序中的路由。
    >
  • >採用預先反應的路由器和自定義重定向組件來處理導航和路線保護,以確保根據其身份驗證狀態適當地指導用戶。
  • >更新各種組件,例如登錄和配置文件,以與身份驗證邏輯進行交互,從而根據用戶數據提供無縫的用戶體驗和個性化。
  • 使用preactcli
  • bootstrap您的應用程序
  • 為了開始您的項目,您將使用NPM安裝preactcli。
  • 安裝了CLI後,請運行命令以創建基本的提示應用程序:>
  • 這個命令將持續幾分鐘,以腳手架為基本的提前應用程序並安裝所有依賴項。完成後,您應該看到有關命令行的大量信息,以告知您下一步可以做什麼。

更改為應用程序目錄。

>

然後啟動應用程序,只是為了確保所有內容都按預期工作。

>
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

添加一個auth高階組件

>完成此操作,您現在需要添加一些高階組件來幫助身份驗證。
npm install -g preact-cli
>

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

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

>

接下來,您從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的文件。輸入此組件的代碼:

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

創建重定向組件
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
>在componentwillmount Lifecycle功能中,將OnSuccess和OnError功能連接起來,並在組件中創建它們。

cd okta-preact-example
>您會注意到您的組件將身份驗證的處理返回到高階組件。這是高階組件和JavaScript中構成的好處的一個典型例子。

>

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

>您會在這裡註意到preact有所不同,因為它為您提供了道具和狀態作為渲染函數的參數的處理。此代碼只是使用這些參數的破壞來使用位置,auth和redirecttoreferrer簡單地製作,而無需擁有很多。
npm start
因此,您的最終/src/Routes/login/index.js文件將看起來像:

更新個人資料頁面

npm install @okta/okta-signin-widget --save
>現在您擁有登錄組件,並且正在使用Okta登錄小部件,請使用您創建的auth組件,然後更新配置文件頁面(in/src/routes/profile/index.js)有關用戶的信息。這就是您的final/src/routes/profile/index.js文件應該看起來像:

>您已經在組件的組件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}"></wrappedcomponent>;
更改路由

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

>真正更改的所有內容是您導入了新創建的登錄組件,然後刪除要傳遞到配置文件組件的用戶屬性,並為登錄組件添加了一個新路由。 >

運行您的新提前應用程序!

>

>現在,您應該能夠保存工作並在根文件夾中運行NPM啟動,並通過OKTA查看使用用戶身份驗證的完全啟用的proeact應用程序!

>

>提前和反應之間有很多相似之處,但是有一些關鍵差異。 preact是針對將下載大小保持很小的應用程序。預先路由器中有一些不錯的便利性,但是缺少一些東西(例如withRouter)。還有一些整潔的便利,例如擁有道具和狀態傳遞給渲染功能。總而言之,我認為preactect很整潔,但是我可以看到真的需要為複雜的應用程序做出一個成熟的反應。

了解更多

>您可以從他們的網站和github存儲庫中找到有關preaxct的更多信息。

>

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

>一如既往,如果您對文章,代碼,預先反應或OKTA有任何疑問,評論或疑慮,請隨時通過電子郵件與我聯繫,或在評論中或通過Twitter @LeeBrandt與我聯繫。 🎜>

經常詢問有關使用身份驗證構建預先驗證應用的問題

什麼是預告症,它與反應有何不同?

>

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

>

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

>如何將身份驗證添加到我的preacct應用程序?

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

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

我如何在preactct中管理狀態?

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

>

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

>

>如何部署我的preact應用程序?

>

> Netlify, Vercel和GitHub頁面等平台。要部署,您需要通過運行NPM運行構建命令來構建應用程序以進行生產。這將使用您的編譯應用程序創建一個“構建”目錄。然後,您可以將此目錄部署到所選的託管平台。

>

>如何優化我的preacct應用程序以供性能?

>

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

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

以上是構建具有身份驗證的提前應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
安卓首家接入DeepSeek背後:看見女性力量安卓首家接入DeepSeek背後:看見女性力量Mar 12, 2025 pm 12:27 PM

中国女性科技力量在AI领域的崛起:荣耀与DeepSeek合作背后的女性故事女性在科技领域的贡献日益显著。中国科技部数据显示,女性科技工作者数量庞大,在AI算法开发中展现出独特的社会价值敏感性。本文将聚焦荣耀手机,探究其率先接入DeepSeek大模型背后的女性团队力量,展现她们如何推动科技进步,重塑科技发展价值坐标系。2024年2月8日,荣耀正式上线DeepSeek-R1满血版大模型,成为安卓阵营首家接入DeepSeek的厂商,引发用户热烈反响。这一成功背后,女性团队成员在产品决策、技术攻坚和用户

DeepSeek'驚人”盈利:理論利潤率高達545%!DeepSeek'驚人”盈利:理論利潤率高達545%!Mar 12, 2025 pm 12:21 PM

DeepSeek公司在知乎發布技術文章,詳細介紹了其DeepSeek-V3/R1推理系統,並首次公開關鍵財務數據,引發業界關注。文章顯示,該系統單日成本利潤率高達545%,創下全球AI大模型盈利新高。 DeepSeek的低成本策略使其在市場競爭中佔據優勢。其模型訓練成本僅為同類產品的1%-5%,V3模型訓練成本僅為557.6萬美元,遠低於競爭對手。同時,R1的API定價僅為OpenAIo3-mini的1/7至1/2。這些數據證明了DeepSeek技術路線的商業可行性,也為AI大模型的高效盈利樹立了

2025年最佳10個最佳免費反向鏈接檢查器工具2025年最佳10個最佳免費反向鏈接檢查器工具Mar 21, 2025 am 08:28 AM

網站建設只是第一步:SEO與反向鏈接的重要性 建立網站只是將其轉化為寶貴營銷資產的第一步。您需要進行SEO優化,以提高網站在搜索引擎中的可見度,吸引潛在客戶。反向鏈接是提升網站排名的關鍵,它向谷歌和其他搜索引擎表明您的網站權威性和可信度。 並非所有反向鏈接都有利:識別並避免有害鏈接 並非所有反向鏈接都有益。有害鏈接會損害您的排名。優秀的免費反向鏈接檢查工具可以監控鏈接到您網站的來源,並提醒您注意有害鏈接。此外,您還可以分析競爭對手的鏈接策略,從中學習借鑒。 免費反向鏈接檢查工具:您的SEO情報員

美的推出首款DeepSeek空調:AI語音交互 可實現40萬 條指令!美的推出首款DeepSeek空調:AI語音交互 可實現40萬 條指令!Mar 12, 2025 pm 12:18 PM

美的即将发布搭载DeepSeek大模型的首款空调——美的鲜净感空气机T6,发布会定于3月1日下午1点30分举行。这款空调配备先进的空气智驾系统,可根据环境智能调节温度、湿度和风速等参数。更重要的是,它集成了DeepSeek大模型,支持超过40万条AI语音指令。美的此举引发业界热议,尤其关注白电产品与大模型结合的意义。不同于传统空调简单的温度设定,美的鲜净感空气机T6能够理解更复杂、更模糊的指令,并根据家庭环境智能调节湿度等,显著提升用户体验。

百度又一國民產品接入DeepSeek,是想開了還是跟風?百度又一國民產品接入DeepSeek,是想開了還是跟風?Mar 12, 2025 pm 01:48 PM

DeepSeek-R1賦能百度文庫與網盤:深度思考與行動的完美融合短短一個月內,DeepSeek-R1已迅速融入眾多平台。百度憑藉大膽的戰略佈局,將DeepSeek作為第三方模型夥伴,整合進自身生態系統,這標誌著其“大模型 搜索”生態戰略的重大進展。百度搜索和文心智能體平台率先接入DeepSeek及文心大模型的深度搜索功能,為用戶提供免費的AI搜索體驗。同時,“百度一下,你就知道”的經典slogan回歸,新版百度APP也整合了文心大模型和DeepSeek的能力,推出“AI搜索”、“全網信息提煉”

及時的網絡開發工程及時的網絡開發工程Mar 09, 2025 am 08:27 AM

AI及時的代碼生成工程:開發人員指南代碼開發的景觀已準備好進行重大轉變。 掌握大型語言模型(LLM)和及時工程對於未來幾年對開發人員至關重要。 Th

使用GO構建網絡漏洞掃描儀使用GO構建網絡漏洞掃描儀Apr 01, 2025 am 08:27 AM

此基於GO的網絡漏洞掃描儀有效地確定了潛在的安全弱點。 它利用了GO的並發功能的速度功能,包括服務檢測和漏洞匹配。讓我們探索它的能力和道德

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。