在15分鐘內使用Okta的登錄小部件構建一個Angular應用程序

鍵突出顯示：

儘管缺乏向後兼容性，但Angular 2和4仍然非常受歡迎，在UI框架中獲得了第三名（在React和HTML5之後）。 OKTA提供了用於流線型用戶帳戶管理的用戶友好的API，並與Angular應用程序無縫集成。 它的登錄小部件提供了可自定義的JavaScript解決方案，包括密碼重置，忘記的密碼恢復和可靠的身份驗證功能。

>使用NPM和最小代碼將Okta的登錄小部件集成到Angular項目中很簡單，從而允許自定義匹配應用程序美學。 OKTA促進了Angular應用程序中的全面測試，並通過將Okta定義為提供商可以輕鬆解決任何問題。 完整的應用程序可以在GitHub上訪問。
• >
• > AngularJS曾經統治JavaScript MVC框架，但宣布對後續版本的非背部兼容性導致了一些社區動盪，使React和Vue.js等競爭對手受益。 然而，槓桿化標題的Angular 2和4已被證明具有很高的彈性，保持了強大的地位，作為第三個最受歡迎的UI框架。
>本文展示了OKTA在基本角度應用程序中的用戶身份驗證的登錄小部件的快速集成。 對於角初學者，建議使用補充角教程。源代碼可在github上找到。
>
• 為什麼選擇用戶身份驗證的OKTA？ OKTA提供了一個全面的API，用於管理用戶帳戶，安全存儲數據並連接到多個應用程序。 這簡化了帳戶管理，增強安全性並加速部署。 Okta登錄窗口小部件提供了易於自定義的可嵌入的JavaScript登錄解決方案，該解決方案鏡像Okta的標準登錄頁面的功能，包括密碼重置，遺忘的密碼功能和強大的身份驗證- 所有這些都通過Okta的策略進行了管理，不需要自定義代碼。 面向消費者的應用程序也支持社會登錄。

構建一個角度應用程序

具有Angular 4和Angular CLI 1.0，創建一個新應用程序很簡單：

安裝Angular CLI：

創建一個新應用程序：

>

。

集成Okta的登錄窗口

1. 1. 安裝小部件：npm install --save @okta/okta-signin-widget
   >
   2. >將CSS添加到src/styles.css>：

   <code class="language-css">@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
   @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';</code>

   3. 創建src/app/shared/okta/okta.service.ts管理小部件：

   <code class="language-typescript">import { Injectable } from '@angular/core';
   import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
   
   @Injectable()
   export class Okta {
     widget;
   
     constructor() {
       this.widget = new OktaSignIn({
         baseUrl: 'https://{yourOktaDomain}.com',
         clientId: '{clientId}',
         redirectUri: 'http://localhost:4200'
       });
     }
   
     getWidget() {
       return this.widget;
     }
   }</code>

   4. 添加Okta作為app.module.ts>的提供商。

      >

   5. 在您的Okta帳戶中創建一個OpenID Connect應用程序，用您的okta.service.ts>和ClientId>。 Okta Domain

   >在
   6. 中實現登錄/註銷功能，然後調整

      以顯示小部件和用戶信息。 > app.component.ts app.component.html

   測試和自定義

   >運行測試應用程序。 通過添加

   作為

   的提供商來解決潛在的測試失敗。 通過創建自定義CSS來自定義小部件的外觀。 完整的申請可在GitHub上獲得。 ng serve> Okta>src/app/app.component.spec.ts常見問題（常見問題解答）

   （這些是簡短的；這些概述；請參閱原始答案。）

   與Angular的OKTA集成： okta集成：

   安裝Okta Angular SDK，使用OKTA域和客戶端ID進行配置，並使用其方法進行身份驗證，會話管理和Route Security。
   • oktaaauthservice：>管理用戶身份驗證，包括登錄，註銷，身份驗證檢查和會話處理。 >
   • 固定路線：>使用限制對身份驗證的用戶的訪問。 >
   • OKTA回調組件：處理okta的身份驗證回調。 OktaAuthGuard>
   >自定義登錄頁面：
   • 通過Okta Admin儀表板或使用自定義HTML/CSS自定義 >>會話管理：
   >使用Okta的方法來創建，檢查，更新和結束會話。 >
   • OKTA代幣管理器：安全地管理令牌。
   >
   • 錯誤處理：> SDK提供錯誤處理功能。
   • 測試：>使用模擬服務使用單元測試。
   >
   • 更新SDK：使用
   。
   • 。 OKTA簡化了身份驗證，使開發人員可以專注於應用程序功能。 免費開發人員帳戶可用於實驗。 有關問題，請參閱堆棧溢出，Twitter或github。 >

以上是在15分鐘內使用Okta的登錄小部件構建一個Angular應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！