Back to Question Center
0

Buat Aplikasi Sudut dengan Otentikasi dalam 20 Menit            Buat Aplikasi Sudut dengan Otentikasi di 20 MenitLini Semalas: APIsnpmAjaxES6jQueryMore ...

1 answers:
Buat Aplikasi Sudut dengan Otentikasi dalam 20 Menit

Artikel ini awalnya diterbitkan di Blog Pengembang OKTA. Terima kasih telah mendukung mitra yang membuat SitePoint menjadi mungkin.

Sudut (sebelumnya disebut Sudut 2. 0) dengan cepat menjadi salah satu cara paling ampuh untuk membuat aplikasi satu halaman modern. Kekuatan inti adalah fokus Semalt pada membangun komponen yang dapat digunakan kembali, yang membantu Anda memisahkan berbagai masalah dalam aplikasi Anda. Ambil otentikasi, misalnya: bisa menyakitkan untuk membangun, tapi begitu Anda membungkusnya dalam komponen, logika otentikasi dapat digunakan kembali di seluruh aplikasi Anda.

CLI Semalt memudahkan perancah komponen baru, dan bahkan keseluruhan proyek. Jika Anda belum pernah menggunakan CLI Semalt untuk menghasilkan kode Semalt dengan cepat, Anda akan diobati!

Dalam contoh ini, Anda akan membuat aplikasi web sederhana dengan CLI sudut, alat untuk pengembangan sudut. Semalt membuat aplikasi dengan fitur pencarian dan edit, lalu tambahkan otentikasi.

Membuat Aplikasi Sudut

Tip: Jika Anda ingin melewati pembuatan aplikasi sudut dan berhak menambahkan autentikasi, Anda dapat mengkloning proyek ng (demo) saya , kemudian melompat ke Aplikasi OpenID Connect Buat di bagian Okta.

  git klon https: // github. com / mraible / ng-demo git    

Apa yang Akan Dibutuhkan

  • Sekitar 20 menit
  • Editor teks favorit atau IDE. Saya merekomendasikan IntelliJ IDEA
  • Node js dan npm terpasang Saya sarankan menggunakan nvm
  • CLI angular terpasang Jika Anda tidak menginstal CLI Angular, instal dengan menggunakan npm install -g @ angular / cli

Buat proyek baru dengan menggunakan perintah ng baru :

  ng ng demo baru    

Ini akan membuat proyek ng-demo dan menjalankan npm install di dalamnya. Perlu waktu sekitar satu menit untuk menyelesaikannya, tapi itu bisa bervariasi tergantung pada kecepatan koneksi Anda.

  [mraible: ~ / dev] $ ng ng-demo barumemasang ngmembuat. editorconfigbuat README mdbuat src / aplikasi / aplikasi komponen. cssbuat src / aplikasi / aplikasi komponen. htmlbuat src / aplikasi / aplikasi komponen. spec. tsbuat src / aplikasi / aplikasi komponen. tsbuat src / aplikasi / aplikasi modul. tsmembuat src / aset /. gitkeepbuat src / lingkungan / lingkungan. melecut. tsbuat src / lingkungan / lingkungan. tsbuat src / favicon icobuat src / index htmlbuat src / main tsbuat src / polyfill. tsbuat src / gaya cssbuat src / test tsbuat src / tsconfig. aplikasi. jsonbuat src / tsconfig. spec. jsonbuat src / typings d. tsmembuat. angular-cli. jsonbuat e2e / app e2e-spec tsbuat e2e / app po. tsbuat e2e / tsconfig e2e jsonmembuat. gitignorebuat karma conf. jsbuat paket jsonbuat busur derajat. conf. jsbuat tsconfig jsonbuat tslint jsonBerhasil diinisialisasi git Menginstal paket untuk perkakas via npm. Paket terinstal untuk perkakas via npm. Anda bisa `ng set --global packageManager = yarn`. Project 'ng-demo' berhasil dibuat. [mraible: ~] 46s $    

