Persediaan Pengesahan Angular Menggunakan OpenID Connect dan Okta dalam Aplikasi Anda

Artikel ini pada asalnya diterbitkan di blog pemaju Okta. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Angular (dahulunya dipanggil Angular 2.0) dengan cepat menjadi salah satu cara yang paling berkuasa untuk membina aplikasi satu halaman moden. Kekuatan teras adalah fokus Angular untuk membina komponen yang boleh diguna semula, yang membantu anda meremehkan pelbagai kebimbangan dalam permohonan anda. Ambil pengesahan, sebagai contoh: ia boleh menyakitkan untuk membina, tetapi apabila anda membungkusnya dalam komponen, logik pengesahan boleh digunakan semula sepanjang aplikasi anda.

CLI sudut memudahkan komponen baru, dan juga keseluruhan projek. Sekiranya anda tidak menggunakan CLI sudut untuk menghasilkan kod sudut dengan cepat, anda akan merawat!

Dalam contoh ini, anda akan membina aplikasi web mudah dengan CLI Angular, alat untuk pembangunan sudut. Anda akan membuat aplikasi dengan ciri carian dan edit, kemudian tambahkan pengesahan.

Takeaways Key

cepat perancah dan menjalankan aplikasi sudut baru menggunakan CLI sudut, meningkatkan kecekapan pembangunan.
Mengintegrasikan pengesahan dengan lancar dengan menyediakan aplikasi OpenID Connect dengan Okta, memastikan pengurusan pengguna yang selamat.
Meningkatkan pengalaman pengguna dengan menambahkan ciri carian dan edit, menggunakan sistem komponen kuat Angular.
Gunakan penghalaan untuk menguruskan navigasi dalam aplikasi, yang membolehkan aliran pengguna yang lebih lancar dan pengurusan keadaan yang lebih baik.
Melaksanakan pengesahan borang untuk memastikan integriti data dan memberikan maklum balas, meningkatkan kebolehgunaan keseluruhan.
Laluan aplikasi selamat menggunakan Authguard Angular untuk melindungi maklumat sensitif dan menguatkuasakan pengesahan.

Buat aplikasi sudut

Tip: Jika anda ingin melangkaui aplikasi sudut dan dapatkan hak untuk menambah pengesahan, anda boleh mengklonkan projek NG-Demo saya, kemudian langkau ke aplikasi Connect OpenID di bahagian Okta.

Apa yang anda perlukan

<span>git clone https://github.com/mraible/ng-demo.git
</span>

kira -kira 20 minit

editor teks kegemaran atau IDE. Saya cadangkan Idea Intellij
node.js dan NPM dipasang. Saya cadangkan menggunakan NVM
sudut CLI dipasang. Jika anda tidak memasang CLI sudut, pasangkannya menggunakan NPM Install -g @angular/CLI
• Buat projek baru menggunakan perintah baru NG:

Ini akan mewujudkan projek NG-Demo dan menjalankan pemasangan NPM di dalamnya. Ia perlu mengambil masa sebentar untuk disiapkan, tetapi itu boleh berbeza -beza bergantung pada kelajuan sambungan anda.

ng new ng-demo

anda dapat melihat versi CLI sudut apa yang anda gunakan dengan ng -version.

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

jalankan aplikasi sudut anda

$ 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

Projek ini dikonfigurasikan dengan Webpack Dev Server. Untuk memulakannya, pastikan anda berada di direktori NG-Demo, kemudian jalankan:

<span>git clone https://github.com/mraible/ng-demo.git
</span>

anda harus melihat skrin seperti yang di bawah di http: // localhost: 4200.

Anda boleh memastikan ujian projek baru anda lulus, jalankan ujian ng:

ng new ng-demo

tambahkan ciri carian

Untuk menambah ciri carian, buka projek dalam IDE atau editor teks kegemaran anda. Untuk Idea IntelliJ, gunakan Fail> Projek Baru> Web Statik dan menunjuk ke direktori Ng-Demo.

Dalam tetingkap terminal, CD ke dalam direktori projek anda dan jalankan arahan berikut. Ini akan membuat komponen carian.

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

