社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
添加搜索功能，在IDE或您喜歡的文本編輯器中打開項目。對於Intellij Idea，請使用文件>新項目>靜態網絡，並指向NG-DEMO目錄。
>要命名，請修改edit.component.html，以將所需屬性添加到名稱。
>在.angular-cli.json中添加對此庫的主要JavaScript文件的引用：
>您可以在GitHub上此博客文章中找到完整的應用程序。要在Angular中了解有關安全性的更多信息，請參見Angular的安全文檔。如果您想了解有關OpenID Connect的更多信息，我建議您觀看下面的舒緩視頻。
openID Connect（OIDC）是在OAuth 2.0協議頂部構建的簡單身份層。它允許客戶根據授權服務器執行的身份驗證來驗證最終用戶的身份。在Angular中，OIDC用於處理用戶身份驗證。它提供了一個安全且可擴展的框架，可以處理多個用戶身份，從而更容易管理用戶會話和訪問控制。
如何在角度？幾個步驟。首先，您需要安裝必要的軟件包，例如Angular-auth-oidc-client。然後，您在應用程序模塊中配置OIDC模塊，指定必要的參數，例如授權，客戶端ID和響應類型。之後，您可以使用OIDC服務來處理用戶登錄，註銷和令牌驗證。
> OAuth2和OIDC？
>
確保您的Angular應用程序涉及多個步驟。首先，您應使用HTTPS在運輸中加密數據。其次，使用JWT進行用戶身份驗證和會話管理。第三，實現訪問控制以限制用戶可以訪問的資源。最後，對用戶輸入進行消毒以防止跨站點腳本（XSS）攻擊。
>測試Angular auntartication涉及為您的身份驗證服務和應用程序的端到端測試創建單元測試。您可以使用茉莉花和業力等工具進行單位測試，而量角器進行端到端測試。這些測試應驗證身份驗證過程是否可以按預期工作並正確處理錯誤。
首頁 web前端 js教程 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

Joseph Gordon-Levitt
Joseph Gordon-Levitt
Feb 16, 2025 am 11:09 AM

使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

本文最初發表在Okta開發人員博客上。感謝您支持使SitietPoint成為可能的合作夥伴。 Angular（以前稱為Angular 2.0）迅速成為構建現代單頁應用程序的最強大方法之一。核心優勢是Angular專注於構建可重複使用的組件，這有助於您將應用程序中的各種擔憂解散。以身份驗證為例：構建可能會很痛苦，但是一旦將其包裝到組件中，就可以在整個應用程序中重複使用身份驗證邏輯。 > >

鑰匙要點

快速腳手架並使用角CLI運行新的角度應用，從而提高了開發效率。

>通過與Okta設置OpenID Connect應用程序無縫集成身份驗證，以確保安全的用戶管理。

>通過添加Angular功能強大的組件系統添加搜索和編輯功能來增強用戶體驗。

>利用路由來管理應用程序中的導航，允許使用更順暢的用戶流和更好的狀態管理。
    實施表單驗證以確保數據完整性並提供反饋，從而提高了總體可用性。
  • >使用Angular的Authguard安全應用程序路由來保護敏感信息並強制執行身份驗證。
    • 創建一個Angular應用程序
    • >
  • 提示：如果您想跳過構建Angular應用程序並正確添加身份驗證，則可以克隆我的NG-DEMO項目，然後跳過OKTA部分中的OpenID Connect App。 >
    • 您需要的
大約20分鐘

>最喜歡的文本編輯器或IDE。我推薦Intellij Idea

已安裝了 安裝了角度CLI。如果您沒有安裝Angular CLI，請使用NPM安裝-G @angular/cli>安裝它 

<span>git clone https://github.com/mraible/ng-demo.git
</span>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>使用ng new命令創建一個新項目：>

