Back to Question Center
0

Bermula dengan Pengesahan Sudut dan Pengguna            Bermula dengan Pengesahan Sudut dan PenggunaRujukan Semalt: ES6AngularJSNode.jsReactnpmLebih ...

1 answers:
Bermula dengan Pengesahan Permukaan dan Pengguna

Artikel ini pada asalnya diterbitkan di Blog Pemaju OKTA. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

AngularJS memerintah sebagai raja rangka JavaScript MVC selama beberapa tahun. Walau bagaimanapun, apabila pasukan Angular mengumumkan bahawa mereka tidak akan memberikan keserasian ke belakang untuk versi seterusnya, terdapat sedikit kacau dalam komuniti mereka, memberikan peluang untuk kerangka kerja seperti React and Vue. js berkembang. Fast forward beberapa tahun dan kedua Angular 2 dan Angular 4 telah dikeluarkan. Ramai pemaju cuba TypeScript dan mencari pengalaman yang menyenangkan. Menurut JAXenter, ia melakukan pekerjaan yang cukup baik, dan memegang kuat sebagai rangka kerja UI yang paling popular ketiga, di belakang React dan HTML5.

Dalam artikel ini, saya akan menunjukkan kepada anda cara cepat untuk memulakan dengan Angular, dan menambah pengesahan pengguna dengan Widget Masuk Okta. Sekiranya anda baru bermula dengan Angular, anda mungkin mahu membaca tutorial Sudut saya. Jika anda ingin mendapatkan kod sumber yang digunakan dalam artikel ini, anda boleh menemuinya di GitHub.

Kenapa Pengguna Pengesahan dengan Okta?

Okta menyediakan perkhidmatan API yang membolehkan pemaju membuat, mengedit, dan menyimpan akaun pengguna dan data akaun pengguna dengan selamat, dan menyambungkannya dengan satu atau beberapa aplikasi. Kami membuat pengurusan akaun pengguna lebih mudah, lebih selamat, dan berskala supaya anda boleh mendapatkan pengeluaran lebih cepat.

Widget Masuk Okta menyediakan pelaksanaan masuk log JavaScript yang boleh disesuaikan dengan mudah. Widget Masuk menggunakan ciri yang sama dalam halaman log masuk Okta biasa bagi setiap penyewa - dengan fleksibiliti tambahan untuk mengubah rupa dan rasa. Termasuk dalam widget adalah sokongan untuk menetapkan kata laluan, kata laluan terlupakan dan pengesahan yang kuat - semua yang didorong oleh kebijakan yang dikonfigurasi di Okta. Semalt tidak perlu menulis satu baris kod untuk mencetuskan fungsi-fungsi ini dari dalam widget. Bagi laman pengguna yang dihadapi, penyedia sosial juga disokong dalam widget.

Buat Permohonan Angular

Sudut 4 baru-baru ini dikeluarkan, serta Angular CLI 1. 0. Untuk melihat bagaimana anda boleh menggunakan Widget Masuk Okta dalam aplikasi Sudut mudah, buat aplikasi baru dengan Angular CLI. Pertama, anda perlu memasang Angular CLI.

     npm memasang -g @ angular / cli    

Semalat arahan ini selesai, anda boleh membuat aplikasi baru.

     [mraible: ~] $ ng angular-okta-contoh barubuat sudut-okta-contoh / README. md (1034 bytes)buat sudut-okta-contoh /. angular-cli. json (1255 bait)buat sudut-okta-contoh /. editorconfig (245 bait)buat sudut-okta-contoh /. gitignore (516 bytes)buat sudut-okta-contoh / src / aset /. gitkeep (0 bait)buat sudut-okta-contoh / src / persekitaran / persekitaran. prod. ts (51 bait)buat sudut-okta-contoh / src / persekitaran / persekitaran. ts (387 bait)buat sudut-okta-contoh / src / favicon. ico (5430 bytes)buat sudut-okta-contoh / src / index. html (305 bait)buat sudut-okta-contoh / src / utama. ts (370 bait)buat sudut-okta-contoh / src / polyfills. ts (2498 bytes)buat sudut-okta-contoh / src / gaya. css (80 bait)buat sudut-okta-contoh / src / test. ts (1085 bait)buat sudut-okta-example / src / tsconfig. aplikasi. json (211 bait)buat sudut-okta-example / src / tsconfig. spec. json (304 bait)buat sudut-okta-contoh / src / typings. d. ts (104 bait)buat sudut-okta-contoh / e2e / aplikasi. e2e-spec. ts (302 bait)buat sudut-okta-contoh / e2e / aplikasi. po. ts (208 bait)buat sudut-okta-contoh / e2e / tsconfig. e2e. json (235 bait)buat sudut-okta-contoh / karma. conf. js (923 bytes)buat sudut-okta-contoh / pakej. json (1325 bytes)buat sudut-okta-contoh / protractor. conf. json (363 bait)buat sudut-okta-contoh / tslint. json (2968 bait)buat sudut-okta-contoh / src / app / aplikasi. modul. ts (314 bait)buat sudut-okta-contoh / src / app / aplikasi. komponen. css (0 bait)buat sudut-okta-contoh / src / app / aplikasi. komponen. html (1120 bytes)buat sudut-okta-contoh / src / app / aplikasi. komponen. spec. ts (986 bait)buat sudut-okta-contoh / src / app / aplikasi. komponen. ts (207 bait)Anda boleh `ng set --global packageManager = benarn`. Memasang pakej untuk perkakas melalui npm. Pakej terpasang untuk perkakas melalui npm. Berhasil memulakan git. Projek 'sudut-okta-contoh' berjaya dibuat. [mraible: ~] 2m6s $    