Buka src/app/carian/search.component.html dan ganti HTML lalainya dengan yang berikut:

$ 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

Dokumentasi Router untuk Angular menyediakan maklumat yang anda perlukan untuk menyediakan laluan ke carian komponen yang baru saja anda hasilkan. Berikut adalah ringkasan cepat:

di src/app/app.module.ts, tambahkan apploutes tetap dan importnya dalam @ngmodule:

ng serve

Dalam src/app/app.component.html, laraskan kandungan pemegang tempat dan tambahkan tag untuk memaparkan laluan.

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

Sekarang anda mempunyai persediaan penghalaan, anda boleh terus menulis ciri carian.

Jika anda masih mempunyai ng berkhidmat, penyemak imbas anda harus menyegarkan semula secara automatik. Jika tidak, navigasi ke http: // localhost: 4200. Anda mungkin akan melihat skrin kosong. Buka konsol JavaScript anda dan anda akan melihat masalahnya.

Untuk menyelesaikannya, buka src/app/app.module.ts dan tambah formsmodule sebagai import dalam @ngmodule:

$ 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

sekarang anda harus melihat borang carian.

Jika anda ingin menambah CSS untuk komponen ini, buka src/app/carian/search.component.css dan tambahkan beberapa CSS. Contohnya:

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

Bahagian ini telah menunjukkan kepada anda bagaimana untuk menghasilkan komponen baru kepada aplikasi sudut asas dengan CLI sudut. Bahagian seterusnya akan menunjukkan kepada anda cara membuat dan menggunakan fail JSON dan LocalStorage untuk membuat API palsu.

Untuk mendapatkan hasil carian, buat perkhidmatan carian yang membuat permintaan HTTP ke fail JSON. Mulakan dengan menjana perkhidmatan baru.

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

Gerakkan carian.service.ts yang dihasilkan dan ujiannya untuk aplikasi/kongsi/carian. Anda perlu membuat direktori ini.

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

Buat src/aset/data/people.json untuk memegang data anda.

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

Ubah suai src/app/shared/carian/carian.service.ts dan sediakan HTTP sebagai kebergantungan dalam pembina. Dalam fail yang sama, buat kaedah getAll () untuk mengumpulkan semua orang. Juga, tentukan alamat dan kelas orang yang JSON akan dimulakan.

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

Untuk membuat kelas ini tersedia untuk digunakan oleh komponen anda, edit src/app/shared/index.ts dan tambahkan yang berikut:

<span>git clone https://github.com/mraible/ng-demo.git
</span>

Sebab untuk membuat fail ini supaya anda dapat mengimport pelbagai kelas pada satu baris dan bukannya harus mengimport setiap kelas individu pada baris berasingan.

Dalam src/app/carian/search.component.ts, tambahkan import untuk kelas ini.

ng new ng-demo

Anda kini boleh menambah pembolehubah pertanyaan dan carian. Semasa anda berada di sana, ubah suai pembina untuk menyuntik perkhidmatan carian.

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

kemudian melaksanakan kaedah carian () untuk memanggil kaedah getAll () perkhidmatan.

$ 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

Pada ketika ini, anda mungkin akan melihat mesej berikut dalam konsol penyemak imbas anda.

ng serve

Untuk menetapkan ralat "Tiada Penyedia" dari atas, kemas kini app.module.ts untuk mengimport perkhidmatan carian dan tambahkan perkhidmatan ke senarai penyedia. Kerana carian carian bergantung kepada http, anda perlu mengimport httpmodule juga.

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

Sekarang mengklik butang carian harus berfungsi. Untuk menjadikan hasilnya kelihatan lebih baik, keluarkan tag

 dan gantikannya dengan <able> dalam src/app/carian/search.component.html. 
<pre class="brush:php;toolbar:false">$ 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

kemudian tambahkan beberapa CSS tambahan dalam src/app/carian/search.component.css untuk memperbaiki susun atur meja.

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

sekarang hasil carian kelihatan lebih baik.

Tetapi tunggu, anda masih tidak mempunyai fungsi carian! Untuk menambah ciri carian, tambahkan kaedah carian () untuk carian.

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