這將創建一個NG-DEMO項目並在其中運行NPM安裝。完成大約需要一分鐘的時間，但這可能會根據您的連接速度而有所不同。
    >
    • >您可以看到您使用ng -version使用的Angular CLI。 >
    • 運行您的Angular應用程序
    • 該項目配置為WebPack Dev Server。要啟動它，請確保您在NG-DEMO目錄中，然後運行：>
    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    >您應該在http：// localhost：4200。

    使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證>您可以確保新項目的測試通過，運行NG測試：>

    添加搜索功能
    ng new ng-demo
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    添加搜索功能，在IDE或您喜歡的文本編輯器中打開項目。對於Intellij Idea，請使用文件>新項目>靜態網絡，並指向NG-DEMO目錄。

    在終端窗口中，將CD CD到您的項目目錄中並運行以下命令。這將創建一個搜索組件。

    >打開src/app/search/search.component.html，並用以下內容替換其默認的html：
    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >在src/app/app.module.ts中，添加批准常數並在@ngmodule中導入：

    >

    >在src/app/app.component.html中，調整佔位符內容，然後添加標籤以顯示路由。 > 

    ng serve
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    >現在您已經設置了路由，您可以繼續編寫搜索功能。

    如果您仍然有NG服務運行，則瀏覽器應自動刷新。如果沒有，請導航到http：// localhost：4200。您可能會看到一個空白屏幕。打開您的JavaScript控制台，您會看到問題。 
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    為了解決此問題，打開src/app/app.module.ts並添加formsModule作為@ngmodule中的導入：

    >

    >現在您應該看到搜索表格。 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

    如果要為此組件添加CSS，請打開src/app/search/search.component.css並添加一些CSS。例如：
    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    本節向您展示瞭如何將新組件生成具有角CLI的基本角度應用程序。下一節將向您展示如何創建和使用JSON文件和LocalStorage來創建假API。 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證獲得搜索結果，請創建一個向JSON文件提出HTTP請求的搜索服務。首先生成新服務。 

    <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
    登入後複製
    登入後複製
    登入後複製
    >將生成的search.service.ts及其測試移動到應用/共享/搜索。您需要創建此目錄。

    創建SRC/Assets/data/people.json保存您的數據。 

    <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登入後複製
    登入後複製
    登入後複製
    >修改src/app/app/shared/search/search.service.ts，並提供http作為其構造函數的依賴關係。在同一文件中，創建一個getall（）方法來收集所有人。另外，定義JSON將被編組為。

    >使這些類可用於組件的消費，請編輯src/app/shared/index.ts，並添加以下內容：>
    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    創建此文件的原因是，您可以在單行上導入多個類，而不必在單獨的行上導入每個單獨的類。 >

    >在src/app/search/search.component.ts中，添加這些類的導入。

    > 

    ng new ng-demo
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >您現在可以添加查詢和搜索變量。當您在那裡時，請修改構造函數以注入搜索服務。

    > 

    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    然後實現搜索（）方法來調用服務的getall（）方法。

    >此時，您可能會在瀏覽器的控制台中看到以下消息。 
    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >

    要修復上面的“無提供者”錯誤，請更新app.module.ts以導入搜索服務並將服務添加到提供商列表中。因為搜索服務取決於http，因此您還需要導入httpmodule。 
    ng serve
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    現在，單擊搜索按鈕應起作用。為了使結果看起來更好，請刪除

    標籤，然後在src/app/app/search/search.component.html中替換為
    登入後複製
    。 然後，在src/app/search/search.component.css中添加一些其他CSS以改進其表佈局。 
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    現在，搜索結果看起來更好。 
    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    >但是，等等，您仍然沒有搜索功能！要添加搜索功能，請在searchService中添加search（）方法。 
    <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
    登入後複製
    登入後複製
    登入後複製
    >

    然後重構搜索Component用其查詢變量調用此方法。 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證>

    現在，搜索結果將被您輸入的查詢值進行過濾。 > 
    <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登入後複製
    登入後複製
    登入後複製
    >本節向您展示瞭如何獲取和顯示搜索結果。下一部分將基於此部分，並顯示如何編輯和保存記錄。

    >

    添加編輯功能
    <span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>
    登入後複製
    登入後複製

    >修改src/app/search/search.component.html添加一個用於編輯人員的鏈接。

    運行以下命令以生成editComponent。

    >在src/app/app.module.ts中為此組件添加路由：>

    >更新src/app/edit/edit/edit.component.html以顯示可編輯的表單。您可能會注意到我已經在大多數元素中添加了ID屬性。這是為了使事情在用量角器編寫集成測試時變得容易。 
    <span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    FormsModule
  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登入後複製
    >

    >修改EditComponent以導入模型和服務類，並使用SearchService獲取數據。 
    <span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>
    登入後複製

    >修改搜索服務，以包含以通過其ID找到一個人並保存它們的功能。當您在那裡時，修改搜索（）方法以了解LocalStorage中的更新對象。 
    $ ng g <span>service search
