So fügen Sie Ihrer VUE -App mit Okta Authentifizierung hinzu

Dieses Tutorial führt Sie durch den Bau einer Vue.js -Anwendung, die durch OpenID Connect (OIDC) -Plan (OpenID Connect) (OIDC), einschließlich CRUD Operations über eine Backend -REST -API, gesichert ist. Wir werden Vue.js mit Vue-Cli, Vue-Router und dem Okta Vue SDK zusammen mit Node.js, Express, Okta Jwt Verifier, Folge und Epilog auf dem Backend verwenden.

Schlüsselmerkmale:

• sichere Authentifizierung mit OIDC -API von Okta.
• vue.js Projektgerüst mit der PWA-Vorlage von Vue-Cli.
• okta vue sdk für die authentifizierungsflussmanagement und streckenschutz.
• Backend REST API -Server (Knoten, Express, Folge) für CRUD -Operationen.
• dynamische Navigation basierend auf dem Authentifizierungsstatus.
• umfassende Testen der Authentifizierung und CRUD -Funktionalität.

über Vue.js:

vue.js ist ein benutzerfreundliches und leistungsstarkes JavaScript-Framework, das ideal zum Aufbau leistungsstarker Webanwendungen ist.

Dieses Tutorial erstellt ein Frontend -Spa (Homepage, Anmeldung/Abmelde, Post -Manager) und einen Backend -REST -API -Server (Express, Sequelize, Epilog). OIDCs OIDC von Okta übernimmt die Authentifizierung über das Okta Vue SDK. Der Server verwendet die JWT-basierte Authentifizierung, die von JWT Verifier Middleware von Okta validiert wird. Exponierte Endpunkte (GET /posts, GET /posts/:id, POST /posts, PUT /posts/:id, DELETE /posts/:id) benötigen alle ein gültiges Zugriffs -Token.

Einrichten Ihrer vue.js App:

Verwenden Sie vue-cli, um das Projekt zu senken:

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

Dies schafft eine PWA mit Funktionen wie heißem Nachladen und Unit -Tests. Greifen Sie unter http://localhost:8080.

stationrop installieren:

Verbessern Sie die Benutzeroberfläche mit Bootstrap-View:

npm i --save bootstrap-vue bootstrap

modifizieren ./src/main.js

1. Installieren Sie das Okta Vue SDK:
2. npm i --save @okta/okta-vue Konfigurieren Sie den Router (
) durch das
3. -Plugin von Okta und ersetzen Sie die Platzhalter durch Ihre Okta -Domain- und Client -ID. Implementieren Sie ./src/router/index.js für Routenschutz. Auth authRedirectGuard

Ändern Sie

. Implementieren Sie Anmelde- und Abmeldemethoden mit dem von der Okta Vue SDK bereitgestellten ./src/App.vue -Objekt v-if $auth

Erstellen des Backend REST -API -Servers:

1. Abhängigkeiten installieren: npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios
2. erstellen ./src/server.js. Diese Datei legt Express, Folge (unter Verwendung von SQLite für die Einfachheit), Epilog für die Erzeugung von REST -Endpunkten und Okta JWT Verifier Middleware für die Authentifizierung ein.

Abschluss der Post -Manager -Komponente:

für eine zentralisierte API -Interaktion erstellen ./src/api.js. Dieser Helfer behandelt das Hinzufügen des Zugangsstokens zu API -Anfragen. Vervollständigen Sie dann ./src/components/PostsManager.vue, um CRUD -Operationen mithilfe der api -Helferfunktionen zu implementieren.

Testen Sie die Anwendung:

Führen Sie den Server (node ./src/server) und den Frontend (npm run dev) aus. Testauthentifizierung und CRUD -Funktionalität.

Weitere Ressourcen:

• vue.js
• [OKTA Developer Blog] (Original -Blog -Post -URL - Ersetzen Sie, falls verfügbar)
• Github Repository

(FAQS -Abschnitt entfernt, da es sich um eine Wiederholung von Informationen handelt, die bereits im Tutorial behandelt werden.)

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihrer VUE -App mit Okta Authentifizierung hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!