kemudian refactor carianComponent untuk memanggil kaedah ini dengan pemboleh ubah pertanyaannya.

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

sekarang hasil carian akan ditapis dengan nilai pertanyaan yang anda taipkan.

Bahagian ini menunjukkan kepada anda bagaimana untuk mengambil dan memaparkan hasil carian. Bahagian seterusnya membina ini dan menunjukkan cara mengedit dan menyimpan rekod.

tambahkan ciri edit

Ubah suai src/app/carian/search.component.html untuk menambah pautan untuk mengedit seseorang.

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

Jalankan arahan berikut untuk menghasilkan editComponent.

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

Tambahkan laluan untuk komponen ini dalam src/app/app.module.ts:

$ 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

Kemas kini src/app/edit/edit.component.html untuk memaparkan borang yang boleh diedit. Anda mungkin melihat saya telah menambah atribut ID kepada kebanyakan elemen. Ini adalah untuk membuat perkara lebih mudah apabila menulis ujian integrasi dengan protractor.

<span>mkdir -p src/app/shared/search
</span><span>mv src/app/search.service.* src/app/shared/search/.
</span>

Ubah suai komponen edit untuk mengimport model model dan perkhidmatan dan menggunakan perkhidmatan carian untuk mendapatkan data.

<span>[
</span>  <span>{
</span>    <span>"id": 1,
</span>    <span>"name": "Peyton Manning",
</span>    <span>"phone": "(303) 567-8910",
</span>    <span>"address": {
</span>      <span>"street": "1234 Main Street",
</span>      <span>"city": "Greenwood Village",
</span>      <span>"state": "CO",
</span>      <span>"zip": "80111"
</span>    <span>}
</span>  <span>},
</span>  <span>{
</span>    <span>"id": 2,
</span>    <span>"name": "Demaryius Thomas",
</span>    <span>"phone": "(720) 213-9876",
</span>    <span>"address": {
</span>      <span>"street": "5555 Marion Street",
</span>      <span>"city": "Denver",
</span>      <span>"state": "CO",
</span>      <span>"zip": "80202"
</span>    <span>}
</span>  <span>},
</span>  <span>{
</span>    <span>"id": 3,
</span>    <span>"name": "Von Miller",
</span>    <span>"phone": "(917) 323-2333",
</span>    <span>"address": {
</span>      <span>"street": "14 Mountain Way",
</span>      <span>"city": "Vail",
</span>      <span>"state": "CO",
</span>      <span>"zip": "81657"
</span>    <span>}
</span>  <span>}
</span><span>]
</span>

Ubah suai perkhidmatan carian untuk mengandungi fungsi untuk mencari seseorang dengan ID mereka, dan menyimpannya. Semasa anda berada di sana, ubah suai kaedah carian () untuk mengetahui objek yang dikemas kini di LocalStorage.

<span>import { Injectable } from '@angular/core';
</span><span>import { Http, Response } from '@angular/http';
</span><span>import 'rxjs/add/operator/map';
</span>
<span><span>@Injectable</span>()
</span><span>export class SearchService {
</span>  <span>constructor(private http: Http) {}
</span>
  <span>getAll() {
</span>    <span>return this.http.get('assets/data/people.json')
</span>        <span>.map((res: Response) => res.json());
</span>  <span>}
</span><span>}
</span>
<span>export class Address {
</span>  street<span>: string;
</span>  city<span>: string;
</span>  state<span>: string;
</span>  zip<span>: string;
</span>
  <span>constructor(obj?: any) {
</span>    <span>this.street = obj && obj.street || null;
</span>    <span>this.city = obj && obj.city || null;
</span>    <span>this.state = obj && obj.state || null;
</span>    <span>this.zip = obj && obj.zip || null;
</span>  <span>}
</span><span>}
</span>
<span>export class Person {
</span>  id<span>: number;
</span>  name<span>: string;
</span>  phone<span>: string;
</span>  address<span>: Address;
</span>
  <span>constructor(obj?: any) {
</span>    <span>this.id = obj && Number(obj.id) || null;
</span>    <span>this.name = obj && obj.name || null;
</span>    <span>this.phone = obj && obj.phone || null;
</span>    <span>this.address = obj && obj.address || null;
</span>  <span>}
</span><span>}
</span>