</span>installing <span>service
</span>  create src/app/search.service.spec.ts
  create src/app/search.service.ts
  WARNING Service is generated but not provided, it must be provided to be used
    登入後複製

    >您可以將CSS添加到src/app/edit/edit/edit.component.css，如果要使表單看起來更好。

    > 
    <span>mkdir -p src/app/shared/search
</span><span>mv src/app/search.service.* src/app/shared/search/.
</span>
    登入後複製
    在這一點上，您應該能夠搜索一個人並更新他們的信息。 >使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

    > 在src/app/edit/edit/edit.component.html中調用save（）函數以更新人的數據。您已經在上面實現了這一點。 該函數調用gotolist（）函數，該函數將用戶發送回搜索屏幕時，將人的名字附加到URL。 

    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >由於執行此URL時搜索Component不會自動執行搜索，因此將以下邏輯添加到其構造函數中。

    >您需要實現ondestroy並定義ngondestroy方法來清理此訂閱。 
    ng new ng-demo
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    進行所有這些更改後，您應該能夠搜索/編輯/更新一個人的信息。如果有效 - 工作好！

    > 
    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    形式驗證

    您可能會注意到的一件事是，您可以清除表單中的任何輸入元素並保存。至少應需要名稱字段。否則，搜索結果中沒有任何點擊。

    >

    >要命名，請修改edit.component.html，以將所需屬性添加到名稱。

    >您還需要將所有內容包裹在元素中。在

    標籤之後添加，然後在最後一個之前將其關閉。您還需要將（ngsubmit）處理程序添加到表格中，然後更改保存按鈕為常規提交按鈕。

    進行這些更改後，將需要任何具有所需屬性的字段。 
    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >

    在此屏幕截圖中，您可能會注意到地址字段為空白。這是由您的控制台中的錯誤來解釋的。

    > 
    ng serve
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    要修復，請在所有地址字段中添加名稱屬性。例如：

    使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

    現在的值應在所有字段中顯示，並需要在所有字段中顯示。

    > 
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登入後複製
    登入後複製
    登入後複製
    登入後複製

    如果您想提供自己的驗證消息而不是依靠瀏覽器，請完成以下步驟： 

    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登入後複製
    登入後複製
    登入後複製
    登入後複製
    >刪除ngnativeValidate，然後將＃editform =“ ngform”添加到
    element。

    >添加＃名稱=“ ngmodel”到 element。

    >添加[disabled] =“！editform.form.valid”到使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證> save

    button。

    >在名稱字段下添加以下內容以顯示驗證錯誤。
      >
    2. 要了解有關形式和驗證的更多信息，請參見Angular Forms文檔。
      3. 在Okta
    3. 中創建一個OpenID Connect應用程序 OpenID Connect（OIDC）建立在OAuth 2.0協議之上。它允許客戶端驗證用戶的身份以及獲得其基本配置信息。要了解更多信息，請參見https://openid.net/connect。 >要集成OKTA以進行用戶身份驗證，您首先需要註冊並創建一個OIDC應用程序。

      >登錄到您的Okta帳戶，或者如果沒有一個帳戶，則創建一個帳戶。導航到應用程序，然後單擊“添加應用”按鈕。選擇水療中心，然後單擊下一步。在下一頁上，指定http：// localhost：4200作為基本URI，登錄重定向URI和註銷重定向URI。單擊完成，您應該像以下內容一樣看到設置。

      使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

      >安裝Manfred Steyer的項目，以使用NPM添加OAuth 2和OpenID Connect。 

      <span>git clone https://github.com/mraible/ng-demo.git
