如何使用Okta和模具向PWA添加auth

漸進式Web應用程序（PWA）正在徹底改變網絡開發，以解決各種開發團隊之間保持一致更新以及在Web和移動應用程序開發之間進行選擇的挑戰。 PWA提供許多移動應用功能，而沒有管理多個團隊和代碼庫的開銷。

由於緩存和服務人員，他們的性能即使在緩慢或離線連接方面也是出色的。服務工人攔截服務器請求，優先考慮緩存的數據並在可用時使用新鮮服務器數據進行更新。

>離子團隊的模具項目是改變遊戲規則的。 模板是編譯器生成符合標準的Web組件的編譯器，避免了傳統的JavaScript框架的膨脹。它將您的代碼編譯成香草組件，並與您首選的框架無縫集成。 模具起動器項目是一個很棒的起點，達到了近乎完美的燈塔PWA分數。

>用模板構建PWA：逐步指南

>

1. 設置啟動器應用程序：>

   克隆啟動器應用程序，然後刪除github遙控器：

   >

   git clone https://github.com/ionic-team/stencil-starter.git my-stencil-app
   cd my-stencil-app
   git remote rm origin

   >安裝依賴項：

   npm install

   （忽略有關

   的警告node-pre-gyp - 這是一個已知的NPM問題。）fsevents>

2. 集成Okta auth SDK（通過CDN）：> >在關閉之前，將Okta auth SDK添加到

   ：

   之前 index.html </body>（使用CDN比NPM軟件包更可靠。）

   >

   <🎜>

生產構建以進行準確的PWA評估：
3. >

   運行生成生產構建。 這將創建包含您服務工作者的文件夾。 請注意，開發構建（

   ）將無法準確反映PWA功能。

   npm run build www>sw.js>配置您的Okta應用程序：npm start

   >
>創建一個免費的Okta開發人員帳戶（如果您沒有一個帳戶）。 添加一個新的單頁應用程序應用程序，將其命名為“模板水療”之類的描述性。 將基礎URI設置為un，並登錄將URIS重定向到
4. 。 注意您的客戶ID和OKTA組織URL（例如，

   ）。 >

   http://localhost:3333 https://dev-XXXXXX.oktapreview.com

   創建身份驗證組件（）：

   >

   在app-auth.css>文件夾中創建app-auth.tsx和components/app-auth。 該文件將使用OktaAuth SDK包含登錄表單和身份驗證邏輯。 （請參閱原始文章中的完整代碼示例。）app-auth.tsx>

5. 添加登錄方法：>

   方法使用OKTA處理用戶身份驗證，將ID令牌存儲在LocalStorage中，並在成功登錄後重定向到配置文件頁面。包括錯誤處理。 （請參閱原始文章中的完整代碼示例。）

   > login()

6. 增強登錄功能：

   如果localStorage中已經存在ID令牌，則>實現

   直接將用戶重定向到配置文件頁面。 添加

   偵聽器以允許通過Enter鍵登錄。 componentWillLoad()> keydown.enter

7. 開發個人資料頁面（

   ）：app-profile> 創建一個接口（

   ）來定義用戶索賠的結構。 更新

   以顯示從存儲的ID令牌中顯示用戶索賠，並包括一個註銷按鈕。 處理潛在的AppUser.tsx>預處理的方案。 （請參閱原始文章中的完整代碼示例。）app-profile.tsx> isServer

8. >配置路由：

   >使用中的登錄和配置文件頁面添加路由。 將主頁鏈接更新為

   。

   components/my-app/my-app.tsx <stencil-route></stencil-route> /profile

   添加樣式（可選）：
用CSS增強登錄表單和配置文件頁面的視覺吸引力。 （請參閱原始文章中的完整代碼示例。）
9. >

   該增強指南提供了使用模具和Okta進行身份驗證的PWA的更清晰，更簡潔的演練。切記參考完整代碼段的原始文章。 包括原始文章中的圖像以維護上下文。

   >

以上是如何使用Okta和模具向PWA添加auth的詳細內容。更多資訊請關注PHP中文網其他相關文章！