anda boleh menambah CSS ke src/app/edit/edit.component.css jika anda ingin membuat borang kelihatan lebih baik.

<span>export * from './search/search.service';
</span>

Pada ketika ini, anda harus dapat mencari seseorang dan mengemas kini maklumat mereka.

dalam src/app/edit/edit.component.html memanggil fungsi menyimpan () untuk mengemas kini data seseorang. Anda sudah melaksanakannya di atas. Fungsi ini memanggil fungsi gotolist () yang menambahkan nama orang itu ke URL apabila menghantar pengguna kembali ke skrin carian.

<span>git clone https://github.com/mraible/ng-demo.git
</span>

Oleh kerana carianComponent tidak melaksanakan carian secara automatik apabila anda melaksanakan URL ini, tambahkan logik berikut untuk berbuat demikian dalam pembangunnya.

ng new ng-demo

Anda akan mahu melaksanakan OnDestroy dan menentukan kaedah ngondestroy untuk membersihkan langganan ini.

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

Selepas membuat semua perubahan ini, anda harus dapat mencari/mengedit/mengemas kini maklumat seseorang. Jika ia berfungsi - kerja yang bagus!

Pengesahan borang

Satu perkara yang mungkin anda perhatikan ialah anda boleh membersihkan mana -mana elemen input dalam bentuk dan simpannya. Sekurang -kurangnya, medan nama perlu diperlukan. Jika tidak, tiada apa yang perlu diklik dalam hasil carian.

Untuk membuat nama diperlukan, ubah suai edit.component.html untuk menambah atribut yang diperlukan untuk nama .

$ 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

anda juga perlu membungkus segala -galanya dalam elemen

. Tambah

selepas tag

dan tutupnya sebelum yang terakhir . Anda juga perlu menambah pengendali (ngSubmit) ke borang dan menukar butang simpan untuk menjadi butang hantar biasa.

ng serve

Selepas membuat perubahan ini, mana -mana bidang dengan atribut yang diperlukan akan diperlukan.

Dalam tangkapan skrin ini, anda mungkin melihat medan alamat kosong. Ini dijelaskan oleh kesilapan dalam konsol anda.

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

untuk memperbaiki, tambahkan atribut nama ke semua medan alamat. Contohnya:

$ 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

sekarang nilai harus dipaparkan dalam semua medan dan nama harus diperlukan.

Jika anda ingin memberikan mesej pengesahan anda sendiri dan bukannya bergantung pada penyemak imbas, selesaikan langkah -langkah berikut:

Keluarkan ngnativeValidate dan tambah #editform = "ngform" ke elemen

.

tambah #name = "ngmodel" ke elemen .

tambah [disabled] = "! Editform.form.valid" ke

simpan butang.

Tambahkan yang berikut di bawah medan Nama untuk memaparkan ralat pengesahan.

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

Untuk mengetahui lebih lanjut mengenai borang dan pengesahan, lihat dokumentasi Borang Angular.

Buat aplikasi Connect OpenID di Okta

OpenID Connect (OIDC) dibina di atas protokol OAuth 2.0. Ia membolehkan pelanggan mengesahkan identiti pengguna dan, serta mendapatkan maklumat profil asas mereka. Untuk mengetahui lebih lanjut, lihat https://openid.net/connect.

Untuk mengintegrasikan okta untuk pengesahan pengguna, anda perlu terlebih dahulu mendaftar dan membuat aplikasi OIDC.

Log masuk ke akaun Okta anda, atau buat satu jika anda tidak mempunyai satu. Navigasi ke aplikasi dan klik pada butang Tambah Aplikasi. Pilih Spa dan klik Seterusnya. Pada halaman seterusnya, nyatakan http: // localhost: 4200 sebagai asas URI, log masuk redirect URI, dan redirect uRI. Klik selesai dan anda harus melihat tetapan seperti yang berikut.

Pasang projek Manfred Steyer untuk menambah OAuth 2 dan OpenID Connect Support menggunakan NPM.

<span>git clone https://github.com/mraible/ng-demo.git
</span>