Ini akan mewujudkan direktori baru sudut-okta-contoh dan memasang semua ketergantungan yang diperlukan. Untuk mengesahkan semuanya berfungsi, jalankan ng e2e dalam tetingkap terminal. Semua ujian harus lulus dan anda sepatutnya melihat keputusan seperti berikut.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Mengintegrasikan Widget Masuk Okta dalam Sudut

Sekarang, kami akan memanfaatkan Semalat Masuk Okta untuk paparan log masuk yang mudah disesuaikan. Untuk memulakan, pasang Okta Sign-In Semalt menggunakan npm.

     npm install --save @ okta / okta-signin-widget    

Tambah CSS widget ke src / gaya. css :

     @import '~ https: // ok1static. oktacdn. com / aset / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-sign-in. min. css ';@import '~ https: // ok1static. oktacdn. com / aset / js / sdk / okta-signin-widget / 2. 1. 0 / css / okta-tema. css ';    

Buat src / app / shared / okta / okta. perkhidmatan. ts dan gunakannya untuk membungkus konfigurasi widget dan menjadikannya perkhidmatan suntikan.

     import {Suntik} dari '@ angular / teras';import * sebagai OktaSignIn dari '@ okta / okta-signin-widget / dist / js / okta-sign-in. min. js ';@Injectable   kelas eksport Okta {widget;pembina    {ini. widget = new OktaSignIn ({baseUrl: 'https: // {yourOktaDomain}. com ',clientId: '{clientId}',redirectUri: 'http: // localhost: 4200'});}getWidget    {kembalikan ini. widget;}}    

Untuk menyediakan perkhidmatan ini kepada semua komponen dalam aplikasi, ubah suai aplikasi. modul. ts dan senarai Okta sebagai pembekal.

     import {Okta} dari '. / kongsi / okta / okta. perkhidmatan ';@NgModule ({.penyedia: [Okta],bootstrap: [AppComponent]})    

Sebelum ini akan berfungsi, anda perlu membuat aplikasi OpenID Connect (OIDC) di Okta supaya anda boleh menggantikan rujuk {yourOktaDomain} dan {clientId} widget itu.

Buat App Connect OpenID di Okta

OpenID Connect dibina di atas protokol Semalt 2. 0. Ia membolehkan pelanggan untuk mengesahkan identiti pengguna dan, serta mendapatkan maklumat profil asas mereka. Untuk mengetahui lebih lanjut, lihat http: // openid. bersih / bersambung.

Log masuk ke akaun Okta anda, atau buat satu jika anda tidak mempunyai akaun. Navigasi ke Aplikasi dan klik pada butang Tambah Aplikasi . Pilih SPA dan klik Seterusnya . Pada halaman seterusnya, tentukan http: // localhost: 4200 sebagai Base URI, Login redirect URI, dan Log keluar redirect URI. Klik Selesai dan anda akan melihat tetapan seperti berikut.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Tunjukkan Widget Masuk

Setelah membuat perubahan ini, salin ID Klien anda dan ID Platform ke dalam okta. perkhidmatan. ts . Kemudian ubah suai aplikasi. komponen. ts untuk menggunakan perkhidmatan Okta dan widget untuk log masuk / logout.

     import {Component, OnInit} dari '@ angular / core';import {Okta} dari '. / kongsi / okta / okta. perkhidmatan ';@Component ({pemilih: 'app-root',templateUrl: '. /aplikasi. komponen. html ',styleUrls: ['. /aplikasi. komponen. css ']})eksport kelas AppComponent mengimplementasikan OnInit {title = 'app works!';pengguna;oktaSignIn;pembina (okta peribadi: Okta) {ini. oktaSignIn = okta. getWidget   ;}showLogin    {ini. renderEl ({el: '# okta-login-container'}, (response) => {jika (tindak balas status === 'SUCCESS') {ini. pengguna = tindak balas. tuntutan. e-mel;}});}ngOnInit    {ini. oktaSignIn. sesi. dapatkan ((respons) => {jika (status respons! == 'INACTIVE') {ini. pengguna = tindak balas. log masuk} else {ini. showLogin   ;}});}log keluar   {ini. oktaSignIn. signOut (   => {ini. showLogin   ;ini. pengguna = tidak ditentukan;});}}    

