Cara menambah pengesahan ke aplikasi Vue anda menggunakan okta

Tutorial ini membimbing anda melalui membina aplikasi Vue.js yang dijamin oleh API OpenID Connect (OIDC) Okta, termasuk operasi CRUD melalui API REST Backend. Kami akan menggunakan Vue.js dengan Vue-CLI, Vue-Router, dan Okta Vue SDK, bersama dengan Node.js, Express, Okta JWT Verifier, Sequelize, dan Epilogue pada backend.

• VUE.JS Projek Perancah dengan Templat PWA Vue-CLI.
• okta vue sdk untuk pengurusan aliran pengesahan dan perlindungan laluan.
• Backend REST API Server (Node, Express, Sequelize) untuk Operasi CRUD.
• navigasi dinamik berdasarkan status pengesahan.
• Ujian komprehensif terhadap pengesahan dan fungsi CRUD.

vue.js adalah rangka kerja JavaScript yang mesra pengguna dan kuat untuk membina aplikasi web berprestasi tinggi.

Tutorial ini mencipta spa frontend (laman utama, login/logout, pengurus jawatan) dan pelayan API Backend REST (Express, Sequelize, Epilogue). OIDC Okta mengendalikan pengesahan melalui Okta Vue SDK. Pelayan menggunakan pengesahan berasaskan JWT, yang disahkan oleh middleware Verifier JWT Okta. Titik akhir yang terdedah (,

, GET /posts, GET /posts/:id) semuanya memerlukan token akses yang sah. POST /posts PUT /posts/:id DELETE /posts/:id Menyediakan aplikasi Vue.js anda:

Gunakan untuk perancah projek:

vue-cli Ini mewujudkan PWA dengan ciri -ciri seperti pengubahsuaian panas dan ujian unit. Mengaksesnya di

npm install -g vue-cli
vue init pwa my-vue-app
cd ./my-vue-app
npm install
npm run dev

http://localhost:8080 Memasang bootstrap:

Meningkatkan UI dengan bootstrap-vue:

Ubah suai

npm i --save bootstrap-vue bootstrap

./src/main.js integrasi pengesahan Okta:

Buat aplikasi OIDC dalam akaun pemaju Okta anda.

Pasang okta vue sdk:
Konfigurasikan penghala (
2. ) dengan plugin Okta npm i --save @okta/okta-vue, menggantikan ruang letak dengan domain Okta dan ID pelanggan anda. Melaksanakan
untuk perlindungan laluan.
3. ./src/router/index.js Auth authRedirectGuard Menyesuaikan susun atur aplikasi:

Ubah suai untuk menunjukkan "log masuk" atau "logout" secara dinamik berdasarkan status pengesahan pengguna menggunakan . Melaksanakan kaedah log masuk dan logout menggunakan objek

./src/App.vue v-if Mewujudkan pelayan API REST Backend: $auth

1. Pasang kebergantungan: npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios
2. Buat ./src/server.js. Fail ini menetapkan Express, Sequelize (menggunakan SQLite untuk kesederhanaan), Epilog untuk Generasi Endpoint REST, dan Okta JWT Verifier Middleware untuk Pengesahan.

melengkapkan komponen Pengurus Posts:

Buat ./src/api.js untuk interaksi API berpusat. Pengendalian pembantu ini menambah token akses kepada permintaan API. Kemudian, Lengkapkan ./src/components/PostsManager.vue untuk melaksanakan operasi CRUD menggunakan fungsi penolong api.

Menguji permohonan:

Jalankan pelayan (node ./src/server) dan frontend (npm run dev). Pengesahan ujian dan fungsi CRUD.

Sumber lebih lanjut:

• vue.js
• [blog pemaju Okta] (URL post blog asal - ganti dengan URL sebenar jika tersedia)
• repositori github

(bahagian Soalan Lazim dikeluarkan kerana ia adalah pengulangan maklumat yang sudah diliputi dalam tutorial.)

Atas ialah kandungan terperinci Cara menambah pengesahan ke aplikasi Vue anda menggunakan okta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!