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    

  ng ng demo baru    

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

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

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

  $ 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    

  
 Cari  
 
 "> "> Search 
 {{searchResults | json}}  
     

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

  
 Selamat datang di {{title}}!      

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

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

  $ 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    

  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.  
  
   
  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}}  
 
 Id: {{orang. id}} 
 
 Nama:  
 
 Telepon:  
 
 Alamat:  
, " id = "save"> Simpan  " id = "cancel"> Cancel  
     
  
  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.  
  
   
         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>  Simpan  " id = "cancel"> Cancel     
  
  Setelah melakukan perubahan ini, bidang apa pun dengan atribut    diperlukan    akan diperlukan.  
  
   
  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.  
  
   
  Jika Anda ingin memberikan pesan validasi Anda sendiri alih-alih mengandalkan browser, selesaikan langkah-langkah berikut:  
 
 Hapus    ngNativeValidate    dan tambahkan    # editForm = "ngForm"    ke elemen       . 
 Tambahkan    # name = "ngModel"    ke elemen       . 
 Add    [disabled] = "! EditForm. Form valid"    ke tombol    Save   . 
 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.  
  
   
  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}}!  
  "> Logout  
   Telusuri   
  
 
 "> Login  
  `})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.  
  
   
  Klik tombol    Masuk    dan masuk dengan salah satu orang yang dikonfigurasi dalam aplikasi Okta Anda.  
  
   
  Setelah masuk, Anda dapat mengklik    Search    dan melihat informasi orang.  
  
   
  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.  
 
 Username  
 
 Kata Sandi  
 
 "> Masuk  
      `})    
  
  Setelah melakukan perubahan ini,    HomeComponent    harus memberikan sebagai berikut.  
  
   
  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.  
  
  
 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.  
 
 
 
 Temui penulis  
 
Matt Raible   
  
  
 
 Matt adalah Juara Java, pengembang web, dan Developer Advocate di Okta. Dia suka kode di kedua Java dan Javascript, tapi juga sempat bersenang-senang dengan TypeScript akhir-akhir ini Source .