Как добавить аутентификацию в ваше приложение Vue с помощью Okta

 const express = require('express') const cors = require('cors') const bodyParser = require('body-parser') const Sequelize = require('sequelize') const epilogue = require('epilogue') const OktaJwtVerifier = require('@okta/jwt-verifier') const oktaJwtVerifier = new OktaJwtVerifier({ clientId: '{yourClientId}', issuer: 'https://{yourOktaDomain}.com/oauth2/default' }) let app = express() app.use(cors()) app.use(bodyParser.json()) // verify JWT token middleware app.use((req, res, next) => { // require every request to have an authorization header if (!req.headers.authorization) { return next(new Error('Authorization header is required')) } let parts = req.headers.authorization.trim().split(' ') let accessToken = parts.pop() oktaJwtVerifier.verifyAccessToken(accessToken) .then(jwt => { req.user = { uid: jwt.claims.uid, email: jwt.claims.sub } next() }) .catch(next) // jwt did not verify! }) // For ease of this tutorial, we are going to use SQLite to limit dependencies let database = new Sequelize({ dialect: 'sqlite', storage: './test.sqlite' }) // Define our Post model // id, createdAt, and updatedAt are added by sequelize automatically let Post = database.define('posts', { title: Sequelize.STRING, body: Sequelize.TEXT }) // Initialize epilogue epilogue.initialize({ app: app, sequelize: database }) // Create the dynamic REST resource for our Post model let userResource = epilogue.resource({ model: Post, endpoints: ['/posts', '/posts/:id'] }) // Resets the database and launches the express app on :8081 database .sync({ force: true }) .then(() => { app.listen(8081, () => { console.log('listening to port localhost:8081') }) }) 

Обязательно замените переменные {yourOktaDomain} и {clientId} в приведенном выше коде значениями из вашего приложения OIDC в ​​Okta.

Добавить Sequelize

Sequelize — это основанная на обещаниях ORM для Node.js. Он поддерживает диалекты PostgreSQL, MySQL, SQLite и MSSQL и обеспечивает надежную поддержку транзакций, отношения, репликацию чтения и многое другое.

Для простоты этого руководства вы будете использовать SQLite для ограничения внешних зависимостей. Следующий код инициализирует экземпляр Sequelize, используя SQLite в качестве драйвера.

 let database = new Sequelize({ dialect: 'sqlite', storage: './test.sqlite' }) 

Каждый пост имеет title и body . (Поля, createdAt и updatedAt , добавляются Sequelize автоматически). С Sequelize вы определяете модели, вызывая define() для вашего экземпляра.

 let Post = database.define('posts', { title: Sequelize.STRING, body: Sequelize.TEXT }) 

Добавить эпилог

Epilogue создает гибкие конечные точки REST из моделей Sequelize в приложении Express. Если вы когда-либо кодировали конечные точки REST, вы знаете, сколько существует повторений. СУХОЙ FTW!

 // Initialize epilogue epilogue.initialize({ app: app, sequelize: database }) // Create the dynamic REST resource for our Post model let userResource = epilogue.resource({ model: Post, endpoints: ['/posts', '/posts/:id'] }) 

Проверьте свой JWT

Это наиболее важный компонент вашего сервера API REST. Без этого промежуточного программного обеспечения любой пользователь может выполнять операции CRUD с нашей базой данных. Если заголовок авторизации отсутствует или токен доступа недействителен, вызов API завершится ошибкой и вернет ошибку.

 // verify JWT token middleware app.use((req, res, next) => { // require every request to have an authorization header if (!req.headers.authorization) { return next(new Error('Authorization header is required')) } let parts = req.headers.authorization.trim().split(' ') let accessToken = parts.pop() oktaJwtVerifier.verifyAccessToken(accessToken) .then(jwt => { req.user = { uid: jwt.claims.uid, email: jwt.claims.sub } next() }) .catch(next) // jwt did not verify! }) 

Запустите сервер

Откройте новое окно терминала и запустите сервер с помощью командного node ./src/server . Вы должны увидеть отладочную информацию из Sequelize и приложения, прослушивающего порт 8081.

Заполните компонент «Менеджер сообщений»

Теперь, когда сервер REST API завершен, вы можете начать подключать свой менеджер сообщений, чтобы получать сообщения, создавать сообщения, редактировать сообщения и удалять сообщения.

Я всегда централизую свои API-интеграции в единый вспомогательный модуль. Это делает код в компонентах намного чище и обеспечивает единое местоположение на случай, если вам нужно что-то изменить с помощью запроса API.

Создайте файл ./src/api.js и скопируйте / вставьте в него следующий код:

 import Vue from 'vue' import axios from 'axios' const client = axios.create({ baseURL: 'http://localhost:8081/', json: true }) export default { async execute (method, resource, data) { // inject the accessToken for each request let accessToken = await Vue.prototype.$auth.getAccessToken() return client({ method, url: resource, data, headers: { Authorization: `Bearer ${accessToken}` } }).then(req => { return req.data }) }, getPosts () { return this.execute('get', '/posts') }, getPost (id) { return this.execute('get', `/posts/${id}`) }, createPost (data) { return this.execute('post', '/posts', data) }, updatePost (id, data) { return this.execute('put', `/posts/${id}`, data) }, deletePost (id) { return this.execute('delete', `/posts/${id}`) } } 

Когда вы аутентифицируетесь с помощью OIDC, маркер доступа сохраняется локально в браузере. Поскольку у каждого запроса API должен быть токен доступа, вы можете извлечь его из клиента аутентификации и установить в запросе.

 let accessToken = await Vue.prototype.$auth.getAccessToken() return client({ method, url: resource, data, headers: { Authorization: `Bearer ${accessToken}` } }) 

Создавая следующие прокси-методы внутри вашего помощника API, код вне вспомогательного модуля остается чистым и семантическим.

 getPosts () { return this.execute('get', '/posts') }, getPost (id) { return this.execute('get', `/posts/${id}`) }, createPost (data) { return this.execute('post', '/posts', data) }, updatePost (id, data) { return this.execute('put', `/posts/${id}`, data) }, deletePost (id) { return this.execute('delete', `/posts/${id}`) } 

Теперь у вас есть все компоненты, необходимые для подключения компонента менеджера постов для выполнения операций CRUD через REST API. Откройте ./src/components/PostsManager.vue и скопируйте / вставьте следующий код.

 <template> <div class="container-fluid mt-4"> <h1 class="h1">Posts Manager</h1> <b-alert :show="loading" variant="info">Loading...</b-alert> <b-row> <b-col> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Title</th> <th>Updated At</th> <th>&nbsp;</th> </tr> </thead> <tbody> <tr v-for="post in posts" :key="post.id"> <td>{{ post.id }}</td> <td>{{ post.title }}</td> <td>{{ post.updatedAt }}</td> <td class="text-right"> <a href="#" @click.prevent="populatePostToEdit(post)">Edit</a> - <a href="#" @click.prevent="deletePost(post.id)">Delete</a> </td> </tr> </tbody> </table> </b-col> <b-col lg="3"> <b-card :title="(model.id ? 'Edit Post ID#' + model.id : 'New Post')"> <form @submit.prevent="savePost"> <b-form-group label="Title"> <b-form-input type="text" v-model="model.title"></b-form-input> </b-form-group> <b-form-group label="Body"> <b-form-textarea rows="4" v-model="model.body"></b-form-textarea> </b-form-group> <div> <b-btn type="submit" variant="success">Save Post</b-btn> </div> </form> </b-card> </b-col> </b-row> </div> </template> <script> import api from '@/api' export default { data () { return { loading: false, posts: [], model: {} } }, async created () { this.refreshPosts() }, methods: { async refreshPosts () { this.loading = true this.posts = await api.getPosts() this.loading = false }, async populatePostToEdit (post) { this.model = Object.assign({}, post) }, async savePost () { if (this.model.id) { await api.updatePost(this.model.id, this.model) } else { await api.createPost(this.model) } this.model = {} // reset form await this.refreshPosts() }, async deletePost (id) { if (confirm('Are you sure you want to delete this post?')) { // if we are editing a post we deleted, remove it from the form if (this.model.id === id) { this.model = {} } await api.deletePost(id) await this.refreshPosts() } } } } </script> 

 async refreshPosts () { this.loading = true this.posts = await api.getPosts() this.loading = false } 

 async savePost () { if (this.model.id) { await api.updatePost(this.model.id, this.model) } else { await api.createPost(this.model) } this.model = {} // reset form await this.refreshPosts() } 

 async populatePostToEdit (post) { this.model = Object.assign({}, post) } 

 async deletePost (id) { if (confirm('Are you sure you want to delete this post?')) { await api.deletePost(id) await this.refreshPosts() } } 

 node ./src/server 

 npm run dev