</span>
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      >修改src/app/app.component.ts以導入oauthservice並配置應用程序以使用Okta應用程序的設置。 

      ng new ng-demo
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      創建src/app/home/home.component.ts並將其配置為具有登錄和註銷按鈕。 

      <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      創建src/app/app/auth/auth.guard.service.ts，如果沒有認證，則導航到homecompont。

      > src/shared/index.ts中的導出authguard：> 
      $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製

      >在src /app /app.module.ts中導入OAuthModule，配置新的HomeComponent，然後用Authguard鎖定 /搜索和 /編輯路由。 

      ng serve
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      進行這些更改後，您應該能夠運行NG服務並查看登錄按鈕。 >

      單擊“登錄”按鈕，然後與Okta應用程序中配置的一個人登錄。 
      $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
      登入後複製
      登入後複製
      登入後複製
      登入後複製

      登錄後，您將可以單擊使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證搜索

      並查看人們的信息。

      > 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

      如果有效 - 太好了！如果您想在應用程序中構建自己的登錄表單，請繼續閱讀以學習如何使用Oauthservice使用Okta auth SDK。 用Okta auth SDK 進行身份驗證 > Okta auth SDK在Otka的身份驗證API和OAUTH 2.0 API之上構建，以使您能夠使用JavaScript創建一個完全品牌的登錄體驗。

      使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證使用NPM安裝它：

      >在.angular-cli.json中添加對此庫的主要JavaScript文件的引用：

      本節中的組件使用Bootstrap CSS類。安裝Bootstrap 4. 

      $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      >修改src/styles.css以添加引用Bootstrap的CSS文件的引用。 

      <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
      登入後複製
      登入後複製
      登入後複製
      >更新src/app/app.component.html用於其navbar和網格系統。

      > 

      <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
      登入後複製
      登入後複製
      登入後複製
      > Create Src/app/shared/auth/okta.auth.wrapper.ts包裝Okta auth SDK並將其與Oauthservice集成。它的登錄（）方法使用Oktaaauth獲取會話令牌並將其交換為ID和訪問令牌。

      > 

      <span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>
      登入後複製
      登入後複製
      在上面的代碼中，oauthservice.trylogin（）解析並存儲iDtoken和accessToken，因此可以使用oauthservice.getIdtoken（）和oauthservice.getAccesstoken（）。 SRC/shared/index.ts中的oktaauthwrapper

      > 

      <span>git clone https://github.com/mraible/ng-demo.git
