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

Posted 2023-02-22

【中文标题】如何使用 OIDC (vuejs + nodejs) 对前端和后端进行身份验证？

【英文标题】：How to authenticate both frontend and backend using 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 请求吗？只是不确定如何在那里验证请求。非常感谢您的帮助！

【参考方案1】：

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

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

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

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