@sungaoxiang/vue-sso NPM

vue-sso

SSO component for Vue.js.

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);
  }
});