vue-sso

SSO component for Vue.js.

Table of Contents

• Main
• Getting Started
• API Methods
• SSO Config
• Browser Support
• Versioning
• License

Main

dist/
├── vue-sso.js        (UMD)
├── vue-sso.min.js    (UMD, compressed)
├── vue-sso.common.js (CommonJS, default)
└── vue-sso.esm.js    (ES Module)

Getting Started

Install

npm install @xkeshi/vue-sso

Usage

• Browser: window.VueSSO
• CommonJS: var VueSSO = require('@xkeshi/vue-sso')
• ES2015: import VueSSO from '@xkeshi/vue-sso'

Use as a library

import VueSSO from '@xkeshi/vue-sso';

VueSSO.open('/path/to/sso', {
  success: () => {
    console.log('Login success');
    VueSSO.close();
  },
});

Use as a Vue plugin

<div id="app">
  <button type="button" @click="openSSO">Open SSO</button>
</div>

import Vue from 'vue';
import VueSSO from '@xkeshi/vue-sso';

Vue.use(VueSSO);

new Vue({
  el: '#app',
  methods: {
    openOSS() {
      this.$sso.open('/path/to/sso', {
        success: () => {
          console.log('Login success');
          this.$sso.close();
        },
      });
    },
  },
});

⬆ back to top

API Methods

open(url[, options])

• url:
  • Type: string
  • The target SSO url to open.
• options (optional):
  • Type: Object
• (return value):
  • Type: Promise
  • The promise will be resolved when the dialog has shown completely.

Open the SSO dialog.

All the available options:

| Option | Type | Default | Description | | --- | --- | --- | --- | | title | string | '登录' | The title of the dialog. | | width | number | 360 | The width of the dialog. | | zIndex | number | 1000 | The z-index of the dialog. | | backdrop | boolean | true | Closes the dialog when the modal is clicked. | | keyboard | boolean | true | Closes the dialog when the escape key is pressed. | | success | Function | null | The login success callback. | | error | Function | null | The login error callback. |

close()

• (return value):
  • Type: Promise
  • The promise will be resolved when the dialog has hidden completely.

Close the SSO dialog.

⬆ back to top

SSO Config

// In login page
window.addEventListener('message', function (e) {
  var errors = document.querySelector('.errors');
  var error = errors ? errors.textContent : '';
  var body = document.body;
  var data = e.data;

  if (data && data.type === 'check.sso') {
    e.source.postMessage({
      type: error ? 'error.sso' : 'process.sso',
      message: error,
      clientWidth: body.clientWidth,
      clientHeight: body.clientHeight,
      scrollWidth: body.scrollWidth,
      scrollHeight: body.scrollHeight
    }, e.origin);
  }
});

// In login success page
window.addEventListener('message', function (e) {
  var body = document.body;
  var data = e.data;

  if (data && data.type === 'check.sso') {
    e.source.postMessage({
      type: 'success.sso',
      clientWidth: body.clientWidth,
      clientHeight: body.clientHeight,
      scrollWidth: body.scrollWidth,
      scrollHeight: body.scrollHeight
    }, e.origin);
  }
});

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 11+

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Xkeshi

⬆ back to top