使用OpenID Connect和OKTA在應用中使用OpenID Connect和OKTA設置Angular身份驗證-js教程-PHP中文網

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

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

鑰匙要點

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

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

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

>利用路由來管理應用程序中的導航，允許使用更順暢的用戶流和更好的狀態管理。

>使用Angular的Authguard安全應用程序路由來保護敏感信息並強制執行身份驗證。
提示：如果您想跳過構建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安裝。完成大約需要一分鐘的時間，但這可能會根據您的連接速度而有所不同。

運行您的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

登入後複製

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

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

$ 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。

>在名稱字段下添加以下內容以顯示驗證錯誤。

要了解有關形式和驗證的更多信息，請參見Angular Forms文檔。
中創建一個OpenID Connect應用程序 OpenID Connect（OIDC）建立在OAuth 2.0協議之上。它允許客戶端驗證用戶的身份以及獲得其基本配置信息。要了解更多信息，請參見https://openid.net/connect。 >要集成OKTA以進行用戶身份驗證，您首先需要註冊並創建一個OIDC應用程序。
>登錄到您的Okta帳戶，或者如果沒有一個帳戶，則創建一個帳戶。導航到應用程序，然後單擊“添加應用”按鈕。選擇水療中心，然後單擊下一步。在下一頁上，指定http：// localhost：4200作為基本URI，登錄重定向URI和註銷重定向URI。單擊完成，您應該像以下內容一樣看到設置。

>安裝Manfred Steyer的項目，以使用NPM添加OAuth 2和OpenID Connect。
git clone https://github.com/mraible/ng-demo.git 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>修改src/app/app.component.ts以導入oauthservice並配置應用程序以使用Okta應用程序的設置。
ng new ng-demo
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
創建src/app/home/home.component.ts並將其配置為具有登錄和註銷按鈕。
[mraible:~/dev] $ ng new ng-demo 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 for tooling via npm. Installed packages for tooling via npm. You can `ng set --global packageManager=yarn`. Project 'ng-demo' successfully created. [mraible:~] 46s $ 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
創建src/app/app/auth/auth.guard.service.ts，如果沒有認證，則導航到homecompont。

> src/shared/index.ts中的導出authguard：
>
$ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.3.2 node: 8.4.0 os: darwin x64
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>在src /app /app.module.ts中導入OAuthModule，配置新的HomeComponent，然後用Authguard鎖定 /搜索和 /編輯路由。
ng serve
登入後複製
登入後複製
登入後複製
登入後複製
進行這些更改後，您應該能夠運行NG服務並查看登錄按鈕。
>

單擊“登錄”按鈕，然後與Okta應用程序中配置的一個人登錄。
$ ng test ... Chrome 60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs) 
登入後複製
登入後複製
登入後複製
登入後複製
登錄後，您將可以單擊搜索
並查看人們的信息。
>
如果有效 - 太好了！如果您想在應用程序中構建自己的登錄表單，請繼續閱讀以學習如何使用Oauthservice使用Okta auth SDK。用Okta auth SDK 進行身份驗證 > Okta auth SDK在Otka的身份驗證API和OAUTH 2.0 API之上構建，以使您能夠使用JavaScript創建一個完全品牌的登錄體驗。
使用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文件的引用。
<h2>Search</h2> <form> <input type="search" name="query" [(ngModel)]="query" (keyup.enter)="search()"> <button type="button" (click)="search()">Search</button> </form> <pre>{{searchResults | json}}</pre> 
登入後複製
登入後複製
登入後複製
>更新src/app/app.component.html用於其navbar和網格系統。
>
import { Routes, RouterModule } from '@angular/router'; const appRoutes: Routes = [ {path: 'search', component: SearchComponent}, {path: '', redirectTo: '/search', pathMatch: 'full'} ]; @NgModule({ ... imports: [ ... RouterModule.forRoot(appRoutes) ] ... }) export class AppModule { } 
登入後複製
登入後複製
登入後複製
> Create Src/app/shared/auth/okta.auth.wrapper.ts包裝Okta auth SDK並將其與Oauthservice集成。它的登錄（）方法使用Oktaaauth獲取會話令牌並將其交換為ID和訪問令牌。
>
<h1>Welcome to {{title}}!</h1>  <router-outlet></router-outlet> 
登入後複製
登入後複製
在上面的代碼中，oauthservice.trylogin（）解析並存儲iDtoken和accessToken，因此可以使用oauthservice.getIdtoken（）和oauthservice.getAccesstoken（）。 SRC/shared/index.ts中的oktaauthwrapper
>
git clone https://github.com/mraible/ng-demo.git 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>在app.module.ts。
ng new ng-demo
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>更改家庭成員以聲明oktaaauth並修改其模板，以便它具有登錄的按鈕，以及登錄表單。

進行這些更改後，家庭成分應如下呈現。
[mraible:~/dev] $ ng new ng-demo 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 for tooling via npm. Installed packages for tooling via npm. You can `ng set --global packageManager=yarn`. Project 'ng-demo' successfully created. [mraible:~] 46s $ 
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
>

>為用戶名和密碼字段添加局部變量，導入Oktaauthwrapper，並在HomeComponent中實現loginwithpassword（）方法。 >

>您應該可以使用應用程序的註冊用戶之一使用表格登錄。登錄後，您可以單擊搜索鏈接並查看人們的信息。
$ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.3.2 node: 8.4.0 os: darwin x64
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製
如果一切都起作用 - 恭喜！如果您遇到問題，請發布一個問題，以堆疊使用Okta標籤，或在Twitter @mrabily上打我。
>您可以在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涉及為您的身份驗證服務和應用程序的端到端測試創建單元測試。您可以使用茉莉花和業力等工具進行單位測試，而量角器進行端到端測試。這些測試應驗證身份驗證過程是否可以按預期工作並正確處理錯誤。
>