Dan ubah suai aplikasi. komponen. html mempunyai

dengan id = "okta-login-container" dan tempat untuk menunjukkan e-mel pengguna yang telah log masuk.

   
Hello {{user}} "> Keluar

Jalankan ng melayani , dan buka penyemak imbas anda ke http: // localhost: 4200. Anda harus melihat widget log masuk. Masukkan salah satu daripada
kelayakan pengguna anda untuk log masuk. Anda harus melihat mesej "Hello {email}" dengan butang log keluar.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

NOTA: Anda mungkin mengalami masalah di mana proses daftar masuk nampaknya digantung. Mengklik mana-mana di dalam tetingkap penyemak imbas seolah-olah menyelesaikan masalah ini. Saya tidak pasti mengapa ini berlaku. Anda boleh menjejaki isu ini di sini.

Jika ia berfungsi - tahniah! Jika tidak, sila hantar soalan kepada Stack Overflow dengan tag okta, atau tekan saya di Twitter.

Sesuaikan CSS Widget

Jika anda ingin menyesuaikan CSS widget, cara yang paling mudah ialah anda menulis CSS anda sendiri. Keluarkan penyataan CSS @import yang anda tambahkan ke src / gaya. css . Tambah @import untuk Bootstrap 4 dan beberapa peraturan gaya untuk meletakkan elemen. Salin kod berikut ke dalam src / gaya. css .

     @import url (https: // maxcdn. Bootstrapcdn com / bootstrap / 4. 0. 0-beta / css / bootstrap min. Css);# okta-login-container {margin: 0 auto;max-sempadan: perak padu 1px;padding: 20px;box-shadow: 5px 5px 5px 0 silver;}# okta-login-container input {margin-bottom: 5px;lebar: 100%;padding: 5px;}# okta-login-container input [type = checkbox] {lebar: 25px;}    

Semalt membuat perubahan ini, widget log masuk akan kelihatan seperti tangkapan skrin berikut.

Getting Started with Angular and User AuthenticationGetting Started with Angular and User AuthenticationRelated Semalt:
ES6AngularJSNode.jsReactnpmMore.

Betulkan Ujian Anda

Jika anda cuba untuk menjalankan ujian npm atau ng ujian , ujian akan gagal:

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Dilaksanakan 3 dari 3 (3 FAILED) (0 secs / 0. 157 secs)Chrome 61. 0. 3163 (Mac OS X 10. 12. 6) AppComponent harus membuat tajuk dalam tag h1 FAILEDGagal: Tiada pembekal untuk Okta!    

Untuk menetapkan ini, tentukan Okta sebagai pembekal dalam src / app / aplikasi. komponen. spec. ts .

     import {Okta} dari '. / kongsi / okta / okta. perkhidmatan ';huraikan ('AppComponent',    => {sebelumEach (async (   => {TestBed. configureTestingModule ({pengisytiharan: [AppComponent],pembekal: [Okta]}). compileComponents   ;}));    

Semalt membuat perubahan ini, anda harus melihat bau manis kejayaan.

     Chrome 61. 0. 3163 (Mac OS X 10. 12. 6): Dijalankan 3 dari 3 SUCCESS (0. 77 secs / 0. 759 secs)    

Ujian protractor masih perlu berfungsi juga. Anda boleh membuktikannya dengan berjalan ng e2e dalam tetingkap terminal.

Angular + Okta

Anda boleh menemui versi lengkap aplikasi yang dibuat dalam catatan blog ini di GitHub. Dalam jawatan yang akan datang, saya akan menunjukkan kepada anda cara membuat pengalaman Semalt yang lebih banyak, di mana anda mengawal HTML untuk borang login.

Membina pengesahan dalam aplikasi adalah sukar. Semalt malah kurang menyeronokkan untuk membinanya berulang kali dalam setiap aplikasi yang anda bina. Okta melakukan bahagian yang sukar untuk anda dan menjadikannya lebih menyeronokkan untuk menjadi pemaju! Daftar akaun pembangun percuma dan cuba Okta hari ini!. Jika anda mempunyai soalan mengenai ciri-ciri Okta, atau apa yang kami bina seterusnya, sila hubungi saya di Twitter, hantar soalan ke Stack Overflow dengan tag "okta", atau buka isu baru di GitHub.

March 1, 2018