Ubah suai src/app/app.component.ts untuk mengimport OAuthService dan konfigurasikan aplikasi anda untuk menggunakan tetapan aplikasi Okta anda.

ng new ng-demo

Buat src/app/home/home.component.ts dan konfigurasikannya untuk mempunyai butang log masuk dan logout.

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

Buat src/app/shared/auth/auth.guard.service.ts untuk menavigasi ke homecomponent jika pengguna tidak disahkan.

$ 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

Eksport AuthGuard dalam Src/Shared/Index.ts:

ng serve

mengimport oauthmodule dalam src /app /app.module.ts, konfigurasikan homecomponent baru, dan kunci /mengunci /cari /edit dengan authguard.

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

Setelah membuat perubahan ini, anda harus dapat menjalankan NG berkhidmat dan melihat butang log masuk.

Klik butang Login dan log masuk dengan salah satu orang yang dikonfigurasikan dalam aplikasi Okta anda.

Selepas log masuk, anda akan dapat mengklik

carian dan melihat maklumat orang.

Jika ia berfungsi - hebat! Jika anda ingin membina borang log masuk anda sendiri dalam aplikasi anda, teruskan membaca untuk mengetahui cara menggunakan SDK auth Okta dengan OAuthService.

Pengesahan dengan Okta Auth Sdk

OKTA Auth SDK membina di atas API Pengesahan OTKA dan OAuth 2.0 API untuk membolehkan anda membuat pengalaman log masuk sepenuhnya menggunakan JavaScript.

Pasangnya menggunakan npm:

Tambahkan rujukan ke fail JavaScript utama perpustakaan ini di .angular-cli.json:

$ 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

Komponen dalam bahagian ini menggunakan kelas Bootstrap CSS. Pasang Bootstrap 4.

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

Ubah suai src/styles.css untuk menambah rujukan kepada fail CSS Bootstrap.

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

Kemas kini src/app/app.component.html untuk menggunakan kelas bootstrap untuk sistem navbar dan gridnya.

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

Buat src/app/shared/auth/okta.auth.wrapper.ts untuk membungkus Okta Auth SDK dan mengintegrasikannya dengan OAuthService. Kaedah log masuk () menggunakan OktaAuth untuk mendapatkan token sesi dan menukarnya untuk token ID dan akses.

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

Dalam kod di atas, oauthservice.trylogin () parses dan menyimpan idtoken dan accessToken supaya mereka boleh diambil menggunakan oauthservice.getidtoken () dan oauthservice.getAccessToken ().

<span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>

Eksport OktaAuthWrapper dalam SRC/SHARED/INDEX.TS:

<span>git clone https://github.com/mraible/ng-demo.git
</span>

tambah OktaAuthWrapper sebagai pembekal di app.module.ts.

ng new ng-demo

Tukar Homecomponent untuk mengisytiharkan OktaAuth dan ubah suai templatnya supaya ia mempunyai butang untuk log masuk, serta borang log masuk.

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

Setelah membuat perubahan ini, homecomponent harus diberikan seperti berikut.

Tambahkan pembolehubah tempatan untuk medan nama dan kata laluan, import OktaAuthWrapper, dan melaksanakan kaedah LoginWithPassword () dalam HomeComponent.

$ 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

Anda sepatutnya dapat log masuk menggunakan borang tersebut, menggunakan salah satu pengguna berdaftar aplikasi anda. Selepas log masuk, anda akan dapat mengklik pautan carian dan melihat maklumat orang.

angular okta

Jika semuanya berfungsi - selamat! Sekiranya anda menghadapi masalah, sila hantarkan soalan untuk menyusun limpahan dengan tag Okta, atau tekan saya di Twitter @mraible.

Anda boleh mencari versi lengkap aplikasi yang dibuat dalam catatan blog ini di GitHub. Untuk mengetahui lebih lanjut mengenai keselamatan di Angular, lihat dokumentasi keselamatan Angular. Jika anda ingin mengetahui lebih lanjut mengenai OpenID Connect, saya akan mengesyorkan menonton video yang menenangkan di bawah.

Soalan Lazim (Soalan Lazim) pada Pengesahan Angular dengan OIDC

Apakah peranan OIDC dalam pengesahan sudut?

OpenID Connect (OIDC) adalah lapisan identiti mudah yang dibina di atas protokol OAuth 2.0. Ia membolehkan pelanggan mengesahkan identiti pengguna akhir berdasarkan pengesahan yang dilakukan oleh pelayan kebenaran. Dalam sudut, OIDC digunakan untuk mengendalikan pengesahan pengguna. Ia menyediakan rangka kerja yang selamat dan berskala yang dapat mengendalikan identiti pengguna yang banyak, menjadikannya lebih mudah untuk menguruskan sesi pengguna dan kawalan akses. beberapa langkah. Pertama, anda perlu memasang pakej yang diperlukan, seperti Angular-Auth-oDC-Client. Kemudian, anda mengkonfigurasi modul OIDC dalam modul aplikasi anda, menyatakan parameter yang diperlukan seperti Pihak Berkuasa, ID Pelanggan, dan Jenis Respons. Selepas itu, anda boleh menggunakan perkhidmatan OIDC untuk mengendalikan login pengguna, logout, dan pengesahan token. Menghantar maklumat dengan selamat antara pihak sebagai objek JSON. Apabila pengguna log masuk, pelayan menjana JWT yang mengandungi identiti pengguna dan menghantarnya kepada pelanggan. Pelanggan menyimpan token ini dan memasukkannya dalam setiap permintaan ke pelayan. Pelayan kemudian mengesahkan token untuk memastikan pengguna disahkan.

Apakah perbezaan antara OAuth2 dan OIDC? Ia digunakan untuk kebenaran. Sebaliknya, OIDC adalah lapisan identiti yang dibina di atas OAuth2. Ia memanjangkan OAuth2 untuk memberikan pengesahan, membolehkan aplikasi mengesahkan identiti pengguna. Pertama, anda harus menggunakan HTTPS untuk menyulitkan data dalam transit. Kedua, gunakan JWT untuk Pengesahan Pengguna dan Pengurusan Sesi. Ketiga, melaksanakan kawalan akses untuk menyekat sumber yang dapat diakses oleh pengguna. Akhirnya, sanitize input pengguna untuk mengelakkan serangan skrip lintas tapak (XSS).

Bagaimana saya boleh mengendalikan sesi pengguna dalam sudut? Apabila pengguna log masuk, pelayan menjana JWT yang mengandungi identiti pengguna dan menghantarnya kepada pelanggan. Pelanggan menyimpan token ini dan memasukkannya dalam setiap permintaan ke pelayan. Pelayan kemudian mengesahkan token untuk memastikan pengguna disahkan.

Apakah peranan pakej Angular-Auth-Moidc-Client? Perpustakaan untuk sudut yang membolehkan anda menyambungkan aplikasi anda dengan penyedia identiti menggunakan OpenID Connect dan OAuth2. Ia mengendalikan Pengesahan Pengguna, Pengurusan Sesi, dan Pengesahan Token. Pengawal laluan adalah antara muka yang boleh memberitahu penghala sama ada ia harus membenarkan navigasi ke laluan yang diminta. Mereka boleh digunakan untuk menyekat akses ke laluan tertentu berdasarkan peranan pengguna atau status pengesahan. . Pengendali ralat adalah fungsi yang mengambil ralat sebagai parameter dan mengendalikannya. Anda boleh menggunakannya untuk memaparkan mesej ralat kepada pengguna, log ralat, atau bahkan mengalihkan pengguna ke halaman yang berbeza.

Bagaimana saya boleh menguji pengesahan sudut? Mewujudkan ujian unit untuk perkhidmatan pengesahan anda dan ujian akhir-ke-akhir untuk permohonan anda. Anda boleh menggunakan alat seperti Jasmine dan Karma untuk ujian unit, dan protractor untuk ujian akhir-ke-akhir. Ujian ini harus mengesahkan bahawa proses pengesahan berfungsi seperti yang diharapkan dan mengendalikan kesilapan dengan betul.

Atas ialah kandungan terperinci Persediaan Pengesahan Angular Menggunakan OpenID Connect dan Okta dalam Aplikasi Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!