OIDC(vuejs + nodejs)를 사용하여 프런트엔드와 백엔드를 모두 인증하는 방법?

OIDC(vuejs + nodejs)를 사용하여 프런트엔드와 백엔드를 모두 인증하는 방법?

나는 Vuejs 프런트엔드와 Nodejs 백엔드로 단일 페이지 애플리케이션을 만들고 있다.싱글 사인온과 oidc에 대한 많은 정보를 읽고 프런트엔드에 Oidc를 사용하여 인증을 구현하는 데 성공했는데, 여기서 ID 제공자로부터 토큰을 받았다.

그러나 지금은 백엔드에 이 기능을 구현하는 방법과 언제 어디서 어떻게 구현하는지도 확실하지 않다.

따라서 현재 사용자가 페이지에 액세스할 때 내 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거기에서도 요청하시겠습니까?요청의 유효성을 어떻게 확인할 수 있는지 확실하지 않다.도와줘서 정말 고마워!

보호할 데이터/루트/페이지에 대해 명확히 설명하십시오.

클라이언트에서 로그인 -> 서버로 전송(예: api/login) -> 자격 증명으로 클라이언트에 응답 -> 사용자 및 자격 증명 저장

속달은 passport.js 참조 데이터 서버 측의 액세스 제어 참조

클라이언트의 루트는 쉽게 해킹할 수 있다는 점에 유의하십시오.

참조URL: https://stackoverflow.com/questions/59909394/how-to-authenticate-both-frontend-and-backend-using-oidc-vuejs-nodejs