Single Sign On Plugin for PSU

View Change Log

Installation

npm install --save @psu/sso

Requirements

Vuex Identity data is stored in the Vuex state. Your app must have Vuex installed, and the store made globally available. See "Usage" section for details

Optional There are no additional dependencies for the SSO component, However:

• SSO's auto-refresh of JWT expiration only works when making your AJAX requests via jQuery. Therefore, I recommend using a recent version of jQuery from the Static Content Server: https://content.oit.pdx.edu[/nonprod]/wdt/jquery/jquery-3.3.1.js
• When Font-Awesome is available, the development toolbar and the proxy features will look nicer. I recommend using FontAwesome: https://content.oit.pdx.edu[/nonprod]/font-awesome/css/font-awesome.min.css

Usage

1. In public/index.html add the optional jQuery and FontAwesome references:

    <script src="https://content.oit.pdx.edu[/nonprod]/wdt/jquery/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="https://content.oit.pdx.edu/nonprod/font-awesome/css/font-awesome.min.css">

2. Create /src/store and /src/store/modules directories

3. Create /src/store/index.js with the following content:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const store = new Vuex.Store({
	strict: true,
	modules: { }
});

4. In main.js add/include the following lines:

    import { store } from './store'
    import ssoPlugin from '@psu/sso'
    Vue.use(ssoPlugin, {store: store});

    Vue.prototype.$appName = "MY_APP_NAME";  // Your unique app identifier
    Vue.prototype.$envName = "test";         // {local, dev, test, prod}
    
    new Vue({
        store,
        render: h => h(App),
    }).$mount('#app');

5. In App.vue add the sso component. <sso />

   Optional properties:

   • The title of your application: title="My Awesome App"
   • Fetch the user's roles?: appRoles="Y"
   • Get identity data: additionalIdentity="Y"

Environment Names

$envName: Determines which Finti and SSO environments to use

• prod: Production instances
• test: Deployed non-production instances
• dev: Local Finti with deployed non-production SSO-Proxy
• local: Locally-run instances of Finti and SSO-Proxy

Accessing identity info

Identity info is stored in the Vuex store as "identity". Use the Vue Devtools browser plugin to see all the available data.

A good way to access the values is to create a computed property to access these values:

computed{
    name: function(){
        return this.$store.state.identity.name
    }
},

If you need access to other data, checkout the $jwt module with functions that interact directly with the JWT.

Publishing Changes

To publish changes to this plugin on NPM, you must first have an NPM account. You must sign into your account on the command line using npm login. You can check to see if you are logged in via npm whoami. You will also need to be added to the @psu scope.

Once you have you npm account in order and you have made your changes to the sso plugin:

1. Be sure to update the version in package.json
2. Run the following two commands:

cd <rootDirectory>
npm run build-bundle
npm publish --access public

Updating the Installed Plugin

npm update @psu/sso