安裝Angular CLI：

創(chuàng)建一個新應用程序：

>

1. 1. 安裝小部件：npm install --save @okta/okta-signin-widget
   >
   2. >將CSS添加到src/styles.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';

   3. 創(chuàng)建src/app/shared/okta/okta.service.ts管理小部件：

   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;
     }
   }

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

      >

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

   >在
   6. 中實現(xiàn)登錄/注銷功能，然后調(diào)整

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

   測試和自定義

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

   作為

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

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

   與Angular的OKTA集成： okta集成：

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