Pengesahan dengan sudut dan auth0

Tutorial ini menunjukkan membina aplikasi sudut ("tawaran harian") yang menampilkan tawaran awam dan swasta, dengan tawaran swasta hanya dapat diakses oleh pengguna yang disahkan melalui pengesahan berasaskan token dengan Auth0. CLI sudut menyelaraskan pembangunan, menguruskan penghalaan, penjanaan komponen, dan membina. Modul HTTPClient memudahkan interaksi API untuk mendapatkan semula data. Pelayan Node.js mudah menyajikan data tawaran, dengan laluan yang dilindungi oleh middleware mengesahkan JWTS dalam tajuk kebenaran. Butir-butir tutorial Integrasi Auth0, termasuk mendapatkan titik akhir API, pengendalian pengesahan sisi klien, dan menguruskan keadaan pengesahan pengguna dalam aplikasi sudut.

Penambahbaikan utama ke atas AngularJS:

Angular melangkaui AngularJS 1.x, berkembang dari rangka kerja ke platform yang komprehensif untuk pembangunan aplikasi moden. Kemajuan utama termasuk rendering sisi pelayan dan integrasi rasmi reka bentuk bahan.

Gambaran Keseluruhan Permohonan Tawaran Harian:

aplikasi "tawaran harian" mempamerkan tawaran awam dan swasta. Tawaran peribadi adalah eksklusif untuk pengguna berdaftar.

persediaan back-end (node.js):

pelayan node.js asas berfungsi sebagai sumber data. Pada mulanya, laluan perjanjian awam dan swasta boleh diakses secara umum. Struktur data perjanjian adalah seperti berikut:

{
  id: 1234,
  name: 'Product Name',
  description: 'Product Description',
  originalPrice: 19.99,
  salePrice: 9.99
}

Persediaan Front-end (Angular):

CLI sudut (

) mewujudkan struktur aplikasi. Perintah seterusnya menjana komponen (), perkhidmatan (), dan kelas untuk objek Deal. Modul

ditambah kepada ng new ng2auth --routing --skip-tests untuk permintaan HTTP. Bootstrap CSS dimasukkan untuk gaya. ng g c ... ng g s deal HttpClient komponen akar (): app.module.ts

komponen akar menguruskan penghalaan dan memaparkan bar navigasi. app.component.ts routing (

):

Laluan ditakrifkan untuk tawaran awam, tawaran swasta, dan panggilan balik Auth0. app-routing.module.ts Jenis Deal (

):

Kelas mentakrifkan struktur objek perjanjian untuk keselamatan jenis dan mengekalkan kod yang lebih baik. deal.ts

komponen tawaran awam dan swasta:

Deal

komponen ini mengambil dan memaparkan tawaran dari titik akhir API masing -masing. Pengendalian ralat dan pemberitahuan pembelian dilaksanakan.

Perkhidmatan Deal (

):

Perkhidmatan ini mengendalikan permintaan HTTP untuk mengambil tawaran awam dan swasta dari pelayan Node.js. deal.service.ts Menambah Pengesahan Auth0:

Auth0 disepadukan untuk pengesahan pengguna. API dicipta di papan pemuka Auth0, dan pelayan dijamin menggunakan middleware JWT. Aplikasi sudut menggunakan Auth0 SDK (npm install auth0-js --save). Pembolehubah persekitaran dalam environment.ts Simpan butiran konfigurasi AUTH0.

Perkhidmatan Pengesahan (auth.service.ts):

Perkhidmatan ini mengendalikan log masuk pengguna, logout, pengurusan token, dan pengambilan profil pengguna.

Pengawal laluan (auth.guard.ts):

AuthGuard melindungi laluan tawaran peribadi, mengalihkan pengguna yang tidak disahkan ke halaman log masuk.

komponen panggil balik (callback.component.ts):

Komponen ini mengendalikan panggilan balik Auth0, memproses tindak balas pengesahan dan menetapkan sesi pengguna.

Perkhidmatan Deal Dikemaskini:

kaedah getPrivateDeals() sekarang termasuk tajuk kebenaran dengan token akses.

Menguji permohonan:

Selepas menubuhkan konfigurasi AUTH0, aplikasi boleh diuji. Pembalakan dalam pengalihan ke halaman log masuk auth0, dan selepas pengesahan yang berjaya, tawaran peribadi menjadi boleh diakses.

Kesimpulan:

Tutorial komprehensif ini menyediakan asas yang mantap untuk membina aplikasi sudut yang selamat dan disahkan menggunakan Auth0. Penggunaan amalan terbaik, termasuk pengawal laluan dan pengendalian token yang betul, memastikan pengalaman yang selamat dan mesra pengguna. Seksyen Soalan Lazim menangani soalan umum mengenai log masuk sosial, pengendalian ralat, dan ciri -ciri Auth0 lanjutan.

Atas ialah kandungan terperinci Pengesahan dengan sudut dan auth0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!