Comment ajouter l'authentification à votre application Vue à l'aide d'Okta

Ce tutoriel vous guide dans la construction d'une application Vue.js sécurisée par l'API OpenID Connect (OIDC) d'Okta, y compris les opérations CRUD via une API REST Backend. Nous utiliserons Vue.js avec Vue-Cli, Vue-Router et le SDK OKTA VUE, avec Node.js, Express, Okta JWT Verifier, séquence et épilogue sur le backend.

Caractéristiques de clé:

• Authentification sécurisée à l'aide de l'API OIDC d'Okta.
• Vue.js Project Scafolding avec le modèle PWA de Vue-Cli.
• Okta vue SDK pour la gestion des flux d'authentification et la protection des itinéraires.
• Backend REST API Server (Node, Express, séquelle) pour les opérations CRUD.
• Navigation dynamique basée sur l'état d'authentification.
• Test complet de l'authentification et de la fonctionnalité CRUD.

À propos de Vue.js:

vue.js est un cadre JavaScript convivial et puissant idéal pour créer des applications Web haute performance.

Ce didacticiel crée un spa frontal (page d'accueil, connexion / déconnexion, gestionnaire de poteaux) et un serveur API REST Backend (express, séquelle, épilogue). L'OIDC d'Okta gère l'authentification via le SDK Okta Vue. Le serveur utilise une authentification basée sur JWT, validée par le middleware JWT Verifier d'Okta. Les points de terminaison exposés (GET /posts, GET /posts/:id, POST /posts, PUT /posts/:id, DELETE /posts/:id) nécessitent tous un jeton d'accès valide.

Configuration de votre application Vue.js:

Utiliser vue-cli pour échafauner le projet:

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

Cela crée un PWA avec des fonctionnalités telles que le rechargement chaud et les tests unitaires. Accédez-y à http://localhost:8080.

Installation de bootstrap:

Améliorez l'interface utilisateur avec Bootstrap-Vue:

npm i --save bootstrap-vue bootstrap

Modifier ./src/main.js pour inclure Bootstrap-Vue et son CSS.

Intégration d'authentification OKTA:

1. Créez une application OIDC dans votre compte Okta Developer.
2. Installez le SDK OKTA VUE: npm i --save @okta/okta-vue
3. Configurez le routeur (./src/router/index.js) avec le plugin d'Okta Auth, en remplaçant les espaces réservés par votre domaine OKTA et votre ID client. Implémenter authRedirectGuard pour la protection des itinéraires.

Personnalisation de la disposition de l'application:

Modifier ./src/App.vue pour afficher dynamiquement "connexion" ou "déconnexion" en fonction de l'état d'authentification de l'utilisateur à l'aide de v-if. Implémentez les méthodes de connexion et de déconnexion à l'aide de l'objet $auth fourni par le sdk okta vue.

Création du serveur API REST Backend:

1. Installez les dépendances: npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios
2. Créer ./src/server.js. Ce fichier configure Express, séquestre (en utilisant SQLite pour la simplicité), Epilogue pour la génération de points de terminaison de repos et le middleware d'Okta JWT Verifier pour l'authentification.

Compléter le composant de gestionnaire de poteaux:

Créer ./src/api.js pour l'interaction API centralisée. Cet assistant gère l'ajout de jeton d'accès aux demandes d'API. Ensuite, complétez ./src/components/PostsManager.vue pour implémenter les opérations CRUD en utilisant les fonctions d'assistance api.

Test de l'application:

Exécutez le serveur (node ./src/server) et le frontend (npm run dev). Testez l'authentification et la fonctionnalité CRUD.

Ressources supplémentaires:

• vue.js
• [Okta Developer Blog] (URL de l'article de blog original - Remplacez par URL réelle si disponible)
• Référentiel GitHub

(Section FAQS supprimée car il s'agit d'une répétition d'informations déjà couvertes dans le tutoriel.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!