@docimax/oidc

docimax-oidc

An oidc-client application for docimax.

setup

npm i @docimax/oidc
npm i axios postcss-import postcss-loader postcss-url -D

配置文件

在 src/ 目录下新建一个 auth.js 用于 oidc 的配置文件，内容如下（请按需修改）：

auth.js 内容如下：

export default {
  authority: 'http://192.168.1.67:10000/',
  client_id: 'plugin',
  redirect_uri: window.location.origin + '/oidc-callback',
  post_logout_redirect_uri: window.location.origin + '/',

  // if we choose to use popup window instead for logins
  popup_redirect_uri: window.location.origin + '/popup.html',
  popupWindowFeatures:
    'menubar=yes,location=yes,toolbar=yes,width=1200,height=800,left=100,top=100;resizable=yes',

  // these two will be done dynamically from the buttons clicked, but are
  // needed if you want to use the silent_renew
  response_type: 'id_token token',
  // scope: "openid profile email api1 api2.read_only",
  scope: 'openid profile',

  // this will toggle if profile endpoint is used
  loadUserInfo: false,

  // silent renew will get a new access_token via an iframe
  // just prior to the old access_token expiring (60 seconds prior)
  silent_redirect_uri: window.location.origin + '/silent.html',
  automaticSilentRenew: true,

  // will revoke (reference) access tokens at logout time
  revokeAccessTokenOnSignout: true,

  // this will allow all the OIDC protocol claims to be visible in the window. normally a client app
  // wouldn't care about them or want them taking up space
  filterProtocolClaims: false,
};

src/main.js(或 index.js)

注意：axios 也是必要的

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { oidcInstance } from '@docimax/oidc';

import axios from 'axios';

import auth from './auth';

Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
Vue.use(oidcInstance, { oidcConf: auth, router, store });

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

src/router.js

目前只支持 history 模式，请尽量保持配置一致。

另外， oidc-callback 页会被自动添加到项目的路由上，因此如果 router 中包含了 oidc-callback 相关的路由配置，请删除。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import { oidcGuard } from '@docimax/oidc';

import store from './store';
Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (to.name === 'oidc-callback') {
    next();
  } else {
    oidcGuard(Vue, store, next);
  }
});

export default router;

vue.config.js

67 默认配置有可用的 oidc-client，auth.js 不做任何修改的情况下，需要通过 4300 端口启动项目。

vue.config.js

module.exports = {
  devServer: {
    port: 4300,
  },
};

获取 userinfo

直接使用 getUserinfo 即可

computed: {
  ...mapGetters("docimax", ["getUserinfo"])
}

退出

import { oidcSignout } from '@docimax/oidc';

// ...

function yourFunction() {
  // this 对应的是本 spa 所实例化的 vue 对象
  oidcSignout(this); // here
}