</span>
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製

      >在app.module.ts。 

      ng new ng-demo
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      >更改家庭成員以聲明oktaaauth並修改其模板，以便它具有登錄的按鈕，以及登錄表單。

      進行這些更改後，家庭成分應如下呈現。 
      <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      >

      >為用戶名和密碼字段添加局部變量，導入Oktaauthwrapper，並在HomeComponent中實現loginwithpassword（）方法。 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證>

      >您應該可以使用應用程序的註冊用戶之一使用表格登錄。登錄後，您可以單擊搜索鏈接並查看人們的信息。 
      $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      登入後複製
      如果一切都起作用 - 恭喜！如果您遇到問題，請發布一個問題，以堆疊使用Okta標籤，或在Twitter @mrabily上打我。 使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證

      >您可以在GitHub上此博客文章中找到完整的應用程序。要在Angular中了解有關安全性的更多信息，請參見Angular的安全文檔。如果您想了解有關OpenID Connect的更多信息，我建議您觀看下面的舒緩視頻。

      >

      經常詢問有關Angular身份驗證的問題（常見問題解答）

      > OIDC在Angular身份驗證中的作用是什麼？

      openID Connect（OIDC）是在OAuth 2.0協議頂部構建的簡單身份層。它允許客戶根據授權服務器執行的身份驗證來驗證最終用戶的身份。在Angular中，OIDC用於處理用戶身份驗證。它提供了一個安全且可擴展的框架，可以處理多個用戶身份，從而更容易管理用戶會話和訪問控制。

      如何在角度？幾個步驟。首先，您需要安裝必要的軟件包，例如Angular-auth-oidc-client。然後，您在應用程序模塊中配置OIDC模塊，指定必要的參數，例如授權，客戶端ID和響應類型。之後，您可以使用OIDC服務來處理用戶登錄，註銷和令牌驗證。

      >

      >如何使用Angular hander hander jwt代幣？將各方之間的信息牢固地傳輸為JSON對象。當用戶登錄時，服務器會生成一個包含用戶身份並將其發送給客戶端的JWT。客戶端存儲此令牌，並將其包含在服務器的每個請求中。然後，服務器驗證令牌以確保用戶被認證。

      >

      > OAuth2和OIDC？

      oauth2是一個協議，該協議允許應用程序在HTTP服務上獲得對用戶帳戶的有限訪問權限。它用於授權。另一方面，OIDC是在OAuth2頂部構建的身份層。它擴展了OAuth2以提供身份驗證，從而允許應用程序驗證用戶的身份。

      >

      >我如何保護我的Angular應用程序？

      確保您的Angular應用程序涉及多個步驟。首先，您應使用HTTPS在運輸中加密數據。其次，使用JWT進行用戶身份驗證和會話管理。第三，實現訪問控制以限制用戶可以訪問的資源。最後，對用戶輸入進行消毒以防止跨站點腳本（XSS）攻擊。

      如何使用JWT處理Angular的用戶會話？當用戶登錄時，服務器會生成一個包含用戶身份並將其發送給客戶端的JWT。客戶端存儲此令牌，並將其包含在服務器的每個請求中。然後，該服務器驗證令牌以確保用戶被身份驗證。

      如何使用路由警衛實現Angular？路線護罩是可以告訴路由器的接口，是否應允許導航到請求的路線。它們可用於根據用戶的角色或身份驗證狀態來限制對某些路線的訪問。

      >

      >我如何處理Angular身份驗證中的錯誤？

      可以使用錯誤處理程序來處理Angular身份驗證中的錯誤。錯誤處理程序是將錯誤作為參數並處理的函數。您可以使用它向用戶顯示錯誤消息，記錄錯誤，甚至將用戶重定向到另一個頁面。

      >

      如何測試角身份驗證？

      >測試Angular auntartication涉及為您的身份驗證服務和應用程序的端到端測試創建單元測試。您可以使用茉莉花和業力等工具進行單位測試，而量角器進行端到端測試。這些測試應驗證身份驗證過程是否可以按預期工作並正確處理錯誤。

      >

以上是使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死鐵路 - 如何馴服狼
3 週前 By DDD
藍王子：如何到達地下室
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
顯示更多
Related knowledge
前端熱敏紙小票打印遇到亂碼問題怎麼辦？ 前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript？ 誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何實現視差滾動和元素動畫效果，像資生堂官網那樣？ 或者： 怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？ 如何實現視差滾動和元素動畫效果，像資生堂官網那樣？ 或者： 怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？ Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...

JavaScript的演變：當前的趨勢和未來前景 JavaScript的演變：當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？ 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？ Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...

JavaScript引擎：比較實施 JavaScript引擎：比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

前端開發中如何實現類似 VSCode 的面板拖拽調整功能？ 前端開發中如何實現類似 VSCode 的面板拖拽調整功能？ Apr 04, 2025 pm 02:06 PM

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中，如何實現類似於VSCode...

See all articles