# Single Sign On Plugin for PSU

> *[View Change Log](changelog.md)*

## 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](https://www.npmjs.com/signup).  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
```