Anda dapat melihat versi CLI sudut yang Anda gunakan dengan ng --versi .

  $ ng --versi_ _ ____ _ ___/ \ _ _ _ _ _ _ _ | | __ _ _ __ / ___ | | | _ _ |/ △ \ | '_ \ / _` | | | | | / _` | '__ | | | | | | |/ ___ \ | | | | (_ | | | _ | || | _ | | | | | | | | | | | | | | |/ _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ || ___ /@ angular / cli: 1. 3. 2node: 8. 4. 0os: darwin x64    

Jalankan Aplikasi Angular Anda

Proyek dikonfigurasi dengan server dev webpack.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Anda dapat memastikan bahwa tes proyek baru Anda lulus, jalankan ng test :

  $ ng test Chrome 60. 0. 3112 (Mac OS X 10. 12. 6): Melaksanakan 3 dari 3 SUKSES (0. 239 dkk / 0. 213 dtk)    

Tambahkan Fitur Pencarian

Untuk menambahkan fitur pencarian, buka proyek di IDE atau editor teks favorit Anda. Untuk IntelliJ IDEA, gunakan File> New Project> Static Web dan arahkan ke direktori ng-demo .

Di jendela terminal, cd ke direktori proyek Anda dan jalankan perintah berikut. Ini akan membuat komponen pencarian.

  $ ng g komponen pencarianmemasang komponenbuat src / app / search / search. komponen. cssbuat src / app / search / search. komponen. htmlbuat src / app / search / search. komponen. spec. tsbuat src / app / search / search. komponen. tsupdate src / app / app modul. ts    

Buka src / app / search / search. komponen. html dan ganti HTML bawaannya dengan yang berikut:

  

Cari

">

Dokumentasi Router untuk Sudut menyediakan informasi yang Anda butuhkan untuk menyiapkan rute ke SearchComponent yang baru Anda buat. Berikut adalah ringkasan singkatnya:

Dalam src / app / app. modul. ts , tambahkan appRoutes konstan dan impor ke dalam @ NgModule :

  import {Routes, RouterModule} dari '@ angular / router';const appRoutes: Rute = [{path: 'search', component: SearchComponent},{path: '', redirectTo: '/ search', pathMatch: 'penuh'}];@NgModule ({.impor: [RouterModule forRoot (appRoutes)] })kelas ekspor AppModule {}    

Dalam src / app / app. komponen. html , sesuaikan isi placeholder dan tambahkan tag untuk menampilkan rute.

  

Selamat datang di {{title}}!

Setelah mengatur routing, Anda dapat terus menulis fitur pencarian.

Jika Anda masih memiliki ng serve running, browser Anda harus refresh secara otomatis. Jika tidak, navigasikan ke http: // localhost: 4200. Anda mungkin akan melihat layar kosong. Buka konsol JavaScript Anda dan Anda akan melihat masalahnya.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Untuk mengatasinya, buka src / app / app. modul. ts dan tambahkan FormsModule sebagai impor dalam @NgModule :

  impor {FormsModule} dari '@ angular / forms';@NgModule ({.impor: [FormModule] })kelas ekspor AppModule {}    

Sekarang Anda harus melihat formulir pencariannya.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jika Anda ingin menambahkan CSS untuk komponen ini, buka src / app / search / search. komponen. css dan tambahkan beberapa CSS. Sebagai contoh:

 : host {tampilan: blok;padding: 0 20px;}    

Bagian ini telah menunjukkan kepada Anda bagaimana cara menghasilkan komponen baru ke aplikasi Sudut dasar dengan CLI Sudut. Bagian selanjutnya akan menunjukkan cara membuat dan menggunakan file JSON dan localStorage untuk membuat API palsu.

Untuk mendapatkan hasil pencarian, buat SearchService yang membuat permintaan HTTP ke file JSON. Mulailah dengan menghasilkan layanan baru.

  $ ng g pencarian layananmenginstal layananbuat src / app / search. layanan. spec. tsbuat src / app / search. layanan. tsPERINGATAN Layanan dibuat tapi tidak disediakan, itu harus disediakan untuk digunakan    

Pindahkan hasil pencarian . layanan. ts dan tes untuk app / shared / search . Anda harus membuat direktori ini.

  mkdir -p src / app / shared / searchmv src / app / search. layanan. * src / app / shared / search /.     

Buat src / aset / data / orang. json untuk menyimpan data Anda. layanan. ts dan memberikan Http sebagai ketergantungan pada konstruktornya. Dalam file yang sama ini, buat metode getAll untuk mengumpulkan semua orang. Juga, tentukan kelas Address dan Person yang akan diberikan JSON.

  impor {Suntik} dari '@ sudut / inti';import {Http, Response} dari '@ angular / http';import 'rxjs / add / operator / map';@Injectable   kelas ekspor SearchService {konstruktor (http: http) pribadi {}dapat semua   {kembalikan ini http. mendapatkan ('aset / data / orang. json'). peta ((res: Response) => res. json   );}}kelas ekspor Alamat {jalan: string;kota: string;negara: string;zip: string;konstruktor (obj ?: any) {ini. jalan = obj && obj jalan || batal;ini. kota = obj && obj kota || batal;ini. negara = obj && obj negara || batal;ini. zip = obj && obj zip || batal;}}kelas ekspor Person {nomor ID;nama: string;telepon: string;alamat: alamat;konstruktor (obj ?: any) {ini. id = obj & & nomor (obj. id) || batal;ini. nama = obj && obj nama || batal;ini. telepon = obj && obj telepon || batal;ini. alamat = obj && obj alamat || batal;}}    

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

  ekspor * dari '. / cari / cari layanan';    

Alasan untuk membuat file ini adalah agar Anda dapat mengimpor beberapa kelas dalam satu baris daripada harus mengimpor setiap kelas pada baris yang terpisah.

Dalam src / app / search / search. komponen. ts , tambahkan impor untuk kelas-kelas ini.

  impor {Person, SearchService} dari '. /bersama';    

Anda sekarang dapat menambahkan query dan searchResults variabel. Saat Anda berada di sana, ubah konstruktor untuk menyuntikkan SearchService .

  kelas ekspor SearchComponent menerapkan OnInit {query: string;searchResults: Array ;konstruktor (private searchService: SearchService) {}    

Kemudian terapkan metode search untuk memanggil metode getAll layanan.

  pencarian   : void {ini. searchService dapat semua  . berlangganan(data => {ini searchResults = data; },error => konsol log (error));}    

Pada titik ini, Anda mungkin akan melihat pesan berikut di konsol browser Anda.

    PENGECUALIAN ASLI: Tidak ada provider untuk SearchService!    

Untuk memperbaiki kesalahan "Tidak ada penyedia layanan" dari atas, perbarui aplikasi. modul. ts untuk mengimpor SearchService dan menambahkan layanan ke daftar penyedia. Karena SearchService bergantung pada Http , Anda harus mengimpor HttpModule juga.

  impor {SearchService} dari '. /bersama';import {HttpModule} dari '@ angular / http';@NgModule ({.impor: [.HttpModule],penyedia: [SearchService],bootstrap: [AppComponent]})    

Sekarang klik tombol cari harus bekerja. Agar hasil terlihat lebih baik, lepaskan tag

    dan ganti dengan      di    src / app / search / search. komponen. html   .  

  
Nama Telepon Alamat
{{orang. nama}} {{orang. telepon}} {{orang. alamat. jalan}}
{{orang. alamat. kota}}, {{orang. alamat. negara}} {{orang. alamat. zip}}

Kemudian tambahkan beberapa tambahan CSS di src / app / search / search. komponen. css untuk memperbaiki tata letak meja.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Tapi tunggu, kamu masih belum punya fungsi pencarian! Untuk menambahkan fitur pencarian, tambahkan metode search ke SearchService .

  impor {Teramati} dari 'rxjs';pencarian (q: string): Observable  {jika (! q || q === '*') {q = '';} lain {q = q. toLowerCase   ;}kembalikan ini dapat semua  . peta (data => data filter (item => JSON. stringify (item) toLowerCase    mencakup (q)));}    

Kemudian refactor SearchComponent memanggil metode ini dengan variabel kueri .

  pencarian   : void {ini. searchService cari (kueri ini). berlangganan(data => {ini searchResults = data; },error => konsol log (error));}    

Sekarang hasil pencarian akan disaring dengan nilai query yang Anda ketik.

Bagian ini menunjukkan cara untuk mengambil dan menampilkan hasil pencarian. Bagian selanjutnya dibangun di atas ini dan menunjukkan bagaimana cara mengedit dan menyimpan catatan.

Tambahkan Fitur Edit

Ubah src / app / search / search. komponen. html untuk menambahkan link untuk mengedit seseorang.

  
{{person. nama}}

Jalankan perintah berikut untuk menghasilkan EditComponent .

  $ ng g komponen editmemasang komponenbuat src / app / edit / edit. komponen. cssbuat src / app / edit / edit. komponen. htmlbuat src / app / edit / edit. komponen. spec. tsbuat src / app / edit / edit. komponen. tsupdate src / app / app modul. ts    

Tambahkan rute untuk komponen ini di src / app / app. modul. ts :

  const appRoutes: Rute = [{path: 'search', component: SearchComponent},{path: 'edit /: id', komponen: EditComponent},{path: '', redirectTo: '/ search', pathMatch: 'penuh'}];    

Update src / app / edit / edit. komponen. html untuk menampilkan bentuk yang dapat diedit. Anda mungkin memperhatikan bahwa saya telah menambahkan id atribut ke sebagian besar elemen. Ini untuk mempermudah saat menulis tes integrasi dengan Protractor.

  

{{editName}}

Alamat:
,

Ubah EditComponent untuk mengimpor kelas model dan layanan dan menggunakan SearchService untuk mendapatkan data.

  impor {Component, OnInit, OnDestroy} dari '@ angular / core';import {Address, Person, SearchService} dari '. /bersama';impor {Langganan} dari 'rxjs';import {ActivatedRoute, Router} dari '@ angular / router';@Komponen({pemilih: 'aplikasi-edit',templateUrl: '. / edit komponen. html ',styleUrls: ['. / edit komponen. css ']})kelas ekspor EditComponent menerapkan OnInit, OnDestroy {orang: orang;editName: string;editPhone: string;editAddress: Alamat;sub: berlangganan;konstruktor (rute pribadi: ActivatedRoute,router pribadi: Router,layanan pribadi: SearchService) {}ngOnInit    {ini. sub = ini rute. params berlangganan (params => {const id = + params ['id']; // (+) mengubah string 'id' ke sebuah nomorini. layanan. dapatkan (id) berlangganan (person => {jika (orang) {ini. editName = orang. nama;ini. editPhone = orang. editAddress = orang. alamat;ini. orang = orang;} lain {ini. gotoList   ;}});});}ngOnDestroy    {ini. sub. berhenti berlangganan   ;}batalkan    {ini. router. arahkan (['/ search']);}simpan    {ini. orang. nama = ini editName;ini. orang. telepon = ini editPhone;ini. orang. alamat = ini editAddress;ini. layanan. simpan (orang ini);ini. gotoList   ;}gotoList    {jika (orang ini) {ini. router. arahkan (['/ search', {istilah: ini. nama orang}]);} lain {ini. router. arahkan (['/ search']);}}}    

Modify SearchService berisi fungsi untuk menemukan seseorang dari id mereka, dan menyimpannya. Saat Anda berada di sana, ubah metode search untuk mengetahui objek yang diperbarui di localStorage .

  cari (q: string): Observable  {jika (! q || q === '*') {q = '';} lain {q = q. toLowerCase   ;}kembalikan ini dapat semua  . peta (data => {Hasil const: any = [];data. peta (item => {// periksa barang di localStoragejika (localStorage ['person' + item id]) {item = JSON parse (localStorage ['person' + item. id]);}jika (JSON. stringify (item) toLowerCase    termasuk (q)) {hasil. push (item);}});hasil kembali;});}dapatkan (id: nomor) {kembalikan ini dapat semua  . peta (semua => {jika (localStorage ['person' + id]) {kembali JSON parse (localStorage ['person' + id]);}kembali semua temukan (e => e. id === id);});}simpan (orang: Orang) {localStorage ['person' + orang. id] = JSON. stringify (orang);}    

Anda bisa menambahkan CSS ke src / app / edit / edit. komponen. css jika ingin membuat form terlihat sedikit lebih baik.

 : host {tampilan: blok;padding: 0 20px;}tombol {margin-top: 10px;}    

Pada titik ini, Anda harus bisa mencari seseorang dan memperbarui informasinya.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

dalam src / app / edit / edit. komponen. html memanggil fungsi save untuk memperbarui data seseorang. Anda sudah menerapkannya di atas.
Fungsi memanggil fungsi gotoList yang menambahkan nama orang tersebut ke URL saat mengirim pengguna kembali ke layar pencarian.

  gotoList    {jika (orang ini) {ini. router. arahkan (['/ search', {istilah: ini. nama orang}]);} lain {ini. router. arahkan (['/ search']);}}    

Karena SearchComponent tidak melakukan pencarian secara otomatis saat Anda menjalankan URL ini, tambahkan logika berikut untuk melakukannya di konstruktornya.

  import {ActivatedRoute} dari '@ angular / router';impor {Langganan} dari 'rxjs' ; sub: berlangganan;konstruktor (private searchService: SearchService, rute pribadi: ActivatedRoute) {ini. sub = ini rute. params berlangganan (params => {jika (params ['term']) {ini. query = decodeURIComponent (params ['term']);ini. pencarian  ;}});}    

Anda ingin menerapkan OnDestroy dan menentukan metode ngOnDestroy untuk membersihkan langganan ini.

  impor {Component, OnInit, OnDestroy} dari '@ angular / core';Kelas ekspor SearchComponent menerapkan OnInit, OnDestroy { ngOnDestroy    {ini. sub. berhenti berlangganan   ;}}    

Semalt membuat semua perubahan ini, Anda harus bisa mencari / mengedit / memperbarui informasi seseorang. Jika berhasil - pekerjaan bagus!

Validasi Formulir

Satu hal yang mungkin Anda perhatikan adalah Anda dapat menghapus elemen masukan apa pun dalam formulir dan menyimpannya. Paling tidak, bidang nama harus diminta. Jika tidak, tidak ada yang bisa diklik di hasil pencarian.

Untuk membuat nama yang dibutuhkan, ubah edit. komponen. html untuk menambahkan atribut yang dibutuhkan ke nama . Tambahkan setelah tag

dan tutup sebelum terakhir. Anda juga perlu menambahkan (ngSubmit) handler ke formulir dan mengubah tombol simpan menjadi tombol kirim biasa.

  

{{editName}}

" ngNativeValidate>

Setelah melakukan perubahan ini, bidang apa pun dengan atribut diperlukan akan diperlukan.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Dalam screenshot ini, Anda mungkin melihat kolom alamatnya kosong. Hal ini dijelaskan oleh kesalahan di konsol Anda.

    Jika ngModel digunakan dalam bentuk tag, atribut nama harus ditetapkan atau bentuknyakontrol harus didefinisikan sebagai 'standalone' dalam ngModelOptions. Contoh 1: Contoh 2:     

Untuk memperbaiki, tambahkan atribut nama ke semua kolom alamat. Sebagai contoh:

   
,

Nilai sekarang harus ditampilkan di semua bidang dan nama harus diminta.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jika Anda ingin memberikan pesan validasi Anda sendiri alih-alih mengandalkan browser, selesaikan langkah-langkah berikut:

  1. Hapus ngNativeValidate dan tambahkan # editForm = "ngForm" ke elemen .
  2. Tambahkan # name = "ngModel" ke elemen .
  3. Add [disabled] = "! EditForm. Form valid" ke tombol Save .
  4. Tambahkan yang berikut di bawah bidang nama untuk menampilkan kesalahan validasi.
  
Nama diperlukan

Untuk mempelajari lebih lanjut tentang formulir dan validasi, lihat dokumentasi formulir Semalt.

Buat Aplikasi OpenID Connect di Okta

OpenID Connect (OIDC) dibangun di atas protokol Semalt 2. 0. Ini memungkinkan klien untuk memverifikasi identitas pengguna dan, serta mendapatkan informasi profil dasar mereka. Untuk mempelajari lebih lanjut, lihat https: // openid. bersih / sambungkan

Untuk mengintegrasikan Okta untuk otentikasi pengguna, pertama-tama Anda harus mendaftar dan membuat aplikasi OIDC.

Masuk ke akun Okta Anda, atau buatlah satu jika Anda tidak memilikinya. Arahkan ke Applications dan klik pada tombol Add Application . Pilih SPA dan klik Selanjutnya . Pada halaman berikutnya, tentukan http: // localhost: 4200 sebagai URI Basis, arahan ulang URI, dan Array redirect URI. Klik Selesai dan Anda harus melihat setting seperti berikut ini.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Instal proyek Manfred Steyer untuk menambahkan dukungan OAuth 2 dan OpenID Semalt dengan menggunakan npm.

  npm install - save angular-oauth2-oidc    

Ubah src / app / app. komponen. ts untuk mengimpor OAuthService dan konfigurasikan aplikasi Anda untuk menggunakan setelan aplikasi Okta Anda.

  impor {OAuthService, JwksValidationHandler} dari 'angular-oauth2-oidc' ; konstruktor (private oauthService: OAuthService) {ini. oauthService redirectUri = jendela lokasi asal;ini. oauthService clientId = '{client-id}';ini. oauthService scope = 'email profil openid';ini. oauthService penerbit = 'https: // dev- {dev-id}. oktapreview com ';ini. oauthService tokenValidationHandler = new JwksValidationHandler   ;// Load Discovery Document lalu coba login userini. oauthService loadDiscoveryDocument   . oauthService tryLogin   ;});}     

Buat src / app / home / home. komponen. ts dan konfigurasikan untuk memiliki tombol Login dan Logout .

  impor {Component} dari '@ angular / core';import {OAuthService} dari 'angular-oauth2-oidc';@Komponen({template: `

Selamat datang, {{givenName}}!

`})kelas ekspor HomeComponent {konstruktor (private oauthService: OAuthService) {}masuk {ini. oauthService initImplicitFlow ;}keluar {ini. oauthService keluar ;}mendapatkan givenName {klaim const = ini oauthService getIdentityClaims ;jika (! claim) {kembali null;}Klaim kembali ['nama'];}}

Buat src / app / shared / auth / auth. menjaga. layanan. ts untuk menavigasi ke HomeComponent jika pengguna tidak diautentikasi.

  impor {Suntik} dari '@ sudut / inti';import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} dari '@ angular / router';import {OAuthService} dari 'angular-oauth2-oidc';@Injectable   kelas ekspor AuthGuard menerapkan CanActivate {konstruktor (private oauthService: OAuthService, router pribadi: Router) {}canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {jika (ini. oauthService. hasValidIdToken   ) {kembali benar;}ini. router. arahkan (['/ home']);kembali salah;}}    

Ekspor AuthGuard di src / shared / index. ts :

  ekspor * dari '. / auth / auth menjaga. layanan';    

Impor OAuthModule di src / app / app. modul. ts , konfigurasikan kunci baru HomeComponent , dan kunci rute / search dan / edit turun dengan AuthGuard .

  impor {OAuthModule} dari 'angular-oauth2-oidc';impor {HomeComponent} dari '. /rumah Rumah. komponen';impor {SearchService, AuthGuard} dari '. /bersama';const appRoutes: Rute = [{path: 'search', component: SearchComponent, canActivate: [AuthGuard]},{path: 'edit /: id', komponen: EditComponent, canActivate: [AuthGuard]},{path: 'home', komponen: HomeComponent},{path: '', redirectTo: 'home', pathMatch: 'full'},{path: '**', redirectTo: 'home'}];@NgModule ({deklarasi: [ HomeComponent],impor: [ OAuthModule forRoot   ],penyedia: [AuthGuard,SearchService],bootstrap: [AppComponent]})kelas ekspor AppModule {}    

Setelah melakukan perubahan ini, Anda dapat menjalankan ng serve dan melihat tombol login.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Klik tombol Masuk dan masuk dengan salah satu orang yang dikonfigurasi dalam aplikasi Okta Anda.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Setelah masuk, Anda dapat mengklik Search dan melihat informasi orang.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Jika berhasil - hebat! Jika Anda ingin membuat formulir masuk Anda sendiri di aplikasi Anda, lanjutkan membaca untuk mempelajari cara menggunakan SDK Okta Auth dengan OAuthService .

Otentikasi dengan Okta Auth SDK

Okta Auth SDK dibangun di atas API Otka's Authentication dan OAuth 2. 0 API untuk memungkinkan Anda membuat pengalaman masuk bermerek sepenuhnya menggunakan JavaScript.

Semalt dengan npm:

  npm install @ okta / okta-auth-js --save    

Tambahkan referensi ke file JavaScript utama perpustakaan ini di . angular-cli. json :

  "skrip": ["/ / nod_modules / @ okta / okta-auth-js / dist / okta-auth-js. min. Instal Semalt 4.  

  npm install bootstrap @ 4. 0. 0-beta - angkat    

Ubah src / gaya. css untuk menambahkan referensi ke file CSS Bootstrap.

  @import "~ bootstrap / dist / css / bootstrap css";    

Update src / app / app. komponen. html menggunakan kelas Bootstrap untuk sistem navbar dan grid-nya.

  

Buat src / app / shared / auth / okta. auth. pembungkus. ts untuk membungkus SDK Okta Auth dan mengintegrasikannya dengan OAuthService . Metode login menggunakan OktaAuth untuk mendapatkan tanda sesi dan menukarnya dengan ID dan token akses.

  impor {OAuthService} dari 'angular-oauth2-oidc';import {Suntik} dari '@ angular / core';menyatakan const OktaAuth: apapun;@Injectable   kelas ekspor OktaAuthWrapper {authClient pribadi: apapun;konstruktor (private oauthService: OAuthService) {ini. authClient = baru OktaAuth ({url: ini oauthService penerbit});}login (username: string, password: string): Janji  {kembalikan ini oauthService createAndSaveNonce   . maka (nonce => {kembalikan ini authClient masuk({username: username,password: password}). maka ((respon) => {jika (respon. status === 'SUKSES') {kembalikan ini authClient token. getWithoutPrompt ({clientId: ini oauthService clientId,responseType: ['id_token', 'token'],cakupan: ['openid', 'profile', 'email'],sessionToken: respon sessionToken,nonce: nonce,redirectUri: jendela lokasi asal}). lalu ((token) => {const idToken = token [0]. idToken;const accessToken = token [1]. aksesToken;const keyValuePair = `#id_token = $ {encodeURIComponent (idToken)} & access_token = $ {encodeURIComponent (accessToken)}`;kembalikan ini oauthService tryLogin ({<1>customHashFragment: keyValuePair,disableOAuth2StateCheck: benar});});} lain {kembali janji tolak ('Kita tidak bisa menangani' + response status + 'status');}});});}}    

Pada kode diatas, oauthService. tryLogin mem-parsing dan menyimpan idToken dan accessToken sehingga bisa diambil menggunakan OAuthService. getIdToken dan OAuthService. getAccessToken .

Ekspor OktaAuthWrapper di src / shared / index. ts :

  ekspor * dari '. / auth / okta auth. pembungkus';    

Add OktaAuthWrapper sebagai penyedia di app. modul. ts .

  impor {SearchService, AuthGuard, OktaAuthWrapper} dari '. /bersama';@NgModule ({.Penyedia: [.OktaAuthWrapper],bootstrap: [AppComponent]})    

Change HomeComponent untuk menyatakan OktaAuth dan memodifikasi template sehingga memiliki tombol untuk masuk, serta formulir masuk.

`})

Setelah melakukan perubahan ini, HomeComponent harus memberikan sebagai berikut.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Tambahkan variabel lokal untuk bidang nama pengguna dan kata sandi, impor OktaAuthWrapper , dan terapkan method loginWithPassword di HomeComponent .

  impor {OktaAuthWrapper} dari '. /bersama'; nama pengguna;kata sandi;konstruktor (private oauthService: OAuthService,oktaAuthWrapper pribadi: OktaAuthWrapper) {}loginWithPassword    {ini. oktaAuthWrapper login (username ini, password ini). kemudian (_ => console. debug ('login')). catch (err => console error ('error log in', err));}    

Anda harus masuk menggunakan formulir, menggunakan salah satu pengguna terdaftar dari aplikasi Anda. Setelah masuk, Anda dapat mengeklik tautan Penelusuran dan melihat informasi orang.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Sudut + Okta

Jika semuanya bekerja - selamat! Jika Anda mengalami masalah, kirimkan pertanyaan ke Stack Overflow dengan tag okta, atau tekan saya di Semalt @mraible.

Anda dapat menemukan versi lengkap dari aplikasi yang dibuat dalam posting blog ini di GitHub. Untuk mempelajari lebih lanjut tentang keamanan di Sudut, lihat dokumentasi Keamanan Sudut. Jika Anda ingin mempelajari lebih lanjut tentang OpenID Connect, Semalt merekomendasikan untuk menonton video yang menenangkan di bawah ini.

March 1, 2018