如何使用 OIDC (vuejs + nodejs) 对前端和后端进行身份验证？答案

【问题标题】：How to authenticate both frontend and backend using OIDC (vuejs + nodejs)?如何使用 OIDC (vuejs + nodejs) 对前端和后端进行身份验证？
【发布时间】：2020-05-11 13:05:17
【问题描述】：

我正在构建一个带有 Vuejs 前端和 Nodejs 后端的单页应用程序。阅读了大量关于单点登录和 oidc 的文章，并设法使用 Oidc 为前端实现身份验证，我从身份提供者那里获得了一个令牌。

但现在不确定如何为后端以及何时/何地/如何实现这一点。

所以目前，当用户访问该页面时，在我的 router.js 文件中，会发生这种情况：

router.beforeEach(vuexOidcCreateRouterMiddleware(store));

然后在商店里，我这样做：

Vue.use(vuex);
const store = new Vuex.Store({
  state: {
    // holds current list of products
    products: [],
  },
  getters,
  mutations,
  actions,
  modules: {
    // initialize PING-OIDC module
    oidcStore: vuexOidcCreateStoreModule(
      oidcSettings,
      { namespaced: false },
      {
        userLoaded: (oidcUser) => {
          axios.defaults.headers.common.Authorization = `${oidcUser.token_type} ${oidcUser.access_token}`;
        },
      },
    ),
  },
});

export default store;

所以我设置了授权标头，但现在我不确定在哪里以及如何在后端继续添加+验证身份验证。

对这一切都很陌生，似乎有很多不同的方法可以继续，所以感谢所有提示。

目前，在 server.js 中，我只需执行以下操作：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()) 

const cors = require('cors')
const corsOptions = {
  origin: 'http://localhost:5002',
  optionsSuccessStatus: 200
}

app.use(cors(corsOptions))

//get mysql db here
const data = require('./app/config/db.config.js');
const db = data.MySQL_DB;

 //  show all products
app.get('/api/productlist',(req, res) => {
  const sql = "SELECT ID FROM Product_Table";
  const query = db.query(sql, (err, results) => {
    if(err) throw err;
    console.log("productIds ", results);
    res.send(JSON.stringify({"status": 200, "error": null, "response": results}));
  });
});


// Create a Server
var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("App listening at http://%s:%s", host, port)
})

那么我也应该在那里创建一个post 请求吗？只是不确定如何在那里验证请求。非常感谢您的帮助！

【问题讨论】：

标签： node.js vue.js authentication vuex openid-connect

【解决方案1】：

您需要明确要保护哪些数据/路由/页面。

您从客户端登录 -> 发送到服务器（例如：api/login）-> 使用凭据响应客户端 -> 存储用户和凭据

请参阅passport.js 以了解快递查看数据服务器端的访问控制

请注意，客户端中的路由很容易被破解

【讨论】：