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. 
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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

Salin selepas log masuk

Salin